AnHanTech
264
member/profile/profile.vue
Normal file
264
member/profile/profile.vue
Normal file
@@ -0,0 +1,264 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="example">
|
||||||
|
<!-- 基础表单校验 -->
|
||||||
|
<uni-forms ref="valiForm" :rules="rules" :modelValue="formData">
|
||||||
|
|
||||||
|
<uni-forms-item label="签名">
|
||||||
|
<uni-easyinput type="textarea" :disabled="isDisabled" v-model="formData.introduction" placeholder="请输入自我介绍" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="昵称" name="name">
|
||||||
|
<uni-easyinput v-model="formData.name" placeholder="请输入姓名" :disabled="isDisabled"/>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="性别">
|
||||||
|
<uni-data-checkbox v-model="formData.sex" :localdata="sexs" :disabled="isDisabled" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="生日">
|
||||||
|
<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.datetimesingle" :disabled="isDisabled" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="身高" name="name">
|
||||||
|
<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled"/>
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
<uni-forms-item label="所在地">
|
||||||
|
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="学历">
|
||||||
|
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="职业">
|
||||||
|
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="企业">
|
||||||
|
<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="家乡">
|
||||||
|
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="自我介绍" name="introduction">
|
||||||
|
<uni-easyinput type="textarea" v-model="formData.introduction" placeholder="请输入自我介绍" :disabled="isDisabled" />
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
|
||||||
|
<uni-forms-item label="月收入">
|
||||||
|
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="婚姻">
|
||||||
|
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="房产">
|
||||||
|
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<uni-forms-item label="所在地">
|
||||||
|
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="年龄">
|
||||||
|
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="身高">
|
||||||
|
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="学历">
|
||||||
|
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
|
||||||
|
</uni-forms-item>
|
||||||
|
</uni-forms>
|
||||||
|
<button type="primary" @click="submit('valiForm')">提交</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isDisabled:true,
|
||||||
|
// 基础表单数据
|
||||||
|
formData: {
|
||||||
|
name: '',
|
||||||
|
age: '',
|
||||||
|
introduction: '',
|
||||||
|
sex: 2,
|
||||||
|
hobby: [5],
|
||||||
|
datetimesingle: 1627529992399
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
educations: [{
|
||||||
|
value: 0,
|
||||||
|
text: "篮球"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "足球"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "游泳"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 单选数据源
|
||||||
|
sexs: [{
|
||||||
|
text: '男',
|
||||||
|
value: 0
|
||||||
|
}, {
|
||||||
|
text: '女',
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
text: '保密',
|
||||||
|
value: 2
|
||||||
|
}],
|
||||||
|
// 多选数据源
|
||||||
|
hobbys: [{
|
||||||
|
text: '跑步',
|
||||||
|
value: 0
|
||||||
|
}, {
|
||||||
|
text: '游泳',
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
text: '绘画',
|
||||||
|
value: 2
|
||||||
|
}, {
|
||||||
|
text: '足球',
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
text: '篮球',
|
||||||
|
value: 4
|
||||||
|
}, {
|
||||||
|
text: '其他',
|
||||||
|
value: 5
|
||||||
|
}],
|
||||||
|
// 分段器数据
|
||||||
|
current: 0,
|
||||||
|
items: ['左对齐', '顶部对齐'],
|
||||||
|
// 校验表单数据
|
||||||
|
valiFormData: {
|
||||||
|
name: '',
|
||||||
|
age: '',
|
||||||
|
introduction: '',
|
||||||
|
},
|
||||||
|
// 校验规则
|
||||||
|
rules: {
|
||||||
|
name: {
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '姓名不能为空'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
age: {
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '年龄不能为空'
|
||||||
|
}, {
|
||||||
|
format: 'number',
|
||||||
|
errorMessage: '年龄只能输入数字'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 自定义表单数据
|
||||||
|
customFormData: {
|
||||||
|
name: '',
|
||||||
|
age: '',
|
||||||
|
hobby: []
|
||||||
|
},
|
||||||
|
// 自定义表单校验规则
|
||||||
|
customRules: {
|
||||||
|
name: {
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '姓名不能为空'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
age: {
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '年龄不能为空'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
hobby: {
|
||||||
|
rules: [{
|
||||||
|
format: 'array'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validateFunction: function(rule, value, data, callback) {
|
||||||
|
if (value.length < 2) {
|
||||||
|
callback('请至少勾选两个兴趣爱好')
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {},
|
||||||
|
onReady() {
|
||||||
|
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
||||||
|
//this.$refs.customForm.setRules(this.customRules)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClickItem(e) {
|
||||||
|
console.log(e);
|
||||||
|
this.current = e.currentIndex
|
||||||
|
},
|
||||||
|
submit(ref) {
|
||||||
|
this.$refs[ref].validate().then(res => {
|
||||||
|
console.log('success', res);
|
||||||
|
uni.showToast({
|
||||||
|
title: `校验通过`
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
console.log('err', err);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.container{
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.example {
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
margin-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 35px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-forms-item button {
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-forms-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
17
pages.json
17
pages.json
@@ -33,6 +33,23 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"subPackages": [
|
||||||
|
{
|
||||||
|
"root": "member",
|
||||||
|
"pages": [
|
||||||
|
|
||||||
|
{
|
||||||
|
"path" : "profile/profile",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "个人资料",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"list": [{
|
"list": [{
|
||||||
"pagePath": "pages/tabbar/home/home",
|
"pagePath": "pages/tabbar/home/home",
|
||||||
|
|||||||
26
uni_modules/uni-card/changelog.md
Normal file
26
uni_modules/uni-card/changelog.md
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
## 1.3.1（2021-12-20）
|
||||||
|
- 修复 在vue页面下略缩图显示不正常的bug
|
||||||
|
## 1.3.0（2021-11-19）
|
||||||
|
- 重构插槽的用法 ，header 替换为 title
|
||||||
|
- 新增 actions 插槽
|
||||||
|
- 新增 cover 封面图属性和插槽
|
||||||
|
- 新增 padding 内容默认内边距离
|
||||||
|
- 新增 margin 卡片默认外边距离
|
||||||
|
- 新增 spacing 卡片默认内边距
|
||||||
|
- 新增 shadow 卡片阴影属性
|
||||||
|
- 取消 mode 属性，可使用组合插槽代替
|
||||||
|
- 取消 note 属性 ，使用actions插槽代替
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-card](https://uniapp.dcloud.io/component/uniui/uni-card)
|
||||||
|
## 1.2.1（2021-07-30）
|
||||||
|
- 优化 vue3下事件警告的问题
|
||||||
|
## 1.2.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.1.8（2021-07-01）
|
||||||
|
- 优化 图文卡片无图片加载时，提供占位图标
|
||||||
|
- 新增 header 插槽，自定义卡片头部（ 图文卡片 mode="style" 时，不支持）
|
||||||
|
- 修复 thumbnail 不存在仍然占位的 bug
|
||||||
|
## 1.1.7（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.6（2021-02-04）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
270
uni_modules/uni-card/components/uni-card/uni-card.vue
Normal file
270
uni_modules/uni-card/components/uni-card/uni-card.vue
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}"
|
||||||
|
:style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}">
|
||||||
|
<!-- 封面 -->
|
||||||
|
<slot name="cover">
|
||||||
|
<view v-if="cover" class="uni-card__cover">
|
||||||
|
<image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<slot name="title">
|
||||||
|
<view v-if="title || extra" class="uni-card__header">
|
||||||
|
<!-- 卡片标题 -->
|
||||||
|
<view class="uni-card__header-box" @click="onClick('title')">
|
||||||
|
<view v-if="thumbnail" class="uni-card__header-avatar">
|
||||||
|
<image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-card__header-content">
|
||||||
|
<text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
|
||||||
|
<text v-if="title&&subTitle"
|
||||||
|
class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-card__header-extra" @click="onClick('extra')">
|
||||||
|
<text class="uni-card__header-extra-text">{{ extra }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<!-- 卡片内容 -->
|
||||||
|
<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
<view class="uni-card__actions" @click="onClick('actions')">
|
||||||
|
<slot name="actions"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Card 卡片
|
||||||
|
* @description 卡片视图组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=22
|
||||||
|
* @property {String} title 标题文字
|
||||||
|
* @property {String} subTitle 副标题
|
||||||
|
* @property {Number} padding 内容内边距
|
||||||
|
* @property {Number} margin 卡片外边距
|
||||||
|
* @property {Number} spacing 卡片内边距
|
||||||
|
* @property {String} extra 标题额外信息
|
||||||
|
* @property {String} cover 封面图（本地路径需要引入）
|
||||||
|
* @property {String} thumbnail 标题左侧缩略图
|
||||||
|
* @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
|
||||||
|
* @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
|
||||||
|
* @property {String} shadow 卡片阴影
|
||||||
|
* @property {Boolean} border 卡片边框
|
||||||
|
* @event {Function} click 点击 Card 触发事件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniCard',
|
||||||
|
emits: ['click'],
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
subTitle: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
type: String,
|
||||||
|
default: '10px'
|
||||||
|
},
|
||||||
|
margin: {
|
||||||
|
type: String,
|
||||||
|
default: '15px'
|
||||||
|
},
|
||||||
|
spacing: {
|
||||||
|
type: String,
|
||||||
|
default: '0 10px'
|
||||||
|
},
|
||||||
|
extra: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
cover: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
thumbnail: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
isFull: {
|
||||||
|
// 内容区域是否通栏
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
isShadow: {
|
||||||
|
// 是否开启阴影
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
shadow: {
|
||||||
|
type: String,
|
||||||
|
default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick(type) {
|
||||||
|
this.$emit('click', type)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-border-3: #EBEEF5 !default;
|
||||||
|
$uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
||||||
|
$uni-main-color: #3a3a3a !default;
|
||||||
|
$uni-base-color: #6a6a6a !default;
|
||||||
|
$uni-secondary-color: #909399 !default;
|
||||||
|
$uni-spacing-sm: 8px !default;
|
||||||
|
$uni-border-color:$uni-border-3;
|
||||||
|
$uni-shadow: $uni-shadow-base;
|
||||||
|
$uni-card-title: 15px;
|
||||||
|
$uni-cart-title-color:$uni-main-color;
|
||||||
|
$uni-card-subtitle: 12px;
|
||||||
|
$uni-cart-subtitle-color:$uni-secondary-color;
|
||||||
|
$uni-card-spacing: 10px;
|
||||||
|
$uni-card-content-color: $uni-base-color;
|
||||||
|
|
||||||
|
.uni-card {
|
||||||
|
margin: $uni-card-spacing;
|
||||||
|
padding: 0 $uni-spacing-sm;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||||
|
background-color: #fff;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.uni-card__cover {
|
||||||
|
position: relative;
|
||||||
|
margin-top: $uni-card-spacing;
|
||||||
|
flex-direction: row;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 4px;
|
||||||
|
.uni-card__cover-image {
|
||||||
|
flex: 1;
|
||||||
|
// width: 100%;
|
||||||
|
/* #ifndef APP-PLUS */
|
||||||
|
vertical-align: middle;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card__header {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px $uni-border-color solid;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: $uni-card-spacing;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.uni-card__header-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card__header-avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-right: $uni-card-spacing;
|
||||||
|
.uni-card__header-avatar-image {
|
||||||
|
flex: 1;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card__header-content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
// height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.uni-card__header-content-title {
|
||||||
|
font-size: $uni-card-title;
|
||||||
|
color: $uni-cart-title-color;
|
||||||
|
// line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card__header-content-subtitle {
|
||||||
|
font-size: $uni-card-subtitle;
|
||||||
|
margin-top: 5px;
|
||||||
|
color: $uni-cart-subtitle-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card__header-extra {
|
||||||
|
line-height: 12px;
|
||||||
|
|
||||||
|
.uni-card__header-extra-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: $uni-cart-subtitle-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card__content {
|
||||||
|
padding: $uni-card-spacing;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $uni-card-content-color;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card__actions {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card--border {
|
||||||
|
border: 1px solid $uni-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card--shadow {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-shadow: $uni-shadow;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-card--full {
|
||||||
|
margin: 0;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-card--full:after {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
.uni-ellipsis {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
90
uni_modules/uni-card/package.json
Normal file
90
uni_modules/uni-card/package.json
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-card",
|
||||||
|
"displayName": "uni-card 卡片",
|
||||||
|
"version": "1.3.1",
|
||||||
|
"description": "Card 组件，提供常见的卡片样式。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"card",
|
||||||
|
"",
|
||||||
|
"卡片"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-icons",
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12
uni_modules/uni-card/readme.md
Normal file
12
uni_modules/uni-card/readme.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## Card 卡片
|
||||||
|
> **组件名：uni-card**
|
||||||
|
> 代码块： `uCard`
|
||||||
|
|
||||||
|
卡片视图组件。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-card)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
45
uni_modules/uni-data-checkbox/changelog.md
Normal file
45
uni_modules/uni-data-checkbox/changelog.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
## 1.0.3（2022-09-16）
|
||||||
|
- 可以使用 uni-scss 控制主题色
|
||||||
|
## 1.0.2（2022-06-30）
|
||||||
|
- 优化 在 uni-forms 中的依赖注入方式
|
||||||
|
## 1.0.1（2022-02-07）
|
||||||
|
- 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
|
||||||
|
## 1.0.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
|
||||||
|
## 0.2.5（2021-08-23）
|
||||||
|
- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
|
||||||
|
## 0.2.4（2021-08-17）
|
||||||
|
- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
|
||||||
|
## 0.2.3（2021-08-11）
|
||||||
|
- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
|
||||||
|
## 0.2.2（2021-07-30）
|
||||||
|
- 优化 在uni-forms组件，与label不对齐的问题
|
||||||
|
## 0.2.1（2021-07-27）
|
||||||
|
- 修复 单选默认值为0不能选中的Bug
|
||||||
|
## 0.2.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 0.1.11（2021-07-06）
|
||||||
|
- 优化 删除无用日志
|
||||||
|
## 0.1.10（2021-07-05）
|
||||||
|
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
|
||||||
|
## 0.1.9（2021-07-05）
|
||||||
|
- 修复 nvue 黑框样式问题
|
||||||
|
## 0.1.8（2021-06-28）
|
||||||
|
- 修复 selectedTextColor 属性不生效的Bug
|
||||||
|
## 0.1.7（2021-06-02）
|
||||||
|
- 新增 map 属性，可以方便映射text/value属性
|
||||||
|
## 0.1.6（2021-05-26）
|
||||||
|
- 修复 不关联服务空间的情况下组件报错的Bug
|
||||||
|
## 0.1.5（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 0.1.4（2021-04-09）
|
||||||
|
- 修复 nvue 下无法选中的问题
|
||||||
|
## 0.1.3（2021-03-22）
|
||||||
|
- 新增 disabled属性
|
||||||
|
## 0.1.2（2021-02-24）
|
||||||
|
- 优化 默认颜色显示
|
||||||
|
## 0.1.1（2021-02-24）
|
||||||
|
- 新增 支持nvue
|
||||||
|
## 0.1.0（2021-02-18）
|
||||||
|
- “暂无数据”显示居中
|
||||||
@@ -0,0 +1,821 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
||||||
|
<template v-if="!isLocal">
|
||||||
|
<view class="uni-data-loading">
|
||||||
|
<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
|
||||||
|
<text v-else>{{mixinDatacomErrorMessage}}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
|
||||||
|
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||||
|
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
||||||
|
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner" :style="item.styleIcon">
|
||||||
|
<view class="checkbox__inner-icon"></view>
|
||||||
|
</view>
|
||||||
|
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||||
|
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||||
|
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
|
||||||
|
</view>
|
||||||
|
</label>
|
||||||
|
</checkbox-group>
|
||||||
|
<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
|
||||||
|
<!-- -->
|
||||||
|
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||||
|
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
||||||
|
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
|
||||||
|
:style="item.styleBackgroud">
|
||||||
|
<view class="radio__inner-icon" :style="item.styleIcon"></view>
|
||||||
|
</view>
|
||||||
|
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||||
|
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||||
|
<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
|
||||||
|
</view>
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* DataChecklist 数据选择器
|
||||||
|
* @description 通过数据渲染 checkbox 和 radio
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
||||||
|
* @property {String} mode = [default| list | button | tag] 显示模式
|
||||||
|
* @value default 默认横排模式
|
||||||
|
* @value list 列表模式
|
||||||
|
* @value button 按钮模式
|
||||||
|
* @value tag 标签模式
|
||||||
|
* @property {Boolean} multiple = [true|false] 是否多选
|
||||||
|
* @property {Array|String|Number} value 默认值
|
||||||
|
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||||
|
* @property {Number|String} min 最小选择个数 ，multiple为true时生效
|
||||||
|
* @property {Number|String} max 最大选择个数 ，multiple为true时生效
|
||||||
|
* @property {Boolean} wrap 是否换行显示
|
||||||
|
* @property {String} icon = [left|right] list 列表模式下icon显示位置
|
||||||
|
* @property {Boolean} selectedColor 选中颜色
|
||||||
|
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
||||||
|
* @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
|
||||||
|
* @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
|
||||||
|
* @value left 左侧显示
|
||||||
|
* @value right 右侧显示
|
||||||
|
* @event {Function} change 选中发生变化触发
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'uniDataChecklist',
|
||||||
|
mixins: [uniCloud.mixinDatacom || {}],
|
||||||
|
emits:['input','update:modelValue','change'],
|
||||||
|
props: {
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
},
|
||||||
|
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
default () {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// TODO vue3
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
default() {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
localdata: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
wrap: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: 'left'
|
||||||
|
},
|
||||||
|
selectedColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
selectedTextColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
emptyText:{
|
||||||
|
type: String,
|
||||||
|
default: '暂无数据'
|
||||||
|
},
|
||||||
|
disabled:{
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
map:{
|
||||||
|
type: Object,
|
||||||
|
default(){
|
||||||
|
return {
|
||||||
|
text:'text',
|
||||||
|
value:'value'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
localdata: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.range = newVal
|
||||||
|
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
mixinDatacomResData(newVal) {
|
||||||
|
this.range = newVal
|
||||||
|
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||||
|
},
|
||||||
|
value(newVal) {
|
||||||
|
this.dataList = this.getDataList(newVal)
|
||||||
|
// fix by mehaotian is_reset 在 uni-forms 中定义
|
||||||
|
// if(!this.is_reset){
|
||||||
|
// this.is_reset = false
|
||||||
|
// this.formItem && this.formItem.setValue(newVal)
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
modelValue(newVal) {
|
||||||
|
this.dataList = this.getDataList(newVal);
|
||||||
|
// if(!this.is_reset){
|
||||||
|
// this.is_reset = false
|
||||||
|
// this.formItem && this.formItem.setValue(newVal)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList: [],
|
||||||
|
range: [],
|
||||||
|
contentText: {
|
||||||
|
contentdown: '查看更多',
|
||||||
|
contentrefresh: '加载中',
|
||||||
|
contentnomore: '没有更多'
|
||||||
|
},
|
||||||
|
isLocal:true,
|
||||||
|
styles: {
|
||||||
|
selectedColor: '#2979ff',
|
||||||
|
selectedTextColor: '#666',
|
||||||
|
},
|
||||||
|
isTop:0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
dataValue(){
|
||||||
|
if(this.value === '')return this.modelValue
|
||||||
|
if(this.modelValue === '') return this.value
|
||||||
|
return this.value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.form = this.getForm('uniForms')
|
||||||
|
// this.formItem = this.getForm('uniFormsItem')
|
||||||
|
// this.formItem && this.formItem.setValue(this.value)
|
||||||
|
|
||||||
|
// if (this.formItem) {
|
||||||
|
// this.isTop = 6
|
||||||
|
// if (this.formItem.name) {
|
||||||
|
// // 如果存在name添加默认值,否则formData 中不存在这个字段不校验
|
||||||
|
// if(!this.is_reset){
|
||||||
|
// this.is_reset = false
|
||||||
|
// this.formItem.setValue(this.dataValue)
|
||||||
|
// }
|
||||||
|
// this.rename = this.formItem.name
|
||||||
|
// this.form.inputChildrens.push(this)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (this.localdata && this.localdata.length !== 0) {
|
||||||
|
this.isLocal = true
|
||||||
|
this.range = this.localdata
|
||||||
|
this.dataList = this.getDataList(this.getSelectedValue(this.range))
|
||||||
|
} else {
|
||||||
|
if (this.collection) {
|
||||||
|
this.isLocal = false
|
||||||
|
this.loadData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadData() {
|
||||||
|
this.mixinDatacomGet().then(res=>{
|
||||||
|
this.mixinDatacomResData = res.result.data
|
||||||
|
if(this.mixinDatacomResData.length === 0){
|
||||||
|
this.isLocal = false
|
||||||
|
this.mixinDatacomErrorMessage = this.emptyText
|
||||||
|
}else{
|
||||||
|
this.isLocal = true
|
||||||
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
this.mixinDatacomErrorMessage = err.message
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniForms') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
chagne(e) {
|
||||||
|
const values = e.detail.value
|
||||||
|
|
||||||
|
let detail = {
|
||||||
|
value: [],
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.multiple) {
|
||||||
|
this.range.forEach(item => {
|
||||||
|
|
||||||
|
if (values.includes(item[this.map.value] + '')) {
|
||||||
|
detail.value.push(item[this.map.value])
|
||||||
|
detail.data.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const range = this.range.find(item => (item[this.map.value] + '') === values)
|
||||||
|
if (range) {
|
||||||
|
detail = {
|
||||||
|
value: range[this.map.value],
|
||||||
|
data: range
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// this.formItem && this.formItem.setValue(detail.value)
|
||||||
|
// TODO 兼容 vue2
|
||||||
|
this.$emit('input', detail.value);
|
||||||
|
// // TOTO 兼容 vue3
|
||||||
|
this.$emit('update:modelValue', detail.value);
|
||||||
|
this.$emit('change', {
|
||||||
|
detail
|
||||||
|
})
|
||||||
|
if (this.multiple) {
|
||||||
|
// 如果 v-model 没有绑定 ，则走内部逻辑
|
||||||
|
// if (this.value.length === 0) {
|
||||||
|
this.dataList = this.getDataList(detail.value, true)
|
||||||
|
// }
|
||||||
|
} else {
|
||||||
|
this.dataList = this.getDataList(detail.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取渲染的新数组
|
||||||
|
* @param {Object} value 选中内容
|
||||||
|
*/
|
||||||
|
getDataList(value) {
|
||||||
|
// 解除引用关系，破坏原引用关系，避免污染源数据
|
||||||
|
let dataList = JSON.parse(JSON.stringify(this.range))
|
||||||
|
let list = []
|
||||||
|
if (this.multiple) {
|
||||||
|
if (!Array.isArray(value)) {
|
||||||
|
value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dataList.forEach((item, index) => {
|
||||||
|
item.disabled = item.disable || item.disabled || false
|
||||||
|
if (this.multiple) {
|
||||||
|
if (value.length > 0) {
|
||||||
|
let have = value.find(val => val === item[this.map.value])
|
||||||
|
item.selected = have !== undefined
|
||||||
|
} else {
|
||||||
|
item.selected = false
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
item.selected = value === item[this.map.value]
|
||||||
|
}
|
||||||
|
|
||||||
|
list.push(item)
|
||||||
|
})
|
||||||
|
return this.setRange(list)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 处理最大最小值
|
||||||
|
* @param {Object} list
|
||||||
|
*/
|
||||||
|
setRange(list) {
|
||||||
|
let selectList = list.filter(item => item.selected)
|
||||||
|
let min = Number(this.min) || 0
|
||||||
|
let max = Number(this.max) || ''
|
||||||
|
list.forEach((item, index) => {
|
||||||
|
if (this.multiple) {
|
||||||
|
if (selectList.length <= min) {
|
||||||
|
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
|
||||||
|
if (have !== undefined) {
|
||||||
|
item.disabled = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectList.length >= max && max !== '') {
|
||||||
|
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
|
||||||
|
if (have === undefined) {
|
||||||
|
item.disabled = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setStyles(item, index)
|
||||||
|
list[index] = item
|
||||||
|
})
|
||||||
|
return list
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 设置 class
|
||||||
|
* @param {Object} item
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
setStyles(item, index) {
|
||||||
|
// 设置自定义样式
|
||||||
|
item.styleBackgroud = this.setStyleBackgroud(item)
|
||||||
|
item.styleIcon = this.setStyleIcon(item)
|
||||||
|
item.styleIconText = this.setStyleIconText(item)
|
||||||
|
item.styleRightIcon = this.setStyleRightIcon(item)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取选中值
|
||||||
|
* @param {Object} range
|
||||||
|
*/
|
||||||
|
getSelectedValue(range) {
|
||||||
|
if (!this.multiple) return this.dataValue
|
||||||
|
let selectedArr = []
|
||||||
|
range.forEach((item) => {
|
||||||
|
if (item.selected) {
|
||||||
|
selectedArr.push(item[this.map.value])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return this.dataValue.length > 0 ? this.dataValue : selectedArr
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置背景样式
|
||||||
|
*/
|
||||||
|
setStyleBackgroud(item) {
|
||||||
|
let styles = {}
|
||||||
|
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||||
|
if (this.selectedColor) {
|
||||||
|
if (this.mode !== 'list') {
|
||||||
|
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||||
|
}
|
||||||
|
if (this.mode === 'tag') {
|
||||||
|
styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let classles = ''
|
||||||
|
for (let i in styles) {
|
||||||
|
classles += `${i}:${styles[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
},
|
||||||
|
setStyleIcon(item) {
|
||||||
|
let styles = {}
|
||||||
|
let classles = ''
|
||||||
|
if (this.selectedColor) {
|
||||||
|
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||||
|
styles['background-color'] = item.selected?selectedColor:'#fff'
|
||||||
|
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||||
|
|
||||||
|
if(!item.selected && item.disabled){
|
||||||
|
styles['background-color'] = '#F2F6FC'
|
||||||
|
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i in styles) {
|
||||||
|
classles += `${i}:${styles[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
},
|
||||||
|
setStyleIconText(item) {
|
||||||
|
let styles = {}
|
||||||
|
let classles = ''
|
||||||
|
if (this.selectedColor) {
|
||||||
|
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||||
|
if (this.mode === 'tag') {
|
||||||
|
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
|
||||||
|
} else {
|
||||||
|
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
|
||||||
|
}
|
||||||
|
if(!item.selected && item.disabled){
|
||||||
|
styles.color = '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i in styles) {
|
||||||
|
classles += `${i}:${styles[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
},
|
||||||
|
setStyleRightIcon(item) {
|
||||||
|
let styles = {}
|
||||||
|
let classles = ''
|
||||||
|
if (this.mode === 'list') {
|
||||||
|
styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
|
||||||
|
}
|
||||||
|
for (let i in styles) {
|
||||||
|
classles += `${i}:${styles[i]};`
|
||||||
|
}
|
||||||
|
|
||||||
|
return classles
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$border-color: #DCDFE6;
|
||||||
|
$disable:0.4;
|
||||||
|
|
||||||
|
@mixin flex {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-data-loading {
|
||||||
|
@include flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 36px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-data-checklist {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
flex: 1;
|
||||||
|
// 多选样式
|
||||||
|
.checklist-group {
|
||||||
|
@include flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
&.is-list {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-box {
|
||||||
|
@include flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
margin: 5px 0;
|
||||||
|
margin-right: 25px;
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文字样式
|
||||||
|
.checklist-content {
|
||||||
|
@include flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.checklist-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-left: 5px;
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkobx__list {
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-right-color: #007aff;
|
||||||
|
border-right-style: solid;
|
||||||
|
border-bottom-width:1px;
|
||||||
|
border-bottom-color: #007aff;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
height: 12px;
|
||||||
|
width: 6px;
|
||||||
|
left: -5px;
|
||||||
|
transform-origin: center;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 多选样式
|
||||||
|
.checkbox__inner {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
.checkbox__inner-icon {
|
||||||
|
position: absolute;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
top: 2px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
top: 1px;
|
||||||
|
/* #endif */
|
||||||
|
left: 5px;
|
||||||
|
height: 8px;
|
||||||
|
width: 4px;
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-right-color: #fff;
|
||||||
|
border-right-style: solid;
|
||||||
|
border-bottom-width:1px ;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
opacity: 0;
|
||||||
|
transform-origin: center;
|
||||||
|
transform: rotate(40deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单选样式
|
||||||
|
.radio__inner {
|
||||||
|
@include flex;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.radio__inner-icon {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认样式
|
||||||
|
&.is--default {
|
||||||
|
|
||||||
|
// 禁用
|
||||||
|
&.is-disable {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
.checkbox__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中
|
||||||
|
&.is-checked {
|
||||||
|
.checkbox__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
|
||||||
|
.checkbox__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.radio__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
.radio__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
// 选中禁用
|
||||||
|
&.is-disable {
|
||||||
|
.checkbox__inner {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
.radio__inner {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮样式
|
||||||
|
&.is--button {
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 1px $border-color solid;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
|
||||||
|
// 禁用
|
||||||
|
&.is-disable {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
border: 1px #eee solid;
|
||||||
|
opacity: $disable;
|
||||||
|
.checkbox__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.radio__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-checked {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
.checkbox__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
.checkbox__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
|
||||||
|
.radio__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中禁用
|
||||||
|
&.is-disable {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签样式
|
||||||
|
&.is--tag {
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 1px $border-color solid;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
margin: 0;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 禁用
|
||||||
|
&.is-disable {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-checked {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
border-color: $uni-primary;
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 列表样式
|
||||||
|
&.is--list {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
padding: 10px 15px;
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&.is-list-border {
|
||||||
|
border-top: 1px #eee solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 禁用
|
||||||
|
&.is-disable {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
.checkbox__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-checked {
|
||||||
|
.checkbox__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
|
||||||
|
.checkbox__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.radio__inner {
|
||||||
|
.radio__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-content {
|
||||||
|
.checkobx__list {
|
||||||
|
opacity: 1;
|
||||||
|
border-color: $uni-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中禁用
|
||||||
|
&.is-disable {
|
||||||
|
.checkbox__inner {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
84
uni_modules/uni-data-checkbox/package.json
Normal file
84
uni_modules/uni-data-checkbox/package.json
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-data-checkbox",
|
||||||
|
"displayName": "uni-data-checkbox 数据选择器",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"description": "通过数据驱动的单选框和复选框",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"checkbox",
|
||||||
|
"单选",
|
||||||
|
"多选",
|
||||||
|
"单选多选"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.1"
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-load-more","uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
18
uni_modules/uni-data-checkbox/readme.md
Normal file
18
uni_modules/uni-data-checkbox/readme.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## DataCheckbox 数据驱动的单选复选框
|
||||||
|
> **组件名：uni-data-checkbox**
|
||||||
|
> 代码块： `uDataCheckbox`
|
||||||
|
|
||||||
|
|
||||||
|
本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
|
||||||
|
|
||||||
|
1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
|
||||||
|
2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
|
||||||
|
3. 本组件合并了单选多选
|
||||||
|
4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
|
||||||
|
|
||||||
|
在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
68
uni_modules/uni-data-picker/changelog.md
Normal file
68
uni_modules/uni-data-picker/changelog.md
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
## 1.0.9（2022-11-30）
|
||||||
|
- 修复 v-for 为使用 key 值控制台 warning
|
||||||
|
## 1.0.8（2022-09-16）
|
||||||
|
- 可以使用 uni-scss 控制主题色
|
||||||
|
## 1.0.7（2022-07-06）
|
||||||
|
- 优化 pc端图标位置不正确的问题
|
||||||
|
## 1.0.6（2022-07-05）
|
||||||
|
- 优化 显示样式
|
||||||
|
## 1.0.5（2022-07-04）
|
||||||
|
- 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
|
||||||
|
## 1.0.4（2022-04-19）
|
||||||
|
- 修复 字节小程序 本地数据无法选择下一级的Bug
|
||||||
|
## 1.0.3（2022-02-25）
|
||||||
|
- 修复 nvue 不支持的 v-show 的 bug
|
||||||
|
## 1.0.2（2022-02-25）
|
||||||
|
- 修复 条件编译 nvue 不支持的 css 样式
|
||||||
|
## 1.0.1（2021-11-23）
|
||||||
|
- 修复 由上个版本引发的map、v-model等属性不生效的bug
|
||||||
|
## 1.0.0（2021-11-19）
|
||||||
|
- 优化 组件 UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-picker](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
|
||||||
|
## 0.4.9（2021-10-28）
|
||||||
|
- 修复 VUE2 v-model 概率无效的 bug
|
||||||
|
## 0.4.8（2021-10-27）
|
||||||
|
- 修复 v-model 概率无效的 bug
|
||||||
|
## 0.4.7（2021-10-25）
|
||||||
|
- 新增 属性 spaceInfo 服务空间配置 HBuilderX 3.2.11+
|
||||||
|
- 修复 树型 uniCloud 数据类型为 int 时报错的 bug
|
||||||
|
## 0.4.6（2021-10-19）
|
||||||
|
- 修复 非 VUE3 v-model 为 0 时无法选中的 bug
|
||||||
|
## 0.4.5（2021-09-26）
|
||||||
|
- 新增 清除已选项的功能（通过 clearIcon 属性配置是否显示按钮），同时提供 clear 方法以供调用，二者等效
|
||||||
|
- 修复 readonly 为 true 时报错的 bug
|
||||||
|
## 0.4.4（2021-09-26）
|
||||||
|
- 修复 上一版本造成的 map 属性失效的 bug
|
||||||
|
- 新增 ellipsis 属性，支持配置 tab 选项长度过长时是否自动省略
|
||||||
|
## 0.4.3（2021-09-24）
|
||||||
|
- 修复 某些情况下级联未触发的 bug
|
||||||
|
## 0.4.2（2021-09-23）
|
||||||
|
- 新增 提供 show 和 hide 方法，开发者可以通过 ref 调用
|
||||||
|
- 新增 选项内容过长自动添加省略号
|
||||||
|
## 0.4.1（2021-09-15）
|
||||||
|
- 新增 map 属性 字段映射，将 text/value 映射到数据中的其他字段
|
||||||
|
## 0.4.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 0.3.5（2021-06-04）
|
||||||
|
- 修复 无法加载云端数据的问题
|
||||||
|
## 0.3.4（2021-05-28）
|
||||||
|
- 修复 v-model 无效问题
|
||||||
|
- 修复 loaddata 为空数据组时加载时间过长问题
|
||||||
|
- 修复 上个版本引出的本地数据无法选择带有 children 的 2 级节点
|
||||||
|
## 0.3.3（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 0.3.2（2021-04-22）
|
||||||
|
- 修复 非树形数据有 where 属性查询报错的问题
|
||||||
|
## 0.3.1（2021-04-15）
|
||||||
|
- 修复 本地数据概率无法回显时问题
|
||||||
|
## 0.3.0（2021-04-07）
|
||||||
|
- 新增 支持云端非树形表结构数据
|
||||||
|
- 修复 根节点 parent_field 字段等于 null 时选择界面错乱问题
|
||||||
|
## 0.2.0（2021-03-15）
|
||||||
|
- 修复 nodeclick、popupopened、popupclosed 事件无法触发的问题
|
||||||
|
## 0.1.9（2021-03-09）
|
||||||
|
- 修复 微信小程序某些情况下无法选择的问题
|
||||||
|
## 0.1.8（2021-02-05）
|
||||||
|
- 优化 部分样式在 nvue 上的兼容表现
|
||||||
|
## 0.1.7（2021-02-05）
|
||||||
|
- 调整为 uni_modules 目录规范
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
// #ifdef H5
|
||||||
|
export default {
|
||||||
|
name: 'Keypress',
|
||||||
|
props: {
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const keyNames = {
|
||||||
|
esc: ['Esc', 'Escape'],
|
||||||
|
tab: 'Tab',
|
||||||
|
enter: 'Enter',
|
||||||
|
space: [' ', 'Spacebar'],
|
||||||
|
up: ['Up', 'ArrowUp'],
|
||||||
|
left: ['Left', 'ArrowLeft'],
|
||||||
|
right: ['Right', 'ArrowRight'],
|
||||||
|
down: ['Down', 'ArrowDown'],
|
||||||
|
delete: ['Backspace', 'Delete', 'Del']
|
||||||
|
}
|
||||||
|
const listener = ($event) => {
|
||||||
|
if (this.disable) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const keyName = Object.keys(keyNames).find(key => {
|
||||||
|
const keyName = $event.key
|
||||||
|
const value = keyNames[key]
|
||||||
|
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||||
|
})
|
||||||
|
if (keyName) {
|
||||||
|
// 避免和其他按键事件冲突
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit(keyName, {})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keyup', listener)
|
||||||
|
this.$once('hook:beforeDestroy', () => {
|
||||||
|
document.removeEventListener('keyup', listener)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
render: () => {}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
@@ -0,0 +1,554 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-data-tree">
|
||||||
|
<view class="uni-data-tree-input" @click="handleInput">
|
||||||
|
<slot :options="options" :data="inputSelected" :error="errorMessage">
|
||||||
|
<view class="input-value" :class="{'input-value-border': border}">
|
||||||
|
<text v-if="errorMessage" class="selected-area error-text">{{errorMessage}}</text>
|
||||||
|
<view v-else-if="loading && !isOpened" class="selected-area">
|
||||||
|
<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
|
||||||
|
</view>
|
||||||
|
<scroll-view v-else-if="inputSelected.length" class="selected-area" scroll-x="true">
|
||||||
|
<view class="selected-list">
|
||||||
|
<view class="selected-item" v-for="(item,index) in inputSelected" :key="index">
|
||||||
|
<text class="text-color">{{item.text}}</text><text v-if="index<inputSelected.length-1"
|
||||||
|
class="input-split-line">{{split}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<text v-else class="selected-area placeholder">{{placeholder}}</text>
|
||||||
|
<view v-if="clearIcon && !readonly && inputSelected.length" class="icon-clear"
|
||||||
|
@click.stop="clear">
|
||||||
|
<uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="arrow-area" v-if="(!clearIcon || !inputSelected.length) && !readonly ">
|
||||||
|
<view class="input-arrow"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view class="uni-data-tree-cover" v-if="isOpened" @click="handleClose"></view>
|
||||||
|
<view class="uni-data-tree-dialog" v-if="isOpened">
|
||||||
|
<view class="uni-popper__arrow"></view>
|
||||||
|
<view class="dialog-caption">
|
||||||
|
<view class="title-area">
|
||||||
|
<text class="dialog-title">{{popupTitle}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="dialog-close" @click="handleClose">
|
||||||
|
<view class="dialog-close-plus" data-id="close"></view>
|
||||||
|
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<data-picker-view class="picker-view" ref="pickerView" v-model="dataValue" :localdata="localdata"
|
||||||
|
:preload="preload" :collection="collection" :field="field" :orderby="orderby" :where="where"
|
||||||
|
:step-searh="stepSearh" :self-field="selfField" :parent-field="parentField" :managed-mode="true"
|
||||||
|
:map="map" :ellipsis="ellipsis" @change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick">
|
||||||
|
</data-picker-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import dataPicker from "../uni-data-pickerview/uni-data-picker.js"
|
||||||
|
import DataPickerView from "../uni-data-pickerview/uni-data-pickerview.vue"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DataPicker 级联选择
|
||||||
|
* @description 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=3796
|
||||||
|
* @property {String} popup-title 弹出窗口标题
|
||||||
|
* @property {Array} localdata 本地数据，参考
|
||||||
|
* @property {Boolean} border = [true|false] 是否有边框
|
||||||
|
* @property {Boolean} readonly = [true|false] 是否仅读
|
||||||
|
* @property {Boolean} preload = [true|false] 是否预加载数据
|
||||||
|
* @value true 开启预加载数据，点击弹出窗口后显示已加载数据
|
||||||
|
* @value false 关闭预加载数据，点击弹出窗口后开始加载数据
|
||||||
|
* @property {Boolean} step-searh = [true|false] 是否分布查询
|
||||||
|
* @value true 启用分布查询，仅查询当前选中节点
|
||||||
|
* @value false 关闭分布查询，一次查询出所有数据
|
||||||
|
* @property {String|DBFieldString} self-field 分布查询当前字段名称
|
||||||
|
* @property {String|DBFieldString} parent-field 分布查询父字段名称
|
||||||
|
* @property {String|DBCollectionString} collection 表名
|
||||||
|
* @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
|
||||||
|
* @property {String} orderby 排序字段及正序倒叙设置
|
||||||
|
* @property {String|JQLString} where 查询条件
|
||||||
|
* @event {Function} popupshow 弹出的选择窗口打开时触发此事件
|
||||||
|
* @event {Function} popuphide 弹出的选择窗口关闭时触发此事件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniDataPicker',
|
||||||
|
emits: ['popupopened', 'popupclosed', 'nodeclick', 'input', 'change', 'update:modelValue'],
|
||||||
|
mixins: [dataPicker],
|
||||||
|
components: {
|
||||||
|
DataPickerView
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
options: {
|
||||||
|
type: [Object, Array],
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
popupTitle: {
|
||||||
|
type: String,
|
||||||
|
default: '请选择'
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '请选择'
|
||||||
|
},
|
||||||
|
heightMobile: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
clearIcon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
split: {
|
||||||
|
type: String,
|
||||||
|
default: '/'
|
||||||
|
},
|
||||||
|
ellipsis: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isOpened: false,
|
||||||
|
inputSelected: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form = this.getForm('uniForms')
|
||||||
|
this.formItem = this.getForm('uniFormsItem')
|
||||||
|
if (this.formItem) {
|
||||||
|
if (this.formItem.name) {
|
||||||
|
this.rename = this.formItem.name
|
||||||
|
this.form.inputChildrens.push(this)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.load()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clear() {
|
||||||
|
this.inputSelected.splice(0)
|
||||||
|
this._dispatchEvent([])
|
||||||
|
},
|
||||||
|
onPropsChange() {
|
||||||
|
this._treeData = []
|
||||||
|
this.selectedIndex = 0
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
load() {
|
||||||
|
if (this.readonly) {
|
||||||
|
this._processReadonly(this.localdata, this.dataValue)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isLocaldata) {
|
||||||
|
this.loadData()
|
||||||
|
this.inputSelected = this.selected.slice(0)
|
||||||
|
} else if (!this.parentField && !this.selfField && this.hasValue) {
|
||||||
|
this.getNodeData(() => {
|
||||||
|
this.inputSelected = this.selected.slice(0)
|
||||||
|
})
|
||||||
|
} else if (this.hasValue) {
|
||||||
|
this.getTreePath(() => {
|
||||||
|
this.inputSelected = this.selected.slice(0)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getForm(name = 'uniForms') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false;
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
show() {
|
||||||
|
this.isOpened = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.pickerView.updateData({
|
||||||
|
treeData: this._treeData,
|
||||||
|
selected: this.selected,
|
||||||
|
selectedIndex: this.selectedIndex
|
||||||
|
})
|
||||||
|
}, 200)
|
||||||
|
this.$emit('popupopened')
|
||||||
|
},
|
||||||
|
hide() {
|
||||||
|
this.isOpened = false
|
||||||
|
this.$emit('popupclosed')
|
||||||
|
},
|
||||||
|
handleInput() {
|
||||||
|
if (this.readonly) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.show()
|
||||||
|
},
|
||||||
|
handleClose(e) {
|
||||||
|
this.hide()
|
||||||
|
},
|
||||||
|
onnodeclick(e) {
|
||||||
|
this.$emit('nodeclick', e)
|
||||||
|
},
|
||||||
|
ondatachange(e) {
|
||||||
|
this._treeData = this.$refs.pickerView._treeData
|
||||||
|
},
|
||||||
|
onchange(e) {
|
||||||
|
this.hide()
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.inputSelected = e;
|
||||||
|
})
|
||||||
|
this._dispatchEvent(e)
|
||||||
|
},
|
||||||
|
_processReadonly(dataList, value) {
|
||||||
|
var isTree = dataList.findIndex((item) => {
|
||||||
|
return item.children
|
||||||
|
})
|
||||||
|
if (isTree > -1) {
|
||||||
|
let inputValue
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
inputValue = value[value.length - 1]
|
||||||
|
if (typeof inputValue === 'object' && inputValue.value) {
|
||||||
|
inputValue = inputValue.value
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
inputValue = value
|
||||||
|
}
|
||||||
|
this.inputSelected = this._findNodePath(inputValue, this.localdata)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.hasValue) {
|
||||||
|
this.inputSelected = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let result = []
|
||||||
|
for (let i = 0; i < value.length; i++) {
|
||||||
|
var val = value[i]
|
||||||
|
var item = dataList.find((v) => {
|
||||||
|
return v.value == val
|
||||||
|
})
|
||||||
|
if (item) {
|
||||||
|
result.push(item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (result.length) {
|
||||||
|
this.inputSelected = result
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_filterForArray(data, valueArray) {
|
||||||
|
var result = []
|
||||||
|
for (let i = 0; i < valueArray.length; i++) {
|
||||||
|
var value = valueArray[i]
|
||||||
|
var found = data.find((item) => {
|
||||||
|
return item.value == value
|
||||||
|
})
|
||||||
|
if (found) {
|
||||||
|
result.push(found)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
},
|
||||||
|
_dispatchEvent(selected) {
|
||||||
|
let item = {}
|
||||||
|
if (selected.length) {
|
||||||
|
var value = new Array(selected.length)
|
||||||
|
for (var i = 0; i < selected.length; i++) {
|
||||||
|
value[i] = selected[i].value
|
||||||
|
}
|
||||||
|
item = selected[selected.length - 1]
|
||||||
|
} else {
|
||||||
|
item.value = ''
|
||||||
|
}
|
||||||
|
if (this.formItem) {
|
||||||
|
this.formItem.setValue(item.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$emit('input', item.value)
|
||||||
|
this.$emit('update:modelValue', item.value)
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: {
|
||||||
|
value: selected
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style >
|
||||||
|
.uni-data-tree {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text {
|
||||||
|
color: #DD524D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-value {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
font-size: 14px;
|
||||||
|
/* line-height: 35px; */
|
||||||
|
padding: 0 10px;
|
||||||
|
padding-right: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 35px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-value-border {
|
||||||
|
border: 1px solid #e5e5e5;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-area {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
margin-right: auto;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 40px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-list {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
/* padding: 0 5px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-item {
|
||||||
|
flex-direction: row;
|
||||||
|
/* padding: 0 1px; */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
white-space: nowrap;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-color {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: grey;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-split-line {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-area {
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-arrow {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-left: 1px solid #999;
|
||||||
|
border-bottom: 1px solid #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-data-tree-cover {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-data-tree-dialog {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 20%;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
z-index: 102;
|
||||||
|
overflow: hidden;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 750rpx;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-caption {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
/* border-bottom: 1px solid #f0f0f0; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-area {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
margin: auto;
|
||||||
|
/* #endif */
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-title {
|
||||||
|
/* font-weight: bold; */
|
||||||
|
line-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-close-plus {
|
||||||
|
width: 16px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #666;
|
||||||
|
border-radius: 2px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-close-rotate {
|
||||||
|
position: absolute;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-view {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-clear {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifdef H5 */
|
||||||
|
@media all and (min-width: 768px) {
|
||||||
|
.uni-data-tree-cover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-data-tree-dialog {
|
||||||
|
position: absolute;
|
||||||
|
top: 55px;
|
||||||
|
height: auto;
|
||||||
|
min-height: 400px;
|
||||||
|
max-height: 50vh;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #EBEEF5;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-caption {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-clear {
|
||||||
|
/* margin-right: 5px; */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-popper__arrow,
|
||||||
|
.uni-popper__arrow::after {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popper__arrow {
|
||||||
|
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||||
|
top: -6px;
|
||||||
|
left: 10%;
|
||||||
|
margin-right: 3px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #EBEEF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popper__arrow::after {
|
||||||
|
content: " ";
|
||||||
|
top: 1px;
|
||||||
|
margin-left: -6px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,563 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
localdata: {
|
||||||
|
type: [Array, Object],
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
spaceInfo: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
collection: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
action: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
field: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
orderby: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
where: {
|
||||||
|
type: [String, Object],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
pageData: {
|
||||||
|
type: String,
|
||||||
|
default: 'add'
|
||||||
|
},
|
||||||
|
pageCurrent: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
pageSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 20
|
||||||
|
},
|
||||||
|
getcount: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
getone: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
gettree: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
manual: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
preload: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
stepSearh: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
selfField: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
parentField: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
map: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
text: "text",
|
||||||
|
value: "value"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
errorMessage: '',
|
||||||
|
loadMore: {
|
||||||
|
contentdown: '',
|
||||||
|
contentrefresh: '',
|
||||||
|
contentnomore: ''
|
||||||
|
},
|
||||||
|
dataList: [],
|
||||||
|
selected: [],
|
||||||
|
selectedIndex: 0,
|
||||||
|
page: {
|
||||||
|
current: this.pageCurrent,
|
||||||
|
size: this.pageSize,
|
||||||
|
count: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isLocaldata() {
|
||||||
|
return !this.collection.length
|
||||||
|
},
|
||||||
|
postField() {
|
||||||
|
let fields = [this.field];
|
||||||
|
if (this.parentField) {
|
||||||
|
fields.push(`${this.parentField} as parent_value`);
|
||||||
|
}
|
||||||
|
return fields.join(',');
|
||||||
|
},
|
||||||
|
dataValue() {
|
||||||
|
let isModelValue = Array.isArray(this.modelValue) ? (this.modelValue.length > 0) : (this.modelValue !== null || this.modelValue !== undefined)
|
||||||
|
return isModelValue ? this.modelValue : this.value
|
||||||
|
},
|
||||||
|
hasValue() {
|
||||||
|
if (typeof this.dataValue === 'number') {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return (this.dataValue != null) && (this.dataValue.length > 0)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.$watch(() => {
|
||||||
|
var al = [];
|
||||||
|
['pageCurrent',
|
||||||
|
'pageSize',
|
||||||
|
'spaceInfo',
|
||||||
|
'value',
|
||||||
|
'modelValue',
|
||||||
|
'localdata',
|
||||||
|
'collection',
|
||||||
|
'action',
|
||||||
|
'field',
|
||||||
|
'orderby',
|
||||||
|
'where',
|
||||||
|
'getont',
|
||||||
|
'getcount',
|
||||||
|
'gettree'
|
||||||
|
].forEach(key => {
|
||||||
|
al.push(this[key])
|
||||||
|
});
|
||||||
|
return al
|
||||||
|
}, (newValue, oldValue) => {
|
||||||
|
let needReset = false
|
||||||
|
for (let i = 2; i < newValue.length; i++) {
|
||||||
|
if (newValue[i] != oldValue[i]) {
|
||||||
|
needReset = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (newValue[0] != oldValue[0]) {
|
||||||
|
this.page.current = this.pageCurrent
|
||||||
|
}
|
||||||
|
this.page.size = this.pageSize
|
||||||
|
|
||||||
|
this.onPropsChange()
|
||||||
|
})
|
||||||
|
this._treeData = []
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onPropsChange() {
|
||||||
|
this._treeData = []
|
||||||
|
},
|
||||||
|
getCommand(options = {}) {
|
||||||
|
/* eslint-disable no-undef */
|
||||||
|
let db = uniCloud.database(this.spaceInfo)
|
||||||
|
|
||||||
|
const action = options.action || this.action
|
||||||
|
if (action) {
|
||||||
|
db = db.action(action)
|
||||||
|
}
|
||||||
|
|
||||||
|
const collection = options.collection || this.collection
|
||||||
|
db = db.collection(collection)
|
||||||
|
|
||||||
|
const where = options.where || this.where
|
||||||
|
if (!(!where || !Object.keys(where).length)) {
|
||||||
|
db = db.where(where)
|
||||||
|
}
|
||||||
|
|
||||||
|
const field = options.field || this.field
|
||||||
|
if (field) {
|
||||||
|
db = db.field(field)
|
||||||
|
}
|
||||||
|
|
||||||
|
const orderby = options.orderby || this.orderby
|
||||||
|
if (orderby) {
|
||||||
|
db = db.orderBy(orderby)
|
||||||
|
}
|
||||||
|
|
||||||
|
const current = options.pageCurrent !== undefined ? options.pageCurrent : this.page.current
|
||||||
|
const size = options.pageSize !== undefined ? options.pageSize : this.page.size
|
||||||
|
const getCount = options.getcount !== undefined ? options.getcount : this.getcount
|
||||||
|
const getTree = options.gettree !== undefined ? options.gettree : this.gettree
|
||||||
|
|
||||||
|
const getOptions = {
|
||||||
|
getCount,
|
||||||
|
getTree
|
||||||
|
}
|
||||||
|
if (options.getTreePath) {
|
||||||
|
getOptions.getTreePath = options.getTreePath
|
||||||
|
}
|
||||||
|
|
||||||
|
db = db.skip(size * (current - 1)).limit(size).get(getOptions)
|
||||||
|
|
||||||
|
return db
|
||||||
|
},
|
||||||
|
getNodeData(callback) {
|
||||||
|
if (this.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
this.getCommand({
|
||||||
|
field: this.postField,
|
||||||
|
where: this._pathWhere()
|
||||||
|
}).then((res) => {
|
||||||
|
this.loading = false
|
||||||
|
this.selected = res.result.data
|
||||||
|
callback && callback()
|
||||||
|
}).catch((err) => {
|
||||||
|
this.loading = false
|
||||||
|
this.errorMessage = err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getTreePath(callback) {
|
||||||
|
if (this.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
|
this.getCommand({
|
||||||
|
field: this.postField,
|
||||||
|
getTreePath: {
|
||||||
|
startWith: `${this.selfField}=='${this.dataValue}'`
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
this.loading = false
|
||||||
|
let treePath = []
|
||||||
|
this._extractTreePath(res.result.data, treePath)
|
||||||
|
this.selected = treePath
|
||||||
|
callback && callback()
|
||||||
|
}).catch((err) => {
|
||||||
|
this.loading = false
|
||||||
|
this.errorMessage = err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
loadData() {
|
||||||
|
if (this.isLocaldata) {
|
||||||
|
this._processLocalData()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.dataValue != null) {
|
||||||
|
this._loadNodeData((data) => {
|
||||||
|
this._treeData = data
|
||||||
|
this._updateBindData()
|
||||||
|
this._updateSelected()
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.stepSearh) {
|
||||||
|
this._loadNodeData((data) => {
|
||||||
|
this._treeData = data
|
||||||
|
this._updateBindData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this._loadAllData((data) => {
|
||||||
|
this._treeData = []
|
||||||
|
this._extractTree(data, this._treeData, null)
|
||||||
|
this._updateBindData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_loadAllData(callback) {
|
||||||
|
if (this.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
|
this.getCommand({
|
||||||
|
field: this.postField,
|
||||||
|
gettree: true,
|
||||||
|
startwith: `${this.selfField}=='${this.dataValue}'`
|
||||||
|
}).then((res) => {
|
||||||
|
this.loading = false
|
||||||
|
callback(res.result.data)
|
||||||
|
this.onDataChange()
|
||||||
|
}).catch((err) => {
|
||||||
|
this.loading = false
|
||||||
|
this.errorMessage = err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
_loadNodeData(callback, pw) {
|
||||||
|
if (this.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
|
this.getCommand({
|
||||||
|
field: this.postField,
|
||||||
|
where: pw || this._postWhere(),
|
||||||
|
pageSize: 500
|
||||||
|
}).then((res) => {
|
||||||
|
this.loading = false
|
||||||
|
callback(res.result.data)
|
||||||
|
this.onDataChange()
|
||||||
|
}).catch((err) => {
|
||||||
|
this.loading = false
|
||||||
|
this.errorMessage = err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
_pathWhere() {
|
||||||
|
let result = []
|
||||||
|
let where_field = this._getParentNameByField();
|
||||||
|
if (where_field) {
|
||||||
|
result.push(`${where_field} == '${this.dataValue}'`)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.where) {
|
||||||
|
return `(${this.where}) && (${result.join(' || ')})`
|
||||||
|
}
|
||||||
|
|
||||||
|
return result.join(' || ')
|
||||||
|
},
|
||||||
|
_postWhere() {
|
||||||
|
let result = []
|
||||||
|
let selected = this.selected
|
||||||
|
let parentField = this.parentField
|
||||||
|
if (parentField) {
|
||||||
|
result.push(`${parentField} == null || ${parentField} == ""`)
|
||||||
|
}
|
||||||
|
if (selected.length) {
|
||||||
|
for (var i = 0; i < selected.length - 1; i++) {
|
||||||
|
result.push(`${parentField} == '${selected[i].value}'`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let where = []
|
||||||
|
if (this.where) {
|
||||||
|
where.push(`(${this.where})`)
|
||||||
|
}
|
||||||
|
if (result.length) {
|
||||||
|
where.push(`(${result.join(' || ')})`)
|
||||||
|
}
|
||||||
|
|
||||||
|
return where.join(' && ')
|
||||||
|
},
|
||||||
|
_nodeWhere() {
|
||||||
|
let result = []
|
||||||
|
let selected = this.selected
|
||||||
|
if (selected.length) {
|
||||||
|
result.push(`${this.parentField} == '${selected[selected.length - 1].value}'`)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.where) {
|
||||||
|
return `(${this.where}) && (${result.join(' || ')})`
|
||||||
|
}
|
||||||
|
|
||||||
|
return result.join(' || ')
|
||||||
|
},
|
||||||
|
_getParentNameByField() {
|
||||||
|
const fields = this.field.split(',');
|
||||||
|
let where_field = null;
|
||||||
|
for (let i = 0; i < fields.length; i++) {
|
||||||
|
const items = fields[i].split('as');
|
||||||
|
if (items.length < 2) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (items[1].trim() === 'value') {
|
||||||
|
where_field = items[0].trim();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return where_field
|
||||||
|
},
|
||||||
|
_isTreeView() {
|
||||||
|
return (this.parentField && this.selfField)
|
||||||
|
},
|
||||||
|
_updateSelected() {
|
||||||
|
var dl = this.dataList
|
||||||
|
var sl = this.selected
|
||||||
|
let textField = this.map.text
|
||||||
|
let valueField = this.map.value
|
||||||
|
for (var i = 0; i < sl.length; i++) {
|
||||||
|
var value = sl[i].value
|
||||||
|
var dl2 = dl[i]
|
||||||
|
for (var j = 0; j < dl2.length; j++) {
|
||||||
|
var item2 = dl2[j]
|
||||||
|
if (item2[valueField] === value) {
|
||||||
|
sl[i].text = item2[textField]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_updateBindData(node) {
|
||||||
|
const {
|
||||||
|
dataList,
|
||||||
|
hasNodes
|
||||||
|
} = this._filterData(this._treeData, this.selected)
|
||||||
|
|
||||||
|
let isleaf = this._stepSearh === false && !hasNodes
|
||||||
|
|
||||||
|
if (node) {
|
||||||
|
node.isleaf = isleaf
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dataList = dataList
|
||||||
|
this.selectedIndex = dataList.length - 1
|
||||||
|
|
||||||
|
if (!isleaf && this.selected.length < dataList.length) {
|
||||||
|
this.selected.push({
|
||||||
|
value: null,
|
||||||
|
text: "请选择"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
isleaf,
|
||||||
|
hasNodes
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_filterData(data, paths) {
|
||||||
|
let dataList = []
|
||||||
|
let hasNodes = true
|
||||||
|
|
||||||
|
dataList.push(data.filter((item) => {
|
||||||
|
return (item.parent_value === null || item.parent_value === undefined || item.parent_value === '')
|
||||||
|
}))
|
||||||
|
for (let i = 0; i < paths.length; i++) {
|
||||||
|
var value = paths[i].value
|
||||||
|
var nodes = data.filter((item) => {
|
||||||
|
return item.parent_value === value
|
||||||
|
})
|
||||||
|
|
||||||
|
if (nodes.length) {
|
||||||
|
dataList.push(nodes)
|
||||||
|
} else {
|
||||||
|
hasNodes = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
dataList,
|
||||||
|
hasNodes
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_extractTree(nodes, result, parent_value) {
|
||||||
|
let list = result || []
|
||||||
|
let valueField = this.map.value
|
||||||
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
|
let node = nodes[i]
|
||||||
|
|
||||||
|
let child = {}
|
||||||
|
for (let key in node) {
|
||||||
|
if (key !== 'children') {
|
||||||
|
child[key] = node[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (parent_value !== null && parent_value !== undefined && parent_value !== '') {
|
||||||
|
child.parent_value = parent_value
|
||||||
|
}
|
||||||
|
result.push(child)
|
||||||
|
|
||||||
|
let children = node.children
|
||||||
|
if (children) {
|
||||||
|
this._extractTree(children, result, node[valueField])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_extractTreePath(nodes, result) {
|
||||||
|
let list = result || []
|
||||||
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
|
let node = nodes[i]
|
||||||
|
|
||||||
|
let child = {}
|
||||||
|
for (let key in node) {
|
||||||
|
if (key !== 'children') {
|
||||||
|
child[key] = node[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
result.push(child)
|
||||||
|
|
||||||
|
let children = node.children
|
||||||
|
if (children) {
|
||||||
|
this._extractTreePath(children, result)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_findNodePath(key, nodes, path = []) {
|
||||||
|
let textField = this.map.text
|
||||||
|
let valueField = this.map.value
|
||||||
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
|
let node = nodes[i]
|
||||||
|
let children = node.children
|
||||||
|
let text = node[textField]
|
||||||
|
let value = node[valueField]
|
||||||
|
|
||||||
|
path.push({
|
||||||
|
value,
|
||||||
|
text
|
||||||
|
})
|
||||||
|
|
||||||
|
if (value === key) {
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
|
||||||
|
if (children) {
|
||||||
|
const p = this._findNodePath(key, children, path)
|
||||||
|
if (p.length) {
|
||||||
|
return p
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
path.pop()
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
_processLocalData() {
|
||||||
|
this._treeData = []
|
||||||
|
this._extractTree(this.localdata, this._treeData)
|
||||||
|
|
||||||
|
var inputValue = this.dataValue
|
||||||
|
if (inputValue === undefined) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(inputValue)) {
|
||||||
|
inputValue = inputValue[inputValue.length - 1]
|
||||||
|
if (typeof inputValue === 'object' && inputValue[this.map.value]) {
|
||||||
|
inputValue = inputValue[this.map.value]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selected = this._findNodePath(inputValue, this.localdata)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,335 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-data-pickerview">
|
||||||
|
<scroll-view class="selected-area" scroll-x="true" scroll-y="false" :show-scrollbar="false">
|
||||||
|
<view class="selected-list">
|
||||||
|
<template v-for="(item,index) in selected">
|
||||||
|
<view class="selected-item"
|
||||||
|
:class="{'selected-item-active':index==selectedIndex, 'selected-item-text-overflow': ellipsis}"
|
||||||
|
v-if="item.text" @click="handleSelect(index)">
|
||||||
|
<text class="">{{item.text}}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="tab-c">
|
||||||
|
<template v-for="(child, i) in dataList" >
|
||||||
|
<scroll-view class="list" :key="i" v-if="i==selectedIndex" :scroll-y="true">
|
||||||
|
<view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in child" :key="j"
|
||||||
|
@click="handleNodeClick(item, i, j)">
|
||||||
|
<text class="item-text item-text-overflow">{{item[map.text]}}</text>
|
||||||
|
<view class="check" v-if="selected.length > i && item[map.value] == selected[i].value"></view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<view class="loading-cover" v-if="loading">
|
||||||
|
<uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
|
||||||
|
</view>
|
||||||
|
<view class="error-message" v-if="errorMessage">
|
||||||
|
<text class="error-text">{{errorMessage}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import dataPicker from "./uni-data-picker.js"
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DataPickerview
|
||||||
|
* @description uni-data-pickerview
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=3796
|
||||||
|
* @property {Array} localdata 本地数据，参考
|
||||||
|
* @property {Boolean} step-searh = [true|false] 是否分布查询
|
||||||
|
* @value true 启用分布查询，仅查询当前选中节点
|
||||||
|
* @value false 关闭分布查询，一次查询出所有数据
|
||||||
|
* @property {String|DBFieldString} self-field 分布查询当前字段名称
|
||||||
|
* @property {String|DBFieldString} parent-field 分布查询父字段名称
|
||||||
|
* @property {String|DBCollectionString} collection 表名
|
||||||
|
* @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
|
||||||
|
* @property {String} orderby 排序字段及正序倒叙设置
|
||||||
|
* @property {String|JQLString} where 查询条件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniDataPickerView',
|
||||||
|
emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
|
||||||
|
mixins: [dataPicker],
|
||||||
|
props: {
|
||||||
|
managedMode: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
ellipsis: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.managedMode) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.load()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onPropsChange() {
|
||||||
|
this._treeData = []
|
||||||
|
this.selectedIndex = 0
|
||||||
|
this.load()
|
||||||
|
},
|
||||||
|
load() {
|
||||||
|
if (this.isLocaldata) {
|
||||||
|
this.loadData()
|
||||||
|
} else if (this.dataValue.length) {
|
||||||
|
this.getTreePath((res) => {
|
||||||
|
this.loadData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSelect(index) {
|
||||||
|
this.selectedIndex = index
|
||||||
|
},
|
||||||
|
handleNodeClick(item, i, j) {
|
||||||
|
if (item.disable) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const node = this.dataList[i][j]
|
||||||
|
const text = node[this.map.text]
|
||||||
|
const value = node[this.map.value]
|
||||||
|
if (i < this.selected.length - 1) {
|
||||||
|
this.selected.splice(i, this.selected.length - i)
|
||||||
|
this.selected.push({
|
||||||
|
text,
|
||||||
|
value
|
||||||
|
})
|
||||||
|
} else if (i === this.selected.length - 1) {
|
||||||
|
this.selected.splice(i, 1, {
|
||||||
|
text,
|
||||||
|
value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.isleaf) {
|
||||||
|
this.onSelectedChange(node, node.isleaf)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
isleaf,
|
||||||
|
hasNodes
|
||||||
|
} = this._updateBindData()
|
||||||
|
|
||||||
|
if (!this._isTreeView() && !hasNodes) {
|
||||||
|
this.onSelectedChange(node, true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isLocaldata && (!hasNodes || isleaf)) {
|
||||||
|
this.onSelectedChange(node, true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isleaf && !hasNodes) {
|
||||||
|
this._loadNodeData((data) => {
|
||||||
|
if (!data.length) {
|
||||||
|
node.isleaf = true
|
||||||
|
} else {
|
||||||
|
this._treeData.push(...data)
|
||||||
|
this._updateBindData(node)
|
||||||
|
}
|
||||||
|
this.onSelectedChange(node, node.isleaf)
|
||||||
|
}, this._nodeWhere())
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onSelectedChange(node, false)
|
||||||
|
},
|
||||||
|
updateData(data) {
|
||||||
|
this._treeData = data.treeData
|
||||||
|
this.selected = data.selected
|
||||||
|
if (!this._treeData.length) {
|
||||||
|
this.loadData()
|
||||||
|
} else {
|
||||||
|
//this.selected = data.selected
|
||||||
|
this._updateBindData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onDataChange() {
|
||||||
|
this.$emit('datachange')
|
||||||
|
},
|
||||||
|
onSelectedChange(node, isleaf) {
|
||||||
|
if (isleaf) {
|
||||||
|
this._dispatchEvent()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node) {
|
||||||
|
this.$emit('nodeclick', node)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_dispatchEvent() {
|
||||||
|
this.$emit('change', this.selected.slice(0))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-primary: #007aff !default;
|
||||||
|
|
||||||
|
.uni-data-pickerview {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text {
|
||||||
|
color: #DD524D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-cover {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(255, 255, 255, .5);
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
margin: auto;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
background-color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 15px;
|
||||||
|
opacity: .9;
|
||||||
|
z-index: 102;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
.selected-area {
|
||||||
|
width: 750rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.selected-list {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
padding: 0 5px;
|
||||||
|
border-bottom: 1px solid #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-item {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 12px 0;
|
||||||
|
text-align: center;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
white-space: nowrap;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-item-text-overflow {
|
||||||
|
width: 168px;
|
||||||
|
/* fix nvue */
|
||||||
|
overflow: hidden;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 6em;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-o-text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-item-active {
|
||||||
|
border-bottom: 2px solid $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-item-text {
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-c {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 12px 15px;
|
||||||
|
/* border-bottom: 1px solid #f0f0f0; */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-disabled {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-text {
|
||||||
|
/* flex: 1; */
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-text-overflow {
|
||||||
|
width: 280px;
|
||||||
|
/* fix nvue */
|
||||||
|
overflow: hidden;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 20em;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-o-text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.check {
|
||||||
|
margin-right: 5px;
|
||||||
|
border: 2px solid $uni-primary;
|
||||||
|
border-left: 0;
|
||||||
|
border-top: 0;
|
||||||
|
height: 12px;
|
||||||
|
width: 6px;
|
||||||
|
transform-origin: center;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
transition: all 0.3s;
|
||||||
|
/* #endif */
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
90
uni_modules/uni-data-picker/package.json
Normal file
90
uni_modules/uni-data-picker/package.json
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-data-picker",
|
||||||
|
"displayName": "uni-data-picker 数据驱动的picker选择器",
|
||||||
|
"version": "1.0.9",
|
||||||
|
"description": "单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"picker",
|
||||||
|
"级联",
|
||||||
|
"省市区",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-load-more",
|
||||||
|
"uni-icons",
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
22
uni_modules/uni-data-picker/readme.md
Normal file
22
uni_modules/uni-data-picker/readme.md
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
## DataPicker 级联选择
|
||||||
|
> **组件名：uni-data-picker**
|
||||||
|
> 代码块： `uDataPicker`
|
||||||
|
> 关联组件：`uni-data-pickerview`、`uni-load-more`。
|
||||||
|
|
||||||
|
|
||||||
|
`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。
|
||||||
|
|
||||||
|
支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
|
||||||
|
|
||||||
|
候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。
|
||||||
|
|
||||||
|
`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
|
||||||
|
|
||||||
|
`<uni-data-picker>` 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。
|
||||||
|
|
||||||
|
`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库，配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)，可在schema2code中自动生成前端页面，还支持服务器端校验。
|
||||||
|
|
||||||
|
在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
33
uni_modules/uni-data-select/changelog.md
Normal file
33
uni_modules/uni-data-select/changelog.md
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
## 1.0.5（2023-02-03）
|
||||||
|
- 修复 禁用时会显示清空按钮
|
||||||
|
## 1.0.4（2023-02-02）
|
||||||
|
- 优化 查询条件短期内多次变更只查询最后一次变更后的结果
|
||||||
|
- 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue
|
||||||
|
## 1.0.3（2023-01-16）
|
||||||
|
- 修复 不关联服务空间报错的问题
|
||||||
|
## 1.0.2（2023-01-14）
|
||||||
|
- 新增 属性 `format` 可用于格式化显示选项内容
|
||||||
|
## 1.0.1（2022-12-06）
|
||||||
|
- 修复 当where变化时，数据不会自动更新的问题
|
||||||
|
## 0.1.9（2022-09-05）
|
||||||
|
- 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框
|
||||||
|
## 0.1.8（2022-08-29）
|
||||||
|
- 修复 点击的位置不准确
|
||||||
|
## 0.1.7（2022-08-12）
|
||||||
|
- 新增 支持 disabled 属性
|
||||||
|
## 0.1.6（2022-07-06）
|
||||||
|
- 修复 pc端宽度异常的bug
|
||||||
|
## 0.1.5
|
||||||
|
- 修复 pc端宽度异常的bug
|
||||||
|
## 0.1.4（2022-07-05）
|
||||||
|
- 优化 显示样式
|
||||||
|
## 0.1.3（2022-06-02）
|
||||||
|
- 修复 localdata 赋值不生效的 bug
|
||||||
|
- 新增 支持 uni.scss 修改颜色
|
||||||
|
- 新增 支持选项禁用（数据选项设置 disabled: true 即禁用）
|
||||||
|
## 0.1.2（2022-05-08）
|
||||||
|
- 修复 当 value 为 0 时选择不生效的 bug
|
||||||
|
## 0.1.1（2022-05-07）
|
||||||
|
- 新增 记住上次的选项（仅 collection 存在时有效）
|
||||||
|
## 0.1.0（2022-04-22）
|
||||||
|
- 初始化
|
||||||
@@ -0,0 +1,502 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-stat__select">
|
||||||
|
<span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span>
|
||||||
|
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
||||||
|
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
||||||
|
<view class="uni-select__input-box" @click="toggleSelector">
|
||||||
|
<view v-if="current" class="uni-select__input-text">{{current}}</view>
|
||||||
|
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
||||||
|
<uni-icons v-if="current && clear && !disabled" type="clear" color="#c0c4cc" size="24" @click="clearVal" />
|
||||||
|
<uni-icons v-else :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
||||||
|
<view class="uni-select__selector" v-if="showSelector">
|
||||||
|
<view class="uni-popper__arrow"></view>
|
||||||
|
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
||||||
|
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
||||||
|
<text>{{emptyTips}}</text>
|
||||||
|
</view>
|
||||||
|
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
||||||
|
@click="change(item)">
|
||||||
|
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* DataChecklist 数据选择器
|
||||||
|
* @description 通过数据渲染的下拉框组件
|
||||||
|
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
||||||
|
* @property {String} value 默认值
|
||||||
|
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||||
|
* @property {Boolean} clear 是否可以清空已选项
|
||||||
|
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
||||||
|
* @property {String} label 左侧标题
|
||||||
|
* @property {String} placeholder 输入框的提示文字
|
||||||
|
* @property {Boolean} disabled 是否禁用
|
||||||
|
* @event {Function} change 选中发生变化触发
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "uni-stat-select",
|
||||||
|
mixins: [uniCloud.mixinDatacom || {}],
|
||||||
|
props: {
|
||||||
|
localdata: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '请选择'
|
||||||
|
},
|
||||||
|
emptyTips: {
|
||||||
|
type: String,
|
||||||
|
default: '无选项'
|
||||||
|
},
|
||||||
|
clear: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
defItem: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
|
||||||
|
format: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showSelector: false,
|
||||||
|
current: '',
|
||||||
|
mixinDatacomResData: [],
|
||||||
|
apps: [],
|
||||||
|
channels: [],
|
||||||
|
cacheKey: "uni-data-select-lastSelectedValue",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.debounceGet = this.debounce(() => {
|
||||||
|
this.query();
|
||||||
|
}, 300);
|
||||||
|
if (this.collection && !this.localdata.length) {
|
||||||
|
this.debounceGet();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
typePlaceholder() {
|
||||||
|
const text = {
|
||||||
|
'opendb-stat-app-versions': '版本',
|
||||||
|
'opendb-app-channels': '渠道',
|
||||||
|
'opendb-app-list': '应用'
|
||||||
|
}
|
||||||
|
const common = this.placeholder
|
||||||
|
const placeholder = text[this.collection]
|
||||||
|
return placeholder ?
|
||||||
|
common + placeholder :
|
||||||
|
common
|
||||||
|
},
|
||||||
|
valueCom(){
|
||||||
|
// #ifdef VUE3
|
||||||
|
return this.modelValue;
|
||||||
|
// #endif
|
||||||
|
// #ifndef VUE3
|
||||||
|
return this.value;
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
localdata: {
|
||||||
|
immediate: true,
|
||||||
|
handler(val, old) {
|
||||||
|
if (Array.isArray(val) && old !== val) {
|
||||||
|
this.mixinDatacomResData = val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
valueCom(val, old) {
|
||||||
|
this.initDefVal()
|
||||||
|
},
|
||||||
|
mixinDatacomResData: {
|
||||||
|
immediate: true,
|
||||||
|
handler(val) {
|
||||||
|
if (val.length) {
|
||||||
|
this.initDefVal()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
debounce(fn, time = 100){
|
||||||
|
let timer = null
|
||||||
|
return function(...args) {
|
||||||
|
if (timer) clearTimeout(timer)
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
fn.apply(this, args)
|
||||||
|
}, time)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 执行数据库查询
|
||||||
|
query(){
|
||||||
|
this.mixinDatacomEasyGet();
|
||||||
|
},
|
||||||
|
// 监听查询条件变更事件
|
||||||
|
onMixinDatacomPropsChange(){
|
||||||
|
if (this.collection) {
|
||||||
|
this.debounceGet();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initDefVal() {
|
||||||
|
let defValue = ''
|
||||||
|
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
||||||
|
defValue = this.valueCom
|
||||||
|
} else {
|
||||||
|
let strogeValue
|
||||||
|
if (this.collection) {
|
||||||
|
strogeValue = this.getCache()
|
||||||
|
}
|
||||||
|
if (strogeValue || strogeValue === 0) {
|
||||||
|
defValue = strogeValue
|
||||||
|
} else {
|
||||||
|
let defItem = ''
|
||||||
|
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
||||||
|
defItem = this.mixinDatacomResData[this.defItem - 1].value
|
||||||
|
}
|
||||||
|
defValue = defItem
|
||||||
|
}
|
||||||
|
if (defValue || defValue === 0) {
|
||||||
|
this.emit(defValue)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||||
|
this.current = def ? this.formatItemName(def) : ''
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {[String, Number]} value
|
||||||
|
* 判断用户给的 value 是否同时为禁用状态
|
||||||
|
*/
|
||||||
|
isDisabled(value) {
|
||||||
|
let isDisabled = false;
|
||||||
|
|
||||||
|
this.mixinDatacomResData.forEach(item => {
|
||||||
|
if (item.value === value) {
|
||||||
|
isDisabled = item.disable
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return isDisabled;
|
||||||
|
},
|
||||||
|
|
||||||
|
clearVal() {
|
||||||
|
this.emit('')
|
||||||
|
if (this.collection) {
|
||||||
|
this.removeCache()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
change(item) {
|
||||||
|
if (!item.disable) {
|
||||||
|
this.showSelector = false
|
||||||
|
this.current = this.formatItemName(item)
|
||||||
|
this.emit(item.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emit(val) {
|
||||||
|
this.$emit('change', val)
|
||||||
|
this.$emit('input', val)
|
||||||
|
this.$emit('update:modelValue', val)
|
||||||
|
if (this.collection) {
|
||||||
|
this.setCache(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggleSelector() {
|
||||||
|
if (this.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showSelector = !this.showSelector
|
||||||
|
},
|
||||||
|
formatItemName(item) {
|
||||||
|
let {
|
||||||
|
text,
|
||||||
|
value,
|
||||||
|
channel_code
|
||||||
|
} = item
|
||||||
|
channel_code = channel_code ? `(${channel_code})` : ''
|
||||||
|
|
||||||
|
if (this.format) {
|
||||||
|
// 格式化输出
|
||||||
|
let str = "";
|
||||||
|
str = this.format;
|
||||||
|
for (let key in item) {
|
||||||
|
str = str.replace(new RegExp(`{${key}}`,"g"),item[key]);
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
} else {
|
||||||
|
return this.collection.indexOf('app-list') > 0 ?
|
||||||
|
`${text}(${value})` :
|
||||||
|
(
|
||||||
|
text ?
|
||||||
|
text :
|
||||||
|
`未命名${channel_code}`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取当前加载的数据
|
||||||
|
getLoadData(){
|
||||||
|
return this.mixinDatacomResData;
|
||||||
|
},
|
||||||
|
// 获取当前缓存key
|
||||||
|
getCurrentCacheKey(){
|
||||||
|
return this.collection;
|
||||||
|
},
|
||||||
|
// 获取缓存
|
||||||
|
getCache(name=this.getCurrentCacheKey()){
|
||||||
|
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||||
|
return cacheData[name];
|
||||||
|
},
|
||||||
|
// 设置缓存
|
||||||
|
setCache(value, name=this.getCurrentCacheKey()){
|
||||||
|
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||||
|
cacheData[name] = value;
|
||||||
|
uni.setStorageSync(this.cacheKey, cacheData);
|
||||||
|
},
|
||||||
|
// 删除缓存
|
||||||
|
removeCache(name=this.getCurrentCacheKey()){
|
||||||
|
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||||
|
delete cacheData[name];
|
||||||
|
uni.setStorageSync(this.cacheKey, cacheData);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-base-color: #6a6a6a !default;
|
||||||
|
$uni-main-color: #333 !default;
|
||||||
|
$uni-secondary-color: #909399 !default;
|
||||||
|
$uni-border-3: #e5e5e5;
|
||||||
|
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.hide-on-phone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
.uni-stat__select {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// padding: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-stat-box {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-stat__actived {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
// outline: 1px solid #2979ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-label-text {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $uni-base-color;
|
||||||
|
margin: auto 0;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select {
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px solid $uni-border-3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0 5px;
|
||||||
|
padding-left: 10px;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
user-select: none;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: solid 1px $uni-border-3;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
height: 35px;
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__label {
|
||||||
|
font-size: 16px;
|
||||||
|
// line-height: 22px;
|
||||||
|
height: 35px;
|
||||||
|
padding-right: 10px;
|
||||||
|
color: $uni-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input-box {
|
||||||
|
height: 35px;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input-plac {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $uni-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 12px);
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 1px solid #EBEEF5;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 3;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector-scroll {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
max-height: 200px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector-empty,
|
||||||
|
.uni-select__selector-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
/* border-bottom: solid 1px $uni-border-3; */
|
||||||
|
padding: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector-item:hover {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector-empty:last-child,
|
||||||
|
.uni-select__selector-item:last-child {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
border-bottom: none;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__selector__disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* picker 弹出层通用的指示小三角 */
|
||||||
|
.uni-popper__arrow,
|
||||||
|
.uni-popper__arrow::after {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popper__arrow {
|
||||||
|
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||||
|
top: -6px;
|
||||||
|
left: 10%;
|
||||||
|
margin-right: 3px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #EBEEF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popper__arrow::after {
|
||||||
|
content: " ";
|
||||||
|
top: 1px;
|
||||||
|
margin-left: -6px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input-text {
|
||||||
|
// width: 280px;
|
||||||
|
width: 100%;
|
||||||
|
color: $uni-main-color;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-o-text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select__input-placeholder {
|
||||||
|
color: $uni-base-color;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-select--mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
85
uni_modules/uni-data-select/package.json
Normal file
85
uni_modules/uni-data-select/package.json
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-data-select",
|
||||||
|
"displayName": "uni-data-select 下拉框选择器",
|
||||||
|
"version": "1.0.5",
|
||||||
|
"description": "通过数据驱动的下拉框选择器",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"select",
|
||||||
|
"uni-data-select",
|
||||||
|
"下拉框",
|
||||||
|
"下拉选"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.1"
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-load-more"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "u",
|
||||||
|
"app-nvue": "n"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "u",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
8
uni_modules/uni-data-select/readme.md
Normal file
8
uni_modules/uni-data-select/readme.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
## DataSelect 下拉框选择器
|
||||||
|
> **组件名：uni-data-select**
|
||||||
|
> 代码块： `uDataSelect`
|
||||||
|
|
||||||
|
当选项过多时，使用下拉菜单展示并选择内容
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
123
uni_modules/uni-datetime-picker/changelog.md
Normal file
123
uni_modules/uni-datetime-picker/changelog.md
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
## 2.2.19（2023-02-09）
|
||||||
|
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
|
||||||
|
## 2.2.18（2023-02-08）
|
||||||
|
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
|
||||||
|
- 优化 PC端输入日期格式错误时返回当前日期时间
|
||||||
|
- 优化 PC端输入日期时间超出 start、end 限制的Bug
|
||||||
|
- 优化 移动端日期时间范围用法时间展示不完整问题
|
||||||
|
## 2.2.17（2023-02-04）
|
||||||
|
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
|
||||||
|
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
|
||||||
|
## 2.2.16（2023-02-02）
|
||||||
|
- 修复 字节小程序报错的Bug
|
||||||
|
## 2.2.15（2023-02-02）
|
||||||
|
- 修复 某些情况切换月份错误的Bug
|
||||||
|
## 2.2.14（2023-01-30）
|
||||||
|
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
|
||||||
|
## 2.2.13（2023-01-10）
|
||||||
|
- 修复 多次加载组件造成内存占用的Bug
|
||||||
|
## 2.2.12（2022-12-01）
|
||||||
|
- 修复 vue3 下 i18n 国际化初始值不正确的Bug
|
||||||
|
## 2.2.11（2022-09-19）
|
||||||
|
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
|
||||||
|
## 2.2.10（2022-09-19）
|
||||||
|
- 修复 反向选择日期范围，日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
|
||||||
|
## 2.2.9（2022-09-16）
|
||||||
|
- 可以使用 uni-scss 控制主题色
|
||||||
|
## 2.2.8（2022-09-08）
|
||||||
|
- 修复 close事件无效的Bug
|
||||||
|
## 2.2.7（2022-09-05）
|
||||||
|
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
|
||||||
|
## 2.2.6（2022-06-30）
|
||||||
|
- 优化 组件样式，调整了组件图标大小、高度、颜色等，与uni-ui风格保持一致
|
||||||
|
## 2.2.5（2022-06-24）
|
||||||
|
- 修复 日历顶部年月及底部确认未国际化的Bug
|
||||||
|
## 2.2.4（2022-03-31）
|
||||||
|
- 修复 Vue3 下动态赋值,单选类型未响应的Bug
|
||||||
|
## 2.2.3（2022-03-28）
|
||||||
|
- 修复 Vue3 下动态赋值未响应的Bug
|
||||||
|
## 2.2.2（2021-12-10）
|
||||||
|
- 修复 clear-icon 属性在小程序平台不生效的Bug
|
||||||
|
## 2.2.1（2021-12-10）
|
||||||
|
- 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的Bug
|
||||||
|
## 2.2.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
||||||
|
## 2.1.5（2021-11-09）
|
||||||
|
- 新增 提供组件设计资源，组件样式调整
|
||||||
|
## 2.1.4（2021-09-10）
|
||||||
|
- 修复 hide-second 在移动端的Bug
|
||||||
|
- 修复 单选赋默认值时，赋值日期未高亮的Bug
|
||||||
|
- 修复 赋默认值时，移动端未正确显示时间的Bug
|
||||||
|
## 2.1.3（2021-09-09）
|
||||||
|
- 新增 hide-second 属性，支持只使用时分，隐藏秒
|
||||||
|
## 2.1.2（2021-09-03）
|
||||||
|
- 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
|
||||||
|
- 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
|
||||||
|
- 优化 调整字号大小，美化日历界面
|
||||||
|
- 修复 因国际化导致的 placeholder 失效的Bug
|
||||||
|
## 2.1.1（2021-08-24）
|
||||||
|
- 新增 支持国际化
|
||||||
|
- 优化 范围选择器在 pc 端过宽的问题
|
||||||
|
## 2.1.0（2021-08-09）
|
||||||
|
- 新增 适配 vue3
|
||||||
|
## 2.0.19（2021-08-09）
|
||||||
|
- 新增 支持作为 uni-forms 子组件相关功能
|
||||||
|
- 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的Bug
|
||||||
|
## 2.0.18（2021-08-05）
|
||||||
|
- 修复 type 属性动态赋值无效的Bug
|
||||||
|
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
|
||||||
|
- 修复 组件未赋值时范围选左、右日历相同的Bug
|
||||||
|
## 2.0.17（2021-08-04）
|
||||||
|
- 修复 范围选未正确显示当前值的Bug
|
||||||
|
- 修复 h5 平台（移动端）报错 'cale' of undefined 的Bug
|
||||||
|
## 2.0.16（2021-07-21）
|
||||||
|
- 新增 return-type 属性支持返回 date 日期对象
|
||||||
|
## 2.0.15（2021-07-14）
|
||||||
|
- 修复 单选日期类型，初始赋值后不在当前日历的Bug
|
||||||
|
- 新增 clearIcon 属性，显示框的清空按钮可配置显示隐藏（仅 pc 有效）
|
||||||
|
- 优化 移动端移除显示框的清空按钮，无实际用途
|
||||||
|
## 2.0.14（2021-07-14）
|
||||||
|
- 修复 组件赋值为空，界面未更新的Bug
|
||||||
|
- 修复 start 和 end 不能动态赋值的Bug
|
||||||
|
- 修复 范围选类型，用户选择后再次选择右侧日历（结束日期）显示不正确的Bug
|
||||||
|
## 2.0.13（2021-07-08）
|
||||||
|
- 修复 范围选择不能动态赋值的Bug
|
||||||
|
## 2.0.12（2021-07-08）
|
||||||
|
- 修复 范围选择的初始时间在一个月内时，造成无法选择的bug
|
||||||
|
## 2.0.11（2021-07-08）
|
||||||
|
- 优化 弹出层在超出视窗边缘定位不准确的问题
|
||||||
|
## 2.0.10（2021-07-08）
|
||||||
|
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的Bug
|
||||||
|
- 优化 弹出层在超出视窗边缘被遮盖的问题
|
||||||
|
## 2.0.9（2021-07-07）
|
||||||
|
- 新增 maskClick 事件
|
||||||
|
- 修复 特殊情况日历 rpx 布局错误的Bug，rpx -> px
|
||||||
|
- 修复 范围选择时清空返回值不合理的bug，['', ''] -> []
|
||||||
|
## 2.0.8（2021-07-07）
|
||||||
|
- 新增 日期时间显示框支持插槽
|
||||||
|
## 2.0.7（2021-07-01）
|
||||||
|
- 优化 添加 uni-icons 依赖
|
||||||
|
## 2.0.6（2021-05-22）
|
||||||
|
- 修复 图标在小程序上不显示的Bug
|
||||||
|
- 优化 重命名引用组件，避免潜在组件命名冲突
|
||||||
|
## 2.0.5（2021-05-20）
|
||||||
|
- 优化 代码目录扁平化
|
||||||
|
## 2.0.4（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 2.0.3（2021-05-10）
|
||||||
|
- 修复 ios 下不识别 '-' 日期格式的Bug
|
||||||
|
- 优化 pc 下弹出层添加边框和阴影
|
||||||
|
## 2.0.2（2021-05-08）
|
||||||
|
- 修复 在 admin 中获取弹出层定位错误的bug
|
||||||
|
## 2.0.1（2021-05-08）
|
||||||
|
- 修复 type 属性向下兼容，默认值从 date 变更为 datetime
|
||||||
|
## 2.0.0（2021-04-30）
|
||||||
|
- 支持日历形式的日期+时间的范围选择
|
||||||
|
> 注意：此版本不向后兼容，不再支持单独时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）
|
||||||
|
## 1.0.6（2021-03-18）
|
||||||
|
- 新增 hide-second 属性，时间支持仅选择时、分
|
||||||
|
- 修复 选择跟显示的日期不一样的Bug
|
||||||
|
- 修复 chang事件触发2次的Bug
|
||||||
|
- 修复 分、秒 end 范围错误的Bug
|
||||||
|
- 优化 更好的 nvue 适配
|
||||||
@@ -0,0 +1,186 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-calendar-item__weeks-box" :class="{
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
|
||||||
|
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
|
||||||
|
<view class="uni-calendar-item__weeks-box-item" :class="{
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
|
||||||
|
'uni-calendar-item--checked-range-text': checkHover,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
}">
|
||||||
|
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||||
|
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
|
||||||
|
</view>
|
||||||
|
<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
weeks: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calendar: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lunar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
checkHover: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
choiceDate(weeks) {
|
||||||
|
this.$emit('change', weeks)
|
||||||
|
},
|
||||||
|
handleMousemove(weeks) {
|
||||||
|
this.$emit('handleMouse', weeks)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
$uni-primary: #007aff !default;
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 1px 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-text {
|
||||||
|
font-size: 14px;
|
||||||
|
// font-family: Lato-Bold, Lato;
|
||||||
|
font-weight: bold;
|
||||||
|
color: darken($color: $uni-primary, $amount: 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-lunar-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-item {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-circle {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #dd524d;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
|
||||||
|
color: #D1D1D1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--isDay {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 17%;
|
||||||
|
background-color: #dd524d;
|
||||||
|
width:6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--extra {
|
||||||
|
color: #dd524d;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 3px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--checked .uni-calendar-item--checked-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--multiple {
|
||||||
|
background-color: #F6F7FC;
|
||||||
|
// color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
|
||||||
|
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 3px solid #F6F7FC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
|
||||||
|
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--before-checked-x {
|
||||||
|
border-top-left-radius: 50px;
|
||||||
|
border-bottom-left-radius: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #F6F7FC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--after-checked-x {
|
||||||
|
border-top-right-radius: 50px;
|
||||||
|
border-bottom-right-radius: 50px;
|
||||||
|
background-color: #F6F7FC;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,925 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-calendar" @mouseleave="leaveCale">
|
||||||
|
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
|
||||||
|
@click="clean();maskClick()"></view>
|
||||||
|
<view v-if="insert || show" class="uni-calendar__content"
|
||||||
|
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
|
||||||
|
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
|
||||||
|
<view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre">
|
||||||
|
<view class="uni-calendar__header-btn uni-calendar--left"></view>
|
||||||
|
</view>
|
||||||
|
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
||||||
|
<text
|
||||||
|
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
|
||||||
|
</picker>
|
||||||
|
<view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next">
|
||||||
|
<view class="uni-calendar__header-btn uni-calendar--right"></view>
|
||||||
|
</view>
|
||||||
|
<view v-if="!insert" class="dialog-close" @click="clean">
|
||||||
|
<view class="dialog-close-plus" data-id="close"></view>
|
||||||
|
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__box">
|
||||||
|
<view v-if="showMonth" class="uni-calendar__box-bg">
|
||||||
|
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{MONText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks-day">
|
||||||
|
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||||
|
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||||
|
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
|
||||||
|
:selected="selected" :lunar="lunar" :checkHover="range" @change="choiceDate"
|
||||||
|
@handleMouse="handleMouse">
|
||||||
|
</calendar-item>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="!insert && !range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top"
|
||||||
|
style="padding: 0 80px;">
|
||||||
|
<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
|
||||||
|
<time-picker type="time" :start="reactStartTime" :end="reactEndTime" v-model="time"
|
||||||
|
:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
|
||||||
|
</time-picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="!insert && range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top">
|
||||||
|
<view class="uni-date-changed--time-start">
|
||||||
|
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
|
||||||
|
</view>
|
||||||
|
<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false"
|
||||||
|
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
|
||||||
|
</time-picker>
|
||||||
|
</view>
|
||||||
|
<view style="line-height: 50px;">
|
||||||
|
<uni-icons type="arrowthinright" color="#999"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="uni-date-changed--time-end">
|
||||||
|
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
|
||||||
|
<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false"
|
||||||
|
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
|
||||||
|
</time-picker>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
|
||||||
|
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Calendar from './util.js';
|
||||||
|
import calendarItem from './calendar-item.vue'
|
||||||
|
import timePicker from './time-picker.vue'
|
||||||
|
|
||||||
|
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||||
|
import i18nMessages from './i18n/index.js'
|
||||||
|
const { t } = initVueI18n(i18nMessages)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calendar 日历
|
||||||
|
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
|
||||||
|
* @property {String} date 自定义当前时间，默认为今天
|
||||||
|
* @property {Boolean} lunar 显示农历
|
||||||
|
* @property {String} startDate 日期选择范围-开始日期
|
||||||
|
* @property {String} endDate 日期选择范围-结束日期
|
||||||
|
* @property {Boolean} range 范围选择
|
||||||
|
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
||||||
|
* @value true 弹窗模式
|
||||||
|
* @value false 插入模式
|
||||||
|
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||||
|
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||||
|
* @property {Boolean} showMonth 是否选择月份为背景
|
||||||
|
* @event {Function} change 日期改变，`insert :ture` 时生效
|
||||||
|
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||||
|
* @event {Function} monthSwitch 切换月份时触发
|
||||||
|
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
calendarItem,
|
||||||
|
timePicker
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
date: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
defTime: {
|
||||||
|
type: [String, Object],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
selectableTimes: {
|
||||||
|
type: [Object],
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lunar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
startDate: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
endDate: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
startPlaceholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
endPlaceholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
range: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
typeHasTime: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
insert: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showMonth: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
clearDate: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
left: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
checkHover: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
hideSecond: {
|
||||||
|
type: [Boolean],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
pleStatus: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
before: '',
|
||||||
|
after: '',
|
||||||
|
data: [],
|
||||||
|
fulldate: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
weeks: [],
|
||||||
|
calendar: {},
|
||||||
|
nowDate: '',
|
||||||
|
aniMaskShow: false,
|
||||||
|
firstEnter: true,
|
||||||
|
time: '',
|
||||||
|
timeRange: {
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
},
|
||||||
|
tempSingleDate: '',
|
||||||
|
tempRange: {
|
||||||
|
before: '',
|
||||||
|
after: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
date: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal) {
|
||||||
|
if (!this.range) {
|
||||||
|
this.tempSingleDate = newVal
|
||||||
|
setTimeout(() => {
|
||||||
|
this.init(newVal)
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defTime: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal) {
|
||||||
|
if (!this.range) {
|
||||||
|
this.time = newVal
|
||||||
|
} else {
|
||||||
|
this.timeRange.startTime = newVal.start
|
||||||
|
this.timeRange.endTime = newVal.end
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
startDate(val) {
|
||||||
|
// 字节小程序 watch 早于 created
|
||||||
|
if(!this.cale){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.cale.resetSatrtDate(val)
|
||||||
|
this.cale.setDate(this.nowDate.fullDate)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
},
|
||||||
|
endDate(val) {
|
||||||
|
// 字节小程序 watch 早于 created
|
||||||
|
if(!this.cale){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.cale.resetEndDate(val)
|
||||||
|
this.cale.setDate(this.nowDate.fullDate)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
},
|
||||||
|
selected(newVal) {
|
||||||
|
// 字节小程序 watch 早于 created
|
||||||
|
if(!this.cale){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
},
|
||||||
|
pleStatus: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal) {
|
||||||
|
const {
|
||||||
|
before,
|
||||||
|
after,
|
||||||
|
fulldate,
|
||||||
|
which
|
||||||
|
} = newVal
|
||||||
|
this.tempRange.before = before
|
||||||
|
this.tempRange.after = after
|
||||||
|
setTimeout(() => {
|
||||||
|
if (fulldate) {
|
||||||
|
this.cale.setHoverMultiple(fulldate)
|
||||||
|
if (before && after) {
|
||||||
|
this.cale.lastHover = true
|
||||||
|
if (this.rangeWithinMonth(after, before)) return
|
||||||
|
this.setDate(before)
|
||||||
|
} else {
|
||||||
|
this.cale.setMultiple(fulldate)
|
||||||
|
this.setDate(this.nowDate.fullDate)
|
||||||
|
this.calendar.fullDate = ''
|
||||||
|
this.cale.lastHover = false
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 字节小程序 watch 早于 created
|
||||||
|
if(!this.cale){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.cale.setDefaultMultiple(before, after)
|
||||||
|
if (which === 'left') {
|
||||||
|
this.setDate(before)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
} else {
|
||||||
|
this.setDate(after)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
}
|
||||||
|
this.cale.lastHover = true
|
||||||
|
}
|
||||||
|
}, 16)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
reactStartTime() {
|
||||||
|
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
|
||||||
|
const res = activeDate === this.startDate ? this.selectableTimes.start : ''
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
reactEndTime() {
|
||||||
|
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
|
||||||
|
const res = activeDate === this.endDate ? this.selectableTimes.end : ''
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* for i18n
|
||||||
|
*/
|
||||||
|
selectDateText() {
|
||||||
|
return t("uni-datetime-picker.selectDate")
|
||||||
|
},
|
||||||
|
startDateText() {
|
||||||
|
return this.startPlaceholder || t("uni-datetime-picker.startDate")
|
||||||
|
},
|
||||||
|
endDateText() {
|
||||||
|
return this.endPlaceholder || t("uni-datetime-picker.endDate")
|
||||||
|
},
|
||||||
|
okText() {
|
||||||
|
return t("uni-datetime-picker.ok")
|
||||||
|
},
|
||||||
|
yearText() {
|
||||||
|
return t("uni-datetime-picker.year")
|
||||||
|
},
|
||||||
|
monthText() {
|
||||||
|
return t("uni-datetime-picker.month")
|
||||||
|
},
|
||||||
|
MONText() {
|
||||||
|
return t("uni-calender.MON")
|
||||||
|
},
|
||||||
|
TUEText() {
|
||||||
|
return t("uni-calender.TUE")
|
||||||
|
},
|
||||||
|
WEDText() {
|
||||||
|
return t("uni-calender.WED")
|
||||||
|
},
|
||||||
|
THUText() {
|
||||||
|
return t("uni-calender.THU")
|
||||||
|
},
|
||||||
|
FRIText() {
|
||||||
|
return t("uni-calender.FRI")
|
||||||
|
},
|
||||||
|
SATText() {
|
||||||
|
return t("uni-calender.SAT")
|
||||||
|
},
|
||||||
|
SUNText() {
|
||||||
|
return t("uni-calender.SUN")
|
||||||
|
},
|
||||||
|
confirmText() {
|
||||||
|
return t("uni-calender.confirm")
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 获取日历方法实例
|
||||||
|
this.cale = new Calendar({
|
||||||
|
selected: this.selected,
|
||||||
|
startDate: this.startDate,
|
||||||
|
endDate: this.endDate,
|
||||||
|
range: this.range,
|
||||||
|
})
|
||||||
|
// 选中某一天
|
||||||
|
this.init(this.date)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
leaveCale() {
|
||||||
|
this.firstEnter = true
|
||||||
|
},
|
||||||
|
handleMouse(weeks) {
|
||||||
|
if (weeks.disable) return
|
||||||
|
if (this.cale.lastHover) return
|
||||||
|
let {
|
||||||
|
before,
|
||||||
|
after
|
||||||
|
} = this.cale.multipleStatus
|
||||||
|
if (!before) return
|
||||||
|
this.calendar = weeks
|
||||||
|
// 设置范围选
|
||||||
|
this.cale.setHoverMultiple(this.calendar.fullDate)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
// hover时，进入一个日历，更新另一个
|
||||||
|
if (this.firstEnter) {
|
||||||
|
this.$emit('firstEnterCale', this.cale.multipleStatus)
|
||||||
|
this.firstEnter = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rangeWithinMonth(A, B) {
|
||||||
|
const [yearA, monthA] = A.split('-')
|
||||||
|
const [yearB, monthB] = B.split('-')
|
||||||
|
return yearA === yearB && monthA === monthB
|
||||||
|
},
|
||||||
|
|
||||||
|
// 取消穿透
|
||||||
|
clean() {
|
||||||
|
this.close()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 蒙版点击事件
|
||||||
|
maskClick() {
|
||||||
|
this.$emit('maskClose')
|
||||||
|
},
|
||||||
|
|
||||||
|
clearCalender() {
|
||||||
|
if (this.range) {
|
||||||
|
this.timeRange.startTime = ''
|
||||||
|
this.timeRange.endTime = ''
|
||||||
|
this.tempRange.before = ''
|
||||||
|
this.tempRange.after = ''
|
||||||
|
this.cale.multipleStatus.before = ''
|
||||||
|
this.cale.multipleStatus.after = ''
|
||||||
|
this.cale.multipleStatus.data = []
|
||||||
|
this.cale.lastHover = false
|
||||||
|
} else {
|
||||||
|
this.time = ''
|
||||||
|
this.tempSingleDate = ''
|
||||||
|
}
|
||||||
|
this.calendar.fullDate = ''
|
||||||
|
this.setDate()
|
||||||
|
},
|
||||||
|
|
||||||
|
bindDateChange(e) {
|
||||||
|
const value = e.detail.value + '-1'
|
||||||
|
this.init(value)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 初始化日期显示
|
||||||
|
* @param {Object} date
|
||||||
|
*/
|
||||||
|
init(date) {
|
||||||
|
this.cale.setDate(date)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
this.nowDate = this.calendar = this.cale.getInfo(date)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 打开日历弹窗
|
||||||
|
*/
|
||||||
|
open() {
|
||||||
|
// 弹窗模式并且清理数据
|
||||||
|
if (this.clearDate && !this.insert) {
|
||||||
|
this.cale.cleanMultipleStatus()
|
||||||
|
// this.cale.setDate(this.date)
|
||||||
|
this.init(this.date)
|
||||||
|
}
|
||||||
|
this.show = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.aniMaskShow = true
|
||||||
|
}, 50)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 关闭日历弹窗
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
this.aniMaskShow = false
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.show = false
|
||||||
|
this.$emit('close')
|
||||||
|
}, 300)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 确认按钮
|
||||||
|
*/
|
||||||
|
confirm() {
|
||||||
|
this.setEmit('confirm')
|
||||||
|
this.close()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 变化触发
|
||||||
|
*/
|
||||||
|
change() {
|
||||||
|
if (!this.insert) return
|
||||||
|
this.setEmit('change')
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 选择月份触发
|
||||||
|
*/
|
||||||
|
monthSwitch() {
|
||||||
|
let {
|
||||||
|
year,
|
||||||
|
month
|
||||||
|
} = this.nowDate
|
||||||
|
this.$emit('monthSwitch', {
|
||||||
|
year,
|
||||||
|
month: Number(month)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 派发事件
|
||||||
|
* @param {Object} name
|
||||||
|
*/
|
||||||
|
setEmit(name) {
|
||||||
|
let {
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
date,
|
||||||
|
fullDate,
|
||||||
|
lunar,
|
||||||
|
extraInfo
|
||||||
|
} = this.calendar
|
||||||
|
this.$emit(name, {
|
||||||
|
range: this.cale.multipleStatus,
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
date,
|
||||||
|
time: this.time,
|
||||||
|
timeRange: this.timeRange,
|
||||||
|
fulldate: fullDate,
|
||||||
|
lunar,
|
||||||
|
extraInfo: extraInfo || {}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 选择天触发
|
||||||
|
* @param {Object} weeks
|
||||||
|
*/
|
||||||
|
choiceDate(weeks) {
|
||||||
|
if (weeks.disable) return
|
||||||
|
this.calendar = weeks
|
||||||
|
this.calendar.userChecked = true
|
||||||
|
// 设置多选
|
||||||
|
this.cale.setMultiple(this.calendar.fullDate, true)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
this.tempSingleDate = this.calendar.fullDate
|
||||||
|
const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
|
||||||
|
const afterDate = new Date(this.cale.multipleStatus.after).getTime()
|
||||||
|
if (beforeDate > afterDate && afterDate) {
|
||||||
|
this.tempRange.before = this.cale.multipleStatus.after
|
||||||
|
this.tempRange.after = this.cale.multipleStatus.before
|
||||||
|
} else {
|
||||||
|
this.tempRange.before = this.cale.multipleStatus.before
|
||||||
|
this.tempRange.after = this.cale.multipleStatus.after
|
||||||
|
}
|
||||||
|
this.change()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 回到今天
|
||||||
|
*/
|
||||||
|
backtoday() {
|
||||||
|
let date = this.cale.getDate(new Date()).fullDate
|
||||||
|
// this.cale.setDate(date)
|
||||||
|
this.init(date)
|
||||||
|
this.change()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 比较时间大小
|
||||||
|
*/
|
||||||
|
dateCompare(startDate, endDate) {
|
||||||
|
// 计算截止时间
|
||||||
|
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
||||||
|
// 计算详细项的截止时间
|
||||||
|
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
||||||
|
if (startDate <= endDate) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 上个月
|
||||||
|
*/
|
||||||
|
pre() {
|
||||||
|
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
|
||||||
|
this.setDate(preDate)
|
||||||
|
this.monthSwitch()
|
||||||
|
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 下个月
|
||||||
|
*/
|
||||||
|
next() {
|
||||||
|
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
|
||||||
|
this.setDate(nextDate)
|
||||||
|
this.monthSwitch()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 设置日期
|
||||||
|
* @param {Object} date
|
||||||
|
*/
|
||||||
|
setDate(date) {
|
||||||
|
this.cale.setDate(date)
|
||||||
|
this.weeks = this.cale.weeks
|
||||||
|
this.nowDate = this.cale.getInfo(date)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
$uni-primary: #007aff !default;
|
||||||
|
|
||||||
|
.uni-calendar {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__mask {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
opacity: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--mask-show {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--fixed {
|
||||||
|
position: fixed;
|
||||||
|
bottom: calc(var(--window-bottom));
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transform: translateY(460px);
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--ani-show {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__content {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__content-mobile {
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__header {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__header-mobile {
|
||||||
|
padding: 10px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--fixed-top {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.4);
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--fixed-width {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__backtoday {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 25rpx;
|
||||||
|
padding: 0 5px;
|
||||||
|
padding-left: 10px;
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-top-left-radius: 25px;
|
||||||
|
border-bottom-left-radius: 25px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__header-text {
|
||||||
|
text-align: center;
|
||||||
|
width: 100px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__button-text {
|
||||||
|
text-align: center;
|
||||||
|
width: 100px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $uni-primary;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
letter-spacing: 3px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__header-btn-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__header-btn {
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-left-color: #808080;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-top-color: #555555;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--left {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar--right {
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-calendar__weeks {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__weeks-item {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__weeks-day {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
border-bottom-color: #F5F5F5;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__weeks-day-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #B2B2B2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__box {
|
||||||
|
position: relative;
|
||||||
|
// padding: 0 10px;
|
||||||
|
padding-bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__box-bg {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar__box-bg-text {
|
||||||
|
font-size: 200px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #999;
|
||||||
|
opacity: 0.1;
|
||||||
|
text-align: center;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
line-height: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-changed {
|
||||||
|
padding: 0 10px;
|
||||||
|
// line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
border-top-color: #DCDCDC;
|
||||||
|
;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-btn--ok {
|
||||||
|
padding: 20px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-changed--time-start {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-changed--time-end {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-changed--time-date {
|
||||||
|
color: #999;
|
||||||
|
line-height: 50px;
|
||||||
|
margin-right: 5px;
|
||||||
|
// opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-picker-style {
|
||||||
|
// width: 62px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 25px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-close-plus {
|
||||||
|
width: 16px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #737987;
|
||||||
|
border-radius: 2px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-close-rotate {
|
||||||
|
position: absolute;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker--btn {
|
||||||
|
border-radius: 100px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-datetime-picker--btn:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"uni-datetime-picker.selectDate": "select date",
|
||||||
|
"uni-datetime-picker.selectTime": "select time",
|
||||||
|
"uni-datetime-picker.selectDateTime": "select datetime",
|
||||||
|
"uni-datetime-picker.startDate": "start date",
|
||||||
|
"uni-datetime-picker.endDate": "end date",
|
||||||
|
"uni-datetime-picker.startTime": "start time",
|
||||||
|
"uni-datetime-picker.endTime": "end time",
|
||||||
|
"uni-datetime-picker.ok": "ok",
|
||||||
|
"uni-datetime-picker.clear": "clear",
|
||||||
|
"uni-datetime-picker.cancel": "cancel",
|
||||||
|
"uni-datetime-picker.year": "-",
|
||||||
|
"uni-datetime-picker.month": "",
|
||||||
|
"uni-calender.MON": "MON",
|
||||||
|
"uni-calender.TUE": "TUE",
|
||||||
|
"uni-calender.WED": "WED",
|
||||||
|
"uni-calender.THU": "THU",
|
||||||
|
"uni-calender.FRI": "FRI",
|
||||||
|
"uni-calender.SAT": "SAT",
|
||||||
|
"uni-calender.SUN": "SUN",
|
||||||
|
"uni-calender.confirm": "confirm"
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import en from './en.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"uni-datetime-picker.selectDate": "选择日期",
|
||||||
|
"uni-datetime-picker.selectTime": "选择时间",
|
||||||
|
"uni-datetime-picker.selectDateTime": "选择日期时间",
|
||||||
|
"uni-datetime-picker.startDate": "开始日期",
|
||||||
|
"uni-datetime-picker.endDate": "结束日期",
|
||||||
|
"uni-datetime-picker.startTime": "开始时间",
|
||||||
|
"uni-datetime-picker.endTime": "结束时间",
|
||||||
|
"uni-datetime-picker.ok": "确定",
|
||||||
|
"uni-datetime-picker.clear": "清除",
|
||||||
|
"uni-datetime-picker.cancel": "取消",
|
||||||
|
"uni-datetime-picker.year": "年",
|
||||||
|
"uni-datetime-picker.month": "月",
|
||||||
|
"uni-calender.SUN": "日",
|
||||||
|
"uni-calender.MON": "一",
|
||||||
|
"uni-calender.TUE": "二",
|
||||||
|
"uni-calender.WED": "三",
|
||||||
|
"uni-calender.THU": "四",
|
||||||
|
"uni-calender.FRI": "五",
|
||||||
|
"uni-calender.SAT": "六",
|
||||||
|
"uni-calender.confirm": "确认"
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"uni-datetime-picker.selectDate": "選擇日期",
|
||||||
|
"uni-datetime-picker.selectTime": "選擇時間",
|
||||||
|
"uni-datetime-picker.selectDateTime": "選擇日期時間",
|
||||||
|
"uni-datetime-picker.startDate": "開始日期",
|
||||||
|
"uni-datetime-picker.endDate": "結束日期",
|
||||||
|
"uni-datetime-picker.startTime": "開始时间",
|
||||||
|
"uni-datetime-picker.endTime": "結束时间",
|
||||||
|
"uni-datetime-picker.ok": "確定",
|
||||||
|
"uni-datetime-picker.clear": "清除",
|
||||||
|
"uni-datetime-picker.cancel": "取消",
|
||||||
|
"uni-datetime-picker.year": "年",
|
||||||
|
"uni-datetime-picker.month": "月",
|
||||||
|
"uni-calender.SUN": "日",
|
||||||
|
"uni-calender.MON": "一",
|
||||||
|
"uni-calender.TUE": "二",
|
||||||
|
"uni-calender.WED": "三",
|
||||||
|
"uni-calender.THU": "四",
|
||||||
|
"uni-calender.FRI": "五",
|
||||||
|
"uni-calender.SAT": "六",
|
||||||
|
"uni-calender.confirm": "確認"
|
||||||
|
}
|
||||||
@@ -0,0 +1,933 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-datetime-picker">
|
||||||
|
<view @click="initTimePicker">
|
||||||
|
<slot>
|
||||||
|
<view class="uni-datetime-picker-timebox-pointer"
|
||||||
|
:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
|
||||||
|
<text class="uni-datetime-picker-text">{{time}}</text>
|
||||||
|
<view v-if="!time" class="uni-datetime-picker-time">
|
||||||
|
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
|
||||||
|
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
|
||||||
|
:style="fixNvueBug">
|
||||||
|
<view class="uni-title">
|
||||||
|
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="dateShow" class="uni-datetime-picker__container-box">
|
||||||
|
<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
|
||||||
|
@change="bindDateChange">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
|
||||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
|
||||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
|
||||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
<!-- 兼容 nvue 不支持伪类 -->
|
||||||
|
<text class="uni-datetime-picker-sign sign-left">-</text>
|
||||||
|
<text class="uni-datetime-picker-sign sign-right">-</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="timeShow" class="uni-datetime-picker__container-box">
|
||||||
|
<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
|
||||||
|
:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
|
||||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
|
||||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column v-if="!hideSecond">
|
||||||
|
<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
|
||||||
|
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
<!-- 兼容 nvue 不支持伪类 -->
|
||||||
|
<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
|
||||||
|
<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-datetime-picker-btn">
|
||||||
|
<view @click="clearTime">
|
||||||
|
<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-datetime-picker-btn-group">
|
||||||
|
<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
|
||||||
|
<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
|
||||||
|
</view>
|
||||||
|
<view @click="setTime">
|
||||||
|
<text class="uni-datetime-picker-btn-text">{{okText}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||||
|
import i18nMessages from './i18n/index.js'
|
||||||
|
const { t } = initVueI18n(i18nMessages)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DatetimePicker 时间选择器
|
||||||
|
* @description 可以同时选择日期和时间的选择器
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
||||||
|
* @property {String} type = [datetime | date | time] 显示模式
|
||||||
|
* @property {Boolean} multiple = [true|false] 是否多选
|
||||||
|
* @property {String|Number} value 默认值
|
||||||
|
* @property {String|Number} start 起始日期或时间
|
||||||
|
* @property {String|Number} end 起始日期或时间
|
||||||
|
* @property {String} return-type = [timestamp | string]
|
||||||
|
* @event {Function} change 选中发生变化触发
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniDatetimePicker',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
indicatorStyle: `height: 50px;`,
|
||||||
|
visible: false,
|
||||||
|
fixNvueBug: {},
|
||||||
|
dateShow: true,
|
||||||
|
timeShow: true,
|
||||||
|
title: '日期和时间',
|
||||||
|
// 输入框当前时间
|
||||||
|
time: '',
|
||||||
|
// 当前的年月日时分秒
|
||||||
|
year: 1920,
|
||||||
|
month: 0,
|
||||||
|
day: 0,
|
||||||
|
hour: 0,
|
||||||
|
minute: 0,
|
||||||
|
second: 0,
|
||||||
|
// 起始时间
|
||||||
|
startYear: 1920,
|
||||||
|
startMonth: 1,
|
||||||
|
startDay: 1,
|
||||||
|
startHour: 0,
|
||||||
|
startMinute: 0,
|
||||||
|
startSecond: 0,
|
||||||
|
// 结束时间
|
||||||
|
endYear: 2120,
|
||||||
|
endMonth: 12,
|
||||||
|
endDay: 31,
|
||||||
|
endHour: 23,
|
||||||
|
endMinute: 59,
|
||||||
|
endSecond: 59,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'datetime'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
start: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
returnType: {
|
||||||
|
type: String,
|
||||||
|
default: 'string'
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
hideSecond: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// #ifndef VUE3
|
||||||
|
value: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式
|
||||||
|
this.initTime(false)
|
||||||
|
} else {
|
||||||
|
this.time = ''
|
||||||
|
this.parseValue(Date.now())
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
modelValue: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式
|
||||||
|
this.initTime(false)
|
||||||
|
} else {
|
||||||
|
this.time = ''
|
||||||
|
this.parseValue(Date.now())
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
type: {
|
||||||
|
handler(newValue) {
|
||||||
|
if (newValue === 'date') {
|
||||||
|
this.dateShow = true
|
||||||
|
this.timeShow = false
|
||||||
|
this.title = '日期'
|
||||||
|
} else if (newValue === 'time') {
|
||||||
|
this.dateShow = false
|
||||||
|
this.timeShow = true
|
||||||
|
this.title = '时间'
|
||||||
|
} else {
|
||||||
|
this.dateShow = true
|
||||||
|
this.timeShow = true
|
||||||
|
this.title = '日期和时间'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
start: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'start') //兼容 iOS、safari 日期格式
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'end') //兼容 iOS、safari 日期格式
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
|
||||||
|
months(newVal) {
|
||||||
|
this.checkValue('month', this.month, newVal)
|
||||||
|
},
|
||||||
|
days(newVal) {
|
||||||
|
this.checkValue('day', this.day, newVal)
|
||||||
|
},
|
||||||
|
hours(newVal) {
|
||||||
|
this.checkValue('hour', this.hour, newVal)
|
||||||
|
},
|
||||||
|
minutes(newVal) {
|
||||||
|
this.checkValue('minute', this.minute, newVal)
|
||||||
|
},
|
||||||
|
seconds(newVal) {
|
||||||
|
this.checkValue('second', this.second, newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前年、月、日、时、分、秒选择范围
|
||||||
|
years() {
|
||||||
|
return this.getCurrentRange('year')
|
||||||
|
},
|
||||||
|
|
||||||
|
months() {
|
||||||
|
return this.getCurrentRange('month')
|
||||||
|
},
|
||||||
|
|
||||||
|
days() {
|
||||||
|
return this.getCurrentRange('day')
|
||||||
|
},
|
||||||
|
|
||||||
|
hours() {
|
||||||
|
return this.getCurrentRange('hour')
|
||||||
|
},
|
||||||
|
|
||||||
|
minutes() {
|
||||||
|
return this.getCurrentRange('minute')
|
||||||
|
},
|
||||||
|
|
||||||
|
seconds() {
|
||||||
|
return this.getCurrentRange('second')
|
||||||
|
},
|
||||||
|
|
||||||
|
// picker 当前值数组
|
||||||
|
ymd() {
|
||||||
|
return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
|
||||||
|
},
|
||||||
|
hms() {
|
||||||
|
return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 当前 date 是 start
|
||||||
|
currentDateIsStart() {
|
||||||
|
return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
|
||||||
|
},
|
||||||
|
|
||||||
|
// 当前 date 是 end
|
||||||
|
currentDateIsEnd() {
|
||||||
|
return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
|
||||||
|
},
|
||||||
|
|
||||||
|
// 当前年、月、日、时、分、秒的最小值和最大值
|
||||||
|
minYear() {
|
||||||
|
return this.startYear
|
||||||
|
},
|
||||||
|
maxYear() {
|
||||||
|
return this.endYear
|
||||||
|
},
|
||||||
|
minMonth() {
|
||||||
|
if (this.year === this.startYear) {
|
||||||
|
return this.startMonth
|
||||||
|
} else {
|
||||||
|
return 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
maxMonth() {
|
||||||
|
if (this.year === this.endYear) {
|
||||||
|
return this.endMonth
|
||||||
|
} else {
|
||||||
|
return 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
minDay() {
|
||||||
|
if (this.year === this.startYear && this.month === this.startMonth) {
|
||||||
|
return this.startDay
|
||||||
|
} else {
|
||||||
|
return 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
maxDay() {
|
||||||
|
if (this.year === this.endYear && this.month === this.endMonth) {
|
||||||
|
return this.endDay
|
||||||
|
} else {
|
||||||
|
return this.daysInMonth(this.year, this.month)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
minHour() {
|
||||||
|
if (this.type === 'datetime') {
|
||||||
|
if (this.currentDateIsStart) {
|
||||||
|
return this.startHour
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.type === 'time') {
|
||||||
|
return this.startHour
|
||||||
|
}
|
||||||
|
},
|
||||||
|
maxHour() {
|
||||||
|
if (this.type === 'datetime') {
|
||||||
|
if (this.currentDateIsEnd) {
|
||||||
|
return this.endHour
|
||||||
|
} else {
|
||||||
|
return 23
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.type === 'time') {
|
||||||
|
return this.endHour
|
||||||
|
}
|
||||||
|
},
|
||||||
|
minMinute() {
|
||||||
|
if (this.type === 'datetime') {
|
||||||
|
if (this.currentDateIsStart && this.hour === this.startHour) {
|
||||||
|
return this.startMinute
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.type === 'time') {
|
||||||
|
if (this.hour === this.startHour) {
|
||||||
|
return this.startMinute
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
maxMinute() {
|
||||||
|
if (this.type === 'datetime') {
|
||||||
|
if (this.currentDateIsEnd && this.hour === this.endHour) {
|
||||||
|
return this.endMinute
|
||||||
|
} else {
|
||||||
|
return 59
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.type === 'time') {
|
||||||
|
if (this.hour === this.endHour) {
|
||||||
|
return this.endMinute
|
||||||
|
} else {
|
||||||
|
return 59
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
minSecond() {
|
||||||
|
if (this.type === 'datetime') {
|
||||||
|
if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
|
||||||
|
return this.startSecond
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.type === 'time') {
|
||||||
|
if (this.hour === this.startHour && this.minute === this.startMinute) {
|
||||||
|
return this.startSecond
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
maxSecond() {
|
||||||
|
if (this.type === 'datetime') {
|
||||||
|
if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
|
||||||
|
return this.endSecond
|
||||||
|
} else {
|
||||||
|
return 59
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.type === 'time') {
|
||||||
|
if (this.hour === this.endHour && this.minute === this.endMinute) {
|
||||||
|
return this.endSecond
|
||||||
|
} else {
|
||||||
|
return 59
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* for i18n
|
||||||
|
*/
|
||||||
|
selectTimeText() {
|
||||||
|
return t("uni-datetime-picker.selectTime")
|
||||||
|
},
|
||||||
|
okText() {
|
||||||
|
return t("uni-datetime-picker.ok")
|
||||||
|
},
|
||||||
|
clearText() {
|
||||||
|
return t("uni-datetime-picker.clear")
|
||||||
|
},
|
||||||
|
cancelText() {
|
||||||
|
return t("uni-datetime-picker.cancel")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const res = uni.getSystemInfoSync();
|
||||||
|
this.fixNvueBug = {
|
||||||
|
top: res.windowHeight / 2,
|
||||||
|
left: res.windowWidth / 2
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* @param {Object} item
|
||||||
|
* 小于 10 在前面加个 0
|
||||||
|
*/
|
||||||
|
|
||||||
|
lessThanTen(item) {
|
||||||
|
return item < 10 ? '0' + item : item
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析时分秒字符串，例如：00:00:00
|
||||||
|
* @param {String} timeString
|
||||||
|
*/
|
||||||
|
parseTimeType(timeString) {
|
||||||
|
if (timeString) {
|
||||||
|
let timeArr = timeString.split(':')
|
||||||
|
this.hour = Number(timeArr[0])
|
||||||
|
this.minute = Number(timeArr[1])
|
||||||
|
this.second = Number(timeArr[2])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
|
||||||
|
* @param {String | Number} datetime
|
||||||
|
*/
|
||||||
|
initPickerValue(datetime) {
|
||||||
|
let defaultValue = null
|
||||||
|
if (datetime) {
|
||||||
|
defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
|
||||||
|
} else {
|
||||||
|
defaultValue = Date.now()
|
||||||
|
defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
|
||||||
|
}
|
||||||
|
this.parseValue(defaultValue)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始值规则：
|
||||||
|
* - 用户设置初始值 value
|
||||||
|
* - 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
|
||||||
|
* - 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
|
||||||
|
* - 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
|
||||||
|
* - 无起始终止时间，则初始值为 value
|
||||||
|
* - 无初始值 value，则初始值为当前本地时间 Date.now()
|
||||||
|
* @param {Object} value
|
||||||
|
* @param {Object} dateBase
|
||||||
|
*/
|
||||||
|
compareValueWithStartAndEnd(value, start, end) {
|
||||||
|
let winner = null
|
||||||
|
value = this.superTimeStamp(value)
|
||||||
|
start = this.superTimeStamp(start)
|
||||||
|
end = this.superTimeStamp(end)
|
||||||
|
|
||||||
|
if (start && end) {
|
||||||
|
if (value < start) {
|
||||||
|
winner = new Date(start)
|
||||||
|
} else if (value > end) {
|
||||||
|
winner = new Date(end)
|
||||||
|
} else {
|
||||||
|
winner = new Date(value)
|
||||||
|
}
|
||||||
|
} else if (start && !end) {
|
||||||
|
winner = start <= value ? new Date(value) : new Date(start)
|
||||||
|
} else if (!start && end) {
|
||||||
|
winner = value <= end ? new Date(value) : new Date(end)
|
||||||
|
} else {
|
||||||
|
winner = new Date(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
return winner
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 转换为可比较的时间戳，接受日期、时分秒、时间戳
|
||||||
|
* @param {Object} value
|
||||||
|
*/
|
||||||
|
superTimeStamp(value) {
|
||||||
|
let dateBase = ''
|
||||||
|
if (this.type === 'time' && value && typeof value === 'string') {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = now.getMonth() + 1
|
||||||
|
const day = now.getDate()
|
||||||
|
dateBase = year + '/' + month + '/' + day + ' '
|
||||||
|
}
|
||||||
|
if (Number(value)) {
|
||||||
|
value = parseInt(value)
|
||||||
|
dateBase = 0
|
||||||
|
}
|
||||||
|
return this.createTimeStamp(dateBase + value)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析默认值 value，字符串、时间戳
|
||||||
|
* @param {Object} defaultTime
|
||||||
|
*/
|
||||||
|
parseValue(value) {
|
||||||
|
if (!value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.type === 'time' && typeof value === "string") {
|
||||||
|
this.parseTimeType(value)
|
||||||
|
} else {
|
||||||
|
let defaultDate = null
|
||||||
|
defaultDate = new Date(value)
|
||||||
|
if (this.type !== 'time') {
|
||||||
|
this.year = defaultDate.getFullYear()
|
||||||
|
this.month = defaultDate.getMonth() + 1
|
||||||
|
this.day = defaultDate.getDate()
|
||||||
|
}
|
||||||
|
if (this.type !== 'date') {
|
||||||
|
this.hour = defaultDate.getHours()
|
||||||
|
this.minute = defaultDate.getMinutes()
|
||||||
|
this.second = defaultDate.getSeconds()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.hideSecond) {
|
||||||
|
this.second = 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析可选择时间范围 start、end，年月日字符串、时间戳
|
||||||
|
* @param {Object} defaultTime
|
||||||
|
*/
|
||||||
|
parseDatetimeRange(point, pointType) {
|
||||||
|
// 时间为空，则重置为初始值
|
||||||
|
if (!point) {
|
||||||
|
if (pointType === 'start') {
|
||||||
|
this.startYear = 1920
|
||||||
|
this.startMonth = 1
|
||||||
|
this.startDay = 1
|
||||||
|
this.startHour = 0
|
||||||
|
this.startMinute = 0
|
||||||
|
this.startSecond = 0
|
||||||
|
}
|
||||||
|
if (pointType === 'end') {
|
||||||
|
this.endYear = 2120
|
||||||
|
this.endMonth = 12
|
||||||
|
this.endDay = 31
|
||||||
|
this.endHour = 23
|
||||||
|
this.endMinute = 59
|
||||||
|
this.endSecond = 59
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.type === 'time') {
|
||||||
|
const pointArr = point.split(':')
|
||||||
|
this[pointType + 'Hour'] = Number(pointArr[0])
|
||||||
|
this[pointType + 'Minute'] = Number(pointArr[1])
|
||||||
|
this[pointType + 'Second'] = Number(pointArr[2])
|
||||||
|
} else {
|
||||||
|
if (!point) {
|
||||||
|
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (Number(point)) {
|
||||||
|
point = parseInt(point)
|
||||||
|
}
|
||||||
|
// datetime 的 end 没有时分秒, 则不限制
|
||||||
|
const hasTime = /[0-9]:[0-9]/
|
||||||
|
if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
|
||||||
|
point)) {
|
||||||
|
point = point + ' 23:59:59'
|
||||||
|
}
|
||||||
|
const pointDate = new Date(point)
|
||||||
|
this[pointType + 'Year'] = pointDate.getFullYear()
|
||||||
|
this[pointType + 'Month'] = pointDate.getMonth() + 1
|
||||||
|
this[pointType + 'Day'] = pointDate.getDate()
|
||||||
|
if (this.type === 'datetime') {
|
||||||
|
this[pointType + 'Hour'] = pointDate.getHours()
|
||||||
|
this[pointType + 'Minute'] = pointDate.getMinutes()
|
||||||
|
this[pointType + 'Second'] = pointDate.getSeconds()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取 年、月、日、时、分、秒 当前可选范围
|
||||||
|
getCurrentRange(value) {
|
||||||
|
const range = []
|
||||||
|
for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
|
||||||
|
range.push(i)
|
||||||
|
}
|
||||||
|
return range
|
||||||
|
},
|
||||||
|
|
||||||
|
// 字符串首字母大写
|
||||||
|
capitalize(str) {
|
||||||
|
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
|
||||||
|
checkValue(name, value, values) {
|
||||||
|
if (values.indexOf(value) === -1) {
|
||||||
|
this[name] = values[0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 每个月的实际天数
|
||||||
|
daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
|
||||||
|
return new Date(year, month, 0).getDate();
|
||||||
|
},
|
||||||
|
|
||||||
|
//兼容 iOS、safari 日期格式
|
||||||
|
fixIosDateFormat(value) {
|
||||||
|
if (typeof value === 'string') {
|
||||||
|
value = value.replace(/-/g, '/')
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成时间戳
|
||||||
|
* @param {Object} time
|
||||||
|
*/
|
||||||
|
createTimeStamp(time) {
|
||||||
|
if (!time) return
|
||||||
|
if (typeof time === "number") {
|
||||||
|
return time
|
||||||
|
} else {
|
||||||
|
time = time.replace(/-/g, '/')
|
||||||
|
if (this.type === 'date') {
|
||||||
|
time = time + ' ' + '00:00:00'
|
||||||
|
}
|
||||||
|
return Date.parse(time)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成日期或时间的字符串
|
||||||
|
*/
|
||||||
|
createDomSting() {
|
||||||
|
const yymmdd = this.year +
|
||||||
|
'-' +
|
||||||
|
this.lessThanTen(this.month) +
|
||||||
|
'-' +
|
||||||
|
this.lessThanTen(this.day)
|
||||||
|
|
||||||
|
let hhmmss = this.lessThanTen(this.hour) +
|
||||||
|
':' +
|
||||||
|
this.lessThanTen(this.minute)
|
||||||
|
|
||||||
|
if (!this.hideSecond) {
|
||||||
|
hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.type === 'date') {
|
||||||
|
return yymmdd
|
||||||
|
} else if (this.type === 'time') {
|
||||||
|
return hhmmss
|
||||||
|
} else {
|
||||||
|
return yymmdd + ' ' + hhmmss
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化返回值，并抛出 change 事件
|
||||||
|
*/
|
||||||
|
initTime(emit = true) {
|
||||||
|
this.time = this.createDomSting()
|
||||||
|
if (!emit) return
|
||||||
|
if (this.returnType === 'timestamp' && this.type !== 'time') {
|
||||||
|
this.$emit('change', this.createTimeStamp(this.time))
|
||||||
|
this.$emit('input', this.createTimeStamp(this.time))
|
||||||
|
this.$emit('update:modelValue', this.createTimeStamp(this.time))
|
||||||
|
} else {
|
||||||
|
this.$emit('change', this.time)
|
||||||
|
this.$emit('input', this.time)
|
||||||
|
this.$emit('update:modelValue', this.time)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户选择日期或时间更新 data
|
||||||
|
* @param {Object} e
|
||||||
|
*/
|
||||||
|
bindDateChange(e) {
|
||||||
|
const val = e.detail.value
|
||||||
|
this.year = this.years[val[0]]
|
||||||
|
this.month = this.months[val[1]]
|
||||||
|
this.day = this.days[val[2]]
|
||||||
|
},
|
||||||
|
bindTimeChange(e) {
|
||||||
|
const val = e.detail.value
|
||||||
|
this.hour = this.hours[val[0]]
|
||||||
|
this.minute = this.minutes[val[1]]
|
||||||
|
this.second = this.seconds[val[2]]
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化弹出层
|
||||||
|
*/
|
||||||
|
initTimePicker() {
|
||||||
|
if (this.disabled) return
|
||||||
|
const value = this.fixIosDateFormat(this.time)
|
||||||
|
this.initPickerValue(value)
|
||||||
|
this.visible = !this.visible
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 触发或关闭弹框
|
||||||
|
*/
|
||||||
|
tiggerTimePicker(e) {
|
||||||
|
this.visible = !this.visible
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户点击“清空”按钮，清空当前值
|
||||||
|
*/
|
||||||
|
clearTime() {
|
||||||
|
this.time = ''
|
||||||
|
this.$emit('change', this.time)
|
||||||
|
this.$emit('input', this.time)
|
||||||
|
this.$emit('update:modelValue', this.time)
|
||||||
|
this.tiggerTimePicker()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户点击“确定”按钮
|
||||||
|
*/
|
||||||
|
setTime() {
|
||||||
|
this.initTime()
|
||||||
|
this.tiggerTimePicker()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-primary: #007aff !default;
|
||||||
|
|
||||||
|
.uni-datetime-picker {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
/* width: 100%; */
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-view {
|
||||||
|
height: 130px;
|
||||||
|
width: 270px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-item {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-btn {
|
||||||
|
margin-top: 60px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-btn-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-btn-group {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-cancel {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-mask {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
z-index: 998;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-popup {
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 30px;
|
||||||
|
width: 270px;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
height: 500px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 330px;
|
||||||
|
/* #endif */
|
||||||
|
background-color: #fff;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fix-nvue-height {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
height: 330px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-time {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-column {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-timebox {
|
||||||
|
|
||||||
|
border: 1px solid #E5E5E5;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 7px 10px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-timebox-pointer {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-datetime-picker-disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 50px
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker-sign {
|
||||||
|
position: absolute;
|
||||||
|
top: 53px;
|
||||||
|
/* 减掉 10px 的元素高度，兼容nvue */
|
||||||
|
color: #999;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
font-size: 16px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-left {
|
||||||
|
left: 86px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-right {
|
||||||
|
right: 86px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-center {
|
||||||
|
left: 135px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-datetime-picker__container-box {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-hide-second {
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,420 @@
|
|||||||
|
class Calendar {
|
||||||
|
constructor({
|
||||||
|
date,
|
||||||
|
selected,
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
range,
|
||||||
|
// multipleStatus
|
||||||
|
} = {}) {
|
||||||
|
// 当前日期
|
||||||
|
this.date = this.getDate(new Date()) // 当前初入日期
|
||||||
|
// 打点信息
|
||||||
|
this.selected = selected || [];
|
||||||
|
// 范围开始
|
||||||
|
this.startDate = startDate
|
||||||
|
// 范围结束
|
||||||
|
this.endDate = endDate
|
||||||
|
this.range = range
|
||||||
|
// 多选状态
|
||||||
|
this.cleanMultipleStatus()
|
||||||
|
// 每周日期
|
||||||
|
this.weeks = {}
|
||||||
|
// this._getWeek(this.date.fullDate)
|
||||||
|
// this.multipleStatus = multipleStatus
|
||||||
|
this.lastHover = false
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 设置日期
|
||||||
|
* @param {Object} date
|
||||||
|
*/
|
||||||
|
setDate(date) {
|
||||||
|
this.selectDate = this.getDate(date)
|
||||||
|
this._getWeek(this.selectDate.fullDate)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 清理多选状态
|
||||||
|
*/
|
||||||
|
cleanMultipleStatus() {
|
||||||
|
this.multipleStatus = {
|
||||||
|
before: '',
|
||||||
|
after: '',
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置开始日期
|
||||||
|
*/
|
||||||
|
resetSatrtDate(startDate) {
|
||||||
|
// 范围开始
|
||||||
|
this.startDate = startDate
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置结束日期
|
||||||
|
*/
|
||||||
|
resetEndDate(endDate) {
|
||||||
|
// 范围结束
|
||||||
|
this.endDate = endDate
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取任意时间
|
||||||
|
*/
|
||||||
|
getDate(date, AddDayCount = 0, str = 'day') {
|
||||||
|
if (!date) {
|
||||||
|
date = new Date()
|
||||||
|
}
|
||||||
|
if (typeof date !== 'object') {
|
||||||
|
date = date.replace(/-/g, '/')
|
||||||
|
}
|
||||||
|
const dd = new Date(date)
|
||||||
|
switch (str) {
|
||||||
|
case 'day':
|
||||||
|
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
||||||
|
break
|
||||||
|
case 'month':
|
||||||
|
if (dd.getDate() === 31 && AddDayCount>0) {
|
||||||
|
dd.setDate(dd.getDate() + AddDayCount)
|
||||||
|
} else {
|
||||||
|
const preMonth = dd.getMonth()
|
||||||
|
dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
|
||||||
|
const nextMonth = dd.getMonth()
|
||||||
|
// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||||
|
if(AddDayCount<0 && preMonth!==0 && nextMonth-preMonth>AddDayCount){
|
||||||
|
dd.setMonth(nextMonth+(nextMonth-preMonth+AddDayCount))
|
||||||
|
}
|
||||||
|
// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
|
||||||
|
if(AddDayCount>0 && nextMonth-preMonth>AddDayCount){
|
||||||
|
dd.setMonth(nextMonth-(nextMonth-preMonth-AddDayCount))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'year':
|
||||||
|
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
|
||||||
|
break
|
||||||
|
}
|
||||||
|
const y = dd.getFullYear()
|
||||||
|
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
|
||||||
|
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
||||||
|
return {
|
||||||
|
fullDate: y + '-' + m + '-' + d,
|
||||||
|
year: y,
|
||||||
|
month: m,
|
||||||
|
date: d,
|
||||||
|
day: dd.getDay()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取上月剩余天数
|
||||||
|
*/
|
||||||
|
_getLastMonthDays(firstDay, full) {
|
||||||
|
let dateArr = []
|
||||||
|
for (let i = firstDay; i > 0; i--) {
|
||||||
|
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
|
||||||
|
dateArr.push({
|
||||||
|
date: beforeDate,
|
||||||
|
month: full.month - 1,
|
||||||
|
disable: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return dateArr
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 获取本月天数
|
||||||
|
*/
|
||||||
|
_currentMonthDys(dateData, full) {
|
||||||
|
let dateArr = []
|
||||||
|
let fullDate = this.date.fullDate
|
||||||
|
for (let i = 1; i <= dateData; i++) {
|
||||||
|
let isinfo = false
|
||||||
|
let nowDate = full.year + '-' + (full.month < 10 ?
|
||||||
|
full.month : full.month) + '-' + (i < 10 ?
|
||||||
|
'0' + i : i)
|
||||||
|
// 是否今天
|
||||||
|
let isDay = fullDate === nowDate
|
||||||
|
// 获取打点信息
|
||||||
|
let info = this.selected && this.selected.find((item) => {
|
||||||
|
if (this.dateEqual(nowDate, item.date)) {
|
||||||
|
return item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 日期禁用
|
||||||
|
let disableBefore = true
|
||||||
|
let disableAfter = true
|
||||||
|
if (this.startDate) {
|
||||||
|
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
|
||||||
|
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
|
||||||
|
disableBefore = this.dateCompare(this.startDate, nowDate)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.endDate) {
|
||||||
|
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
|
||||||
|
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
|
||||||
|
disableAfter = this.dateCompare(nowDate, this.endDate)
|
||||||
|
}
|
||||||
|
let multiples = this.multipleStatus.data
|
||||||
|
let checked = false
|
||||||
|
let multiplesStatus = -1
|
||||||
|
if (this.range) {
|
||||||
|
if (multiples) {
|
||||||
|
multiplesStatus = multiples.findIndex((item) => {
|
||||||
|
return this.dateEqual(item, nowDate)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (multiplesStatus !== -1) {
|
||||||
|
checked = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let data = {
|
||||||
|
fullDate: nowDate,
|
||||||
|
year: full.year,
|
||||||
|
date: i,
|
||||||
|
multiple: this.range ? checked : false,
|
||||||
|
beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||||
|
afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||||
|
month: full.month,
|
||||||
|
disable: !(disableBefore && disableAfter),
|
||||||
|
isDay,
|
||||||
|
userChecked: false
|
||||||
|
}
|
||||||
|
if (info) {
|
||||||
|
data.extraInfo = info
|
||||||
|
}
|
||||||
|
|
||||||
|
dateArr.push(data)
|
||||||
|
}
|
||||||
|
return dateArr
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 获取下月天数
|
||||||
|
*/
|
||||||
|
_getNextMonthDays(surplus, full) {
|
||||||
|
let dateArr = []
|
||||||
|
for (let i = 1; i < surplus + 1; i++) {
|
||||||
|
dateArr.push({
|
||||||
|
date: i,
|
||||||
|
month: Number(full.month) + 1,
|
||||||
|
disable: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return dateArr
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前日期详情
|
||||||
|
* @param {Object} date
|
||||||
|
*/
|
||||||
|
getInfo(date) {
|
||||||
|
if (!date) {
|
||||||
|
date = new Date()
|
||||||
|
}
|
||||||
|
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
|
||||||
|
return dateInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 比较时间大小
|
||||||
|
*/
|
||||||
|
dateCompare(startDate, endDate) {
|
||||||
|
// 计算截止时间
|
||||||
|
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
||||||
|
// 计算详细项的截止时间
|
||||||
|
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
||||||
|
if (startDate <= endDate) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 比较时间是否相等
|
||||||
|
*/
|
||||||
|
dateEqual(before, after) {
|
||||||
|
// 计算截止时间
|
||||||
|
before = new Date(before.replace('-', '/').replace('-', '/'))
|
||||||
|
// 计算详细项的截止时间
|
||||||
|
after = new Date(after.replace('-', '/').replace('-', '/'))
|
||||||
|
if (before.getTime() - after.getTime() === 0) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 比较真实起始日期
|
||||||
|
*/
|
||||||
|
|
||||||
|
isLogicBefore(currentDay, before, after) {
|
||||||
|
let logicBefore = before
|
||||||
|
if (before && after) {
|
||||||
|
logicBefore = this.dateCompare(before, after) ? before : after
|
||||||
|
}
|
||||||
|
return this.dateEqual(logicBefore, currentDay)
|
||||||
|
}
|
||||||
|
|
||||||
|
isLogicAfter(currentDay, before, after) {
|
||||||
|
let logicAfter = after
|
||||||
|
if (before && after) {
|
||||||
|
logicAfter = this.dateCompare(before, after) ? after : before
|
||||||
|
}
|
||||||
|
return this.dateEqual(logicAfter, currentDay)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取日期范围内所有日期
|
||||||
|
* @param {Object} begin
|
||||||
|
* @param {Object} end
|
||||||
|
*/
|
||||||
|
geDateAll(begin, end) {
|
||||||
|
var arr = []
|
||||||
|
var ab = begin.split('-')
|
||||||
|
var ae = end.split('-')
|
||||||
|
var db = new Date()
|
||||||
|
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||||
|
var de = new Date()
|
||||||
|
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||||
|
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||||
|
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||||
|
for (var k = unixDb; k <= unixDe;) {
|
||||||
|
k = k + 24 * 60 * 60 * 1000
|
||||||
|
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
|
||||||
|
}
|
||||||
|
return arr
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取多选状态
|
||||||
|
*/
|
||||||
|
setMultiple(fullDate) {
|
||||||
|
let {
|
||||||
|
before,
|
||||||
|
after
|
||||||
|
} = this.multipleStatus
|
||||||
|
if (!this.range) return
|
||||||
|
if (before && after) {
|
||||||
|
if (!this.lastHover) {
|
||||||
|
this.lastHover = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.multipleStatus.before = fullDate
|
||||||
|
this.multipleStatus.after = ''
|
||||||
|
this.multipleStatus.data = []
|
||||||
|
this.multipleStatus.fulldate = ''
|
||||||
|
this.lastHover = false
|
||||||
|
} else {
|
||||||
|
if (!before) {
|
||||||
|
this.multipleStatus.before = fullDate
|
||||||
|
this.lastHover = false
|
||||||
|
} else {
|
||||||
|
this.multipleStatus.after = fullDate
|
||||||
|
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
|
||||||
|
.after);
|
||||||
|
} else {
|
||||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
|
||||||
|
.before);
|
||||||
|
}
|
||||||
|
this.lastHover = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this._getWeek(fullDate)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 鼠标 hover 更新多选状态
|
||||||
|
*/
|
||||||
|
setHoverMultiple(fullDate) {
|
||||||
|
let {
|
||||||
|
before,
|
||||||
|
after
|
||||||
|
} = this.multipleStatus
|
||||||
|
|
||||||
|
if (!this.range) return
|
||||||
|
if (this.lastHover) return
|
||||||
|
|
||||||
|
if (!before) {
|
||||||
|
this.multipleStatus.before = fullDate
|
||||||
|
} else {
|
||||||
|
this.multipleStatus.after = fullDate
|
||||||
|
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||||||
|
} else {
|
||||||
|
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this._getWeek(fullDate)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新默认值多选状态
|
||||||
|
*/
|
||||||
|
setDefaultMultiple(before, after) {
|
||||||
|
this.multipleStatus.before = before
|
||||||
|
this.multipleStatus.after = after
|
||||||
|
if (before && after) {
|
||||||
|
if (this.dateCompare(before, after)) {
|
||||||
|
this.multipleStatus.data = this.geDateAll(before, after);
|
||||||
|
this._getWeek(after)
|
||||||
|
} else {
|
||||||
|
this.multipleStatus.data = this.geDateAll(after, before);
|
||||||
|
this._getWeek(before)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取每周数据
|
||||||
|
* @param {Object} dateData
|
||||||
|
*/
|
||||||
|
_getWeek(dateData) {
|
||||||
|
const {
|
||||||
|
fullDate,
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
date,
|
||||||
|
day
|
||||||
|
} = this.getDate(dateData)
|
||||||
|
let firstDay = new Date(year, month - 1, 1).getDay()
|
||||||
|
let currentDay = new Date(year, month, 0).getDate()
|
||||||
|
let dates = {
|
||||||
|
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
|
||||||
|
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
|
||||||
|
nextMonthDays: [], // 下个月开始几天
|
||||||
|
weeks: []
|
||||||
|
}
|
||||||
|
let canlender = []
|
||||||
|
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
|
||||||
|
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
|
||||||
|
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
|
||||||
|
let weeks = {}
|
||||||
|
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
|
||||||
|
for (let i = 0; i < canlender.length; i++) {
|
||||||
|
if (i % 7 === 0) {
|
||||||
|
weeks[parseInt(i / 7)] = new Array(7)
|
||||||
|
}
|
||||||
|
weeks[parseInt(i / 7)][i % 7] = canlender[i]
|
||||||
|
}
|
||||||
|
this.canlender = canlender
|
||||||
|
this.weeks = weeks
|
||||||
|
}
|
||||||
|
|
||||||
|
//静态方法
|
||||||
|
// static init(date) {
|
||||||
|
// if (!this.instance) {
|
||||||
|
// this.instance = new Calendar(date);
|
||||||
|
// }
|
||||||
|
// return this.instance;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default Calendar
|
||||||
87
uni_modules/uni-datetime-picker/package.json
Normal file
87
uni_modules/uni-datetime-picker/package.json
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-datetime-picker",
|
||||||
|
"displayName": "uni-datetime-picker 日期选择器",
|
||||||
|
"version": "2.2.19",
|
||||||
|
"description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
|
||||||
|
"keywords": [
|
||||||
|
"uni-datetime-picker",
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"日期时间选择器",
|
||||||
|
"日期时间"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-scss",
|
||||||
|
"uni-icons"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "n"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
21
uni_modules/uni-datetime-picker/readme.md
Normal file
21
uni_modules/uni-datetime-picker/readme.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
|
||||||
|
|
||||||
|
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
|
||||||
|
|
||||||
|
## DatetimePicker 时间选择器
|
||||||
|
|
||||||
|
> **组件名：uni-datetime-picker**
|
||||||
|
> 代码块： `uDatetimePicker`
|
||||||
|
|
||||||
|
|
||||||
|
该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
|
||||||
|
|
||||||
|
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
|
||||||
|
|
||||||
|
**_点击 picker 默认值规则：_**
|
||||||
|
|
||||||
|
- 若设置初始值 value, 会显示在 picker 显示框中
|
||||||
|
- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
19
uni_modules/uni-load-more/changelog.md
Normal file
19
uni_modules/uni-load-more/changelog.md
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
## 1.3.3（2022-01-20）
|
||||||
|
- 新增 showText属性 ，是否显示文本
|
||||||
|
## 1.3.2（2022-01-19）
|
||||||
|
- 修复 nvue 平台下不显示文本的bug
|
||||||
|
## 1.3.1（2022-01-19）
|
||||||
|
- 修复 微信小程序平台样式选择器报警告的问题
|
||||||
|
## 1.3.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||||
|
## 1.2.1（2021-08-24）
|
||||||
|
- 新增 支持国际化
|
||||||
|
## 1.2.0（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.1.8（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.7（2021-03-30）
|
||||||
|
- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
|
||||||
|
## 1.1.6（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "Pull up to show more",
|
||||||
|
"uni-load-more.contentrefresh": "loading...",
|
||||||
|
"uni-load-more.contentnomore": "No more data"
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import en from './en.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "上拉显示更多",
|
||||||
|
"uni-load-more.contentrefresh": "正在加载...",
|
||||||
|
"uni-load-more.contentnomore": "没有更多数据了"
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "上拉顯示更多",
|
||||||
|
"uni-load-more.contentrefresh": "正在加載...",
|
||||||
|
"uni-load-more.contentnomore": "沒有更多數據了"
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
86
uni_modules/uni-load-more/package.json
Normal file
86
uni_modules/uni-load-more/package.json
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-load-more",
|
||||||
|
"displayName": "uni-load-more 加载更多",
|
||||||
|
"version": "1.3.3",
|
||||||
|
"description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"加载更多",
|
||||||
|
"load-more"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
14
uni_modules/uni-load-more/readme.md
Normal file
14
uni_modules/uni-load-more/readme.md
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
|
||||||
|
|
||||||
|
### LoadMore 加载更多
|
||||||
|
> **组件名：uni-load-more**
|
||||||
|
> 代码块： `uLoadMore`
|
||||||
|
|
||||||
|
|
||||||
|
用于列表中，做滚动加载使用，展示 loading 的各种状态。
|
||||||
|
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
2
uni_modules/uni-section/changelog.md
Normal file
2
uni_modules/uni-section/changelog.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
## 0.0.1（2022-07-22）
|
||||||
|
- 初始化
|
||||||
167
uni_modules/uni-section/components/uni-section/uni-section.vue
Normal file
167
uni_modules/uni-section/components/uni-section/uni-section.vue
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-section">
|
||||||
|
<view class="uni-section-header" @click="onClick">
|
||||||
|
<view class="uni-section-header__decoration" v-if="type" :class="type" />
|
||||||
|
<slot v-else name="decoration"></slot>
|
||||||
|
|
||||||
|
<view class="uni-section-header__content">
|
||||||
|
<text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
|
||||||
|
<text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="uni-section-header__slot-right">
|
||||||
|
<slot name="right"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="uni-section-content" :style="{padding: _padding}">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Section 标题栏
|
||||||
|
* @description 标题栏
|
||||||
|
* @property {String} type = [line|circle|square] 标题装饰类型
|
||||||
|
* @value line 竖线
|
||||||
|
* @value circle 圆形
|
||||||
|
* @value square 正方形
|
||||||
|
* @property {String} title 主标题
|
||||||
|
* @property {String} titleFontSize 主标题字体大小
|
||||||
|
* @property {String} titleColor 主标题字体颜色
|
||||||
|
* @property {String} subTitle 副标题
|
||||||
|
* @property {String} subTitleFontSize 副标题字体大小
|
||||||
|
* @property {String} subTitleColor 副标题字体颜色
|
||||||
|
* @property {String} padding 默认插槽 padding
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniSection',
|
||||||
|
emits:['click'],
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
titleFontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '14px'
|
||||||
|
},
|
||||||
|
titleColor:{
|
||||||
|
type: String,
|
||||||
|
default: '#333'
|
||||||
|
},
|
||||||
|
subTitle: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
subTitleFontSize: {
|
||||||
|
type: String,
|
||||||
|
default: '12px'
|
||||||
|
},
|
||||||
|
subTitleColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#999'
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
_padding(){
|
||||||
|
if(typeof this.padding === 'string'){
|
||||||
|
return this.padding
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.padding?'10px':''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
title(newVal) {
|
||||||
|
if (uni.report && newVal !== '') {
|
||||||
|
uni.report('title', newVal)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick() {
|
||||||
|
this.$emit('click')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" >
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
|
||||||
|
.uni-section {
|
||||||
|
background-color: #fff;
|
||||||
|
.uni-section-header {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 10px;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
&__decoration{
|
||||||
|
margin-right: 6px;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
&.line {
|
||||||
|
width: 4px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.circle {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-top-right-radius: 50px;
|
||||||
|
border-top-left-radius: 50px;
|
||||||
|
border-bottom-left-radius: 50px;
|
||||||
|
border-bottom-right-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.square {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
.distraction {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&-sub {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__slot-right{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-section-content{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
87
uni_modules/uni-section/package.json
Normal file
87
uni_modules/uni-section/package.json
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-section",
|
||||||
|
"displayName": "uni-section 标题栏",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"description": "标题栏组件",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"标题栏"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
8
uni_modules/uni-section/readme.md
Normal file
8
uni_modules/uni-section/readme.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
## Section 标题栏
|
||||||
|
> **组件名：uni-section**
|
||||||
|
> 代码块： `uSection`
|
||||||
|
|
||||||
|
uni-section 组件主要用于文章、列表详情等标题展示
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-section)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
9
uni_modules/uni-segmented-control/changelog.md
Normal file
9
uni_modules/uni-segmented-control/changelog.md
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
## 1.2.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-segmented-control](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
|
||||||
|
## 1.1.0（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.0.5（2021-05-12）
|
||||||
|
- 新增 项目示例地址
|
||||||
|
## 1.0.4（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
<template>
|
||||||
|
<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
|
||||||
|
:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
|
||||||
|
<view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
|
||||||
|
index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
|
||||||
|
index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
|
||||||
|
index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]" :key="index"
|
||||||
|
:style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' }"
|
||||||
|
class="segmented-control__item" @click="_onClick(index)">
|
||||||
|
<view>
|
||||||
|
<text :style="{color:
|
||||||
|
index === currentIndex
|
||||||
|
? styleType === 'text'
|
||||||
|
? activeColor
|
||||||
|
: '#fff'
|
||||||
|
: styleType === 'text'
|
||||||
|
? '#000'
|
||||||
|
: activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* SegmentedControl 分段器
|
||||||
|
* @description 用作不同视图的显示
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=54
|
||||||
|
* @property {Number} current 当前选中的tab索引值，从0计数
|
||||||
|
* @property {String} styleType = [button|text] 分段器样式类型
|
||||||
|
* @value button 按钮类型
|
||||||
|
* @value text 文字类型
|
||||||
|
* @property {String} activeColor 选中的标签背景色与边框颜色
|
||||||
|
* @property {Array} values 选项数组
|
||||||
|
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniSegmentedControl',
|
||||||
|
emits: ['clickItem'],
|
||||||
|
props: {
|
||||||
|
current: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
values: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#2979FF'
|
||||||
|
},
|
||||||
|
styleType: {
|
||||||
|
type: String,
|
||||||
|
default: 'button'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
current(val) {
|
||||||
|
if (val !== this.currentIndex) {
|
||||||
|
this.currentIndex = val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.currentIndex = this.current
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_onClick(index) {
|
||||||
|
if (this.currentIndex !== index) {
|
||||||
|
this.currentIndex = index
|
||||||
|
this.$emit('clickItem', {
|
||||||
|
currentIndex: index
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.segmented-control {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
height: 36px;
|
||||||
|
overflow: hidden;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item--button {
|
||||||
|
border-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-left-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item--button--first {
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item--button--last {
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item--text {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
87
uni_modules/uni-segmented-control/package.json
Normal file
87
uni_modules/uni-segmented-control/package.json
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-segmented-control",
|
||||||
|
"displayName": "uni-segmented-control 分段器",
|
||||||
|
"version": "1.2.0",
|
||||||
|
"description": "分段器由至少 2 个分段控件组成，用作不同视图的显示",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"分段器",
|
||||||
|
"segement",
|
||||||
|
"顶部选择"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
uni_modules/uni-segmented-control/readme.md
Normal file
13
uni_modules/uni-segmented-control/readme.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## SegmentedControl 分段器
|
||||||
|
> **组件名：uni-segmented-control**
|
||||||
|
> 代码块： `uSegmentedControl`
|
||||||
|
|
||||||
|
|
||||||
|
用作不同视图的显示
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user