新增营销系统、分销系统、会员功能、门店、提现功能
This commit is contained in:
Shaw
@ -2,24 +2,24 @@
|
||||
1. 增加round属性设置弹窗圆角，默认为0
|
||||
## 1.0.9（2023-08-24）
|
||||
1. 修复cli项目不返回值的问题
|
||||
## 1.0.8（2023-08-04）
|
||||
1. 优化
|
||||
## 1.0.7（2023-08-02）
|
||||
1. 改组件中删除uv-toolbar组件，请单独下载uv-toolbar组件
|
||||
## 1.0.6（2023-07-02）
|
||||
uv-picker 由于弹出层uv-popup的修改，打开和关闭方法更改，详情参考文档：https://www.uvui.cn/components/picker.html
|
||||
## 1.0.5（2023-06-26）
|
||||
1. 增加color参数
|
||||
2. 增加activeColor参数
|
||||
## 1.0.4（2023-06-15）
|
||||
1. 修改支付宝报错的BUG
|
||||
## 1.0.3（2023-06-12）
|
||||
1. setColumnValues的使用统一化，避免某些平台报错
|
||||
2. 取消change回调回传的组件实例，直接统一通过ref的方式调取setColumnValues方法
|
||||
## 1.0.2（2023-05-23）
|
||||
1. uv-toolbar组件新增下边框属性
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-picker 选择器
|
||||
## 1.0.8（2023-08-04）
|
||||
1. 优化
|
||||
## 1.0.7（2023-08-02）
|
||||
1. 改组件中删除uv-toolbar组件，请单独下载uv-toolbar组件
|
||||
## 1.0.6（2023-07-02）
|
||||
uv-picker 由于弹出层uv-popup的修改，打开和关闭方法更改，详情参考文档：https://www.uvui.cn/components/picker.html
|
||||
## 1.0.5（2023-06-26）
|
||||
1. 增加color参数
|
||||
2. 增加activeColor参数
|
||||
## 1.0.4（2023-06-15）
|
||||
1. 修改支付宝报错的BUG
|
||||
## 1.0.3（2023-06-12）
|
||||
1. setColumnValues的使用统一化，避免某些平台报错
|
||||
2. 取消change回调回传的组件实例，直接统一通过ref的方式调取setColumnValues方法
|
||||
## 1.0.2（2023-05-23）
|
||||
1. uv-toolbar组件新增下边框属性
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-picker 选择器
|
||||
|
||||
@ -1,95 +1,95 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示顶部的操作栏
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 弹窗圆角
|
||||
round: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 对象数组，设置每一列的数据
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 是否显示加载中状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 各列中，单个选项的高度
|
||||
itemHeight: {
|
||||
type: [String, Number],
|
||||
default: 44
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
// 取消按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#909193'
|
||||
},
|
||||
// 确认按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 选中文字的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 每列中可见选项的数量
|
||||
visibleItemCount: {
|
||||
type: [String, Number],
|
||||
default: 5
|
||||
},
|
||||
// 选项对象中，需要展示的属性键名
|
||||
keyName: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
// 是否允许点击遮罩关闭选择器
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否允许点击确认关闭选择器
|
||||
closeOnClickConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 各列的默认索引
|
||||
defaultIndex: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
|
||||
immediateChange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.picker
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示顶部的操作栏
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 弹窗圆角
|
||||
round: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 对象数组，设置每一列的数据
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 是否显示加载中状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 各列中，单个选项的高度
|
||||
itemHeight: {
|
||||
type: [String, Number],
|
||||
default: 44
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
// 取消按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#909193'
|
||||
},
|
||||
// 确认按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 选中文字的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 每列中可见选项的数量
|
||||
visibleItemCount: {
|
||||
type: [String, Number],
|
||||
default: 5
|
||||
},
|
||||
// 选项对象中，需要展示的属性键名
|
||||
keyName: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
// 是否允许点击遮罩关闭选择器
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否允许点击确认关闭选择器
|
||||
closeOnClickConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 各列的默认索引
|
||||
defaultIndex: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
|
||||
immediateChange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
...uni.$uv?.props?.picker
|
||||
}
|
||||
}
|
||||
@ -1,314 +1,314 @@
|
||||
<template>
|
||||
<uv-popup
|
||||
ref="pickerPopup"
|
||||
mode="bottom"
|
||||
:round="round"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
@change="popupChange"
|
||||
>
|
||||
<view class="uv-picker">
|
||||
<uv-toolbar
|
||||
v-if="showToolbar"
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="confirmColor"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
:title="title"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
></uv-toolbar>
|
||||
<picker-view
|
||||
class="uv-picker__view"
|
||||
:indicatorStyle="`height: ${$uv.addUnit(itemHeight)}`"
|
||||
:value="innerIndex"
|
||||
:immediateChange="immediateChange"
|
||||
:style="{
|
||||
height: `${$uv.addUnit(visibleItemCount * itemHeight)}`
|
||||
}"
|
||||
@change="changeHandler"
|
||||
>
|
||||
<picker-view-column
|
||||
v-for="(item, index) in innerColumns"
|
||||
:key="index"
|
||||
class="uv-picker__view__column"
|
||||
>
|
||||
<text
|
||||
v-if="$uv.test.array(item)"
|
||||
class="uv-picker__view__column__item uv-line-1"
|
||||
v-for="(item1, index1) in item"
|
||||
:key="index1"
|
||||
:style="[{
|
||||
height: $uv.addUnit(itemHeight),
|
||||
lineHeight: $uv.addUnit(itemHeight),
|
||||
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
|
||||
},textStyle(index,index1)]"
|
||||
>{{ getItemText(item1) }}</text>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view
|
||||
v-if="loading"
|
||||
class="uv-picker--loading"
|
||||
>
|
||||
<uv-loading-icon mode="circle"></uv-loading-icon>
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* uv-picker
|
||||
* @description 选择器
|
||||
* @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ）
|
||||
* @property {String} title 顶部标题
|
||||
* @property {Array} columns 对象数组，设置每一列的数据
|
||||
* @property {Boolean} loading 是否显示加载中状态（默认 false ）
|
||||
* @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ）
|
||||
* @property {String} cancelText 取消按钮的文字（默认 '取消' ）
|
||||
* @property {String} confirmText 确认按钮的文字（默认 '确定' ）
|
||||
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ）
|
||||
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ）
|
||||
* @property {String} color 文字颜色（默认 '' ）
|
||||
* @property {String} activeColor 选中文字的颜色（默认 '' ）
|
||||
* @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ）
|
||||
* @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）
|
||||
* @property {Array} defaultIndex 各列的默认索引
|
||||
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ）
|
||||
* @event {Function} close 关闭选择器时触发
|
||||
* @event {Function} cancel 点击取消按钮触发
|
||||
* @event {Function} change 当选择值变化时触发
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
*/
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
export default {
|
||||
name: 'uv-picker',
|
||||
emits: ['confirm','cancel','close','change'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
computed: {
|
||||
// 为了解决支付宝不生效
|
||||
textStyle(){
|
||||
return (index,index1) => {
|
||||
const style = {};
|
||||
// #ifndef APP-NVUE
|
||||
style.display = 'block';
|
||||
// #endif
|
||||
if(this.color) {
|
||||
style.color = this.color;
|
||||
}
|
||||
if(this.activeColor && index1 === this.innerIndex[index]) {
|
||||
style.color = this.activeColor;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 上一次选择的列索引
|
||||
lastIndex: [],
|
||||
// 索引值 ，对应picker-view的value
|
||||
innerIndex: [],
|
||||
// 各列的值
|
||||
innerColumns: [],
|
||||
// 上一次的变化列索引
|
||||
columnIndex: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听默认索引的变化，重新设置对应的值
|
||||
defaultIndex: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setIndexs(n, true)
|
||||
}
|
||||
},
|
||||
// 监听columns参数的变化
|
||||
columns: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setColumns(n)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$refs.pickerPopup.open();
|
||||
},
|
||||
close() {
|
||||
this.$refs.pickerPopup.close();
|
||||
},
|
||||
popupChange(e) {
|
||||
if(!e.show) this.$emit('close');
|
||||
},
|
||||
// 获取item需要显示的文字，判别为对象还是文本
|
||||
getItemText(item) {
|
||||
if (this.$uv.test.object(item)) {
|
||||
return item[this.keyName]
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
},
|
||||
// 点击工具栏的取消按钮
|
||||
cancel() {
|
||||
this.$emit('cancel');
|
||||
this.close();
|
||||
},
|
||||
// 点击工具栏的确定按钮
|
||||
confirm() {
|
||||
// 在这里使用deepClone拷贝后，vue3会自动转换成原始对象，这样处理是因为cli项目可能出现不返回值的情况
|
||||
this.$emit('confirm', this.$uv.deepClone({
|
||||
indexs: this.innerIndex,
|
||||
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
|
||||
values: this.innerColumns
|
||||
}));
|
||||
if(this.closeOnClickConfirm) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
// 选择器某一列的数据发生变化时触发
|
||||
changeHandler(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail
|
||||
let index = 0,
|
||||
columnIndex = 0
|
||||
// 通过对比前后两次的列索引，得出当前变化的是哪一列
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
let item = value[i]
|
||||
if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
|
||||
// 设置columnIndex为当前变化列的索引
|
||||
columnIndex = i
|
||||
// index则为变化列中的变化项的索引
|
||||
index = item
|
||||
break // 终止循环，即使少一次循环，也是性能的提升
|
||||
}
|
||||
}
|
||||
this.columnIndex = columnIndex
|
||||
const values = this.innerColumns
|
||||
// 将当前的各项变化索引，设置为"上一次"的索引变化值
|
||||
this.setLastIndex(value)
|
||||
this.setIndexs(value)
|
||||
|
||||
this.$emit('change', {
|
||||
value: this.innerColumns.map((item, index) => item[value[index]]),
|
||||
index,
|
||||
indexs: value,
|
||||
// values为当前变化列的数组内容
|
||||
values,
|
||||
columnIndex
|
||||
})
|
||||
},
|
||||
// 设置index索引，此方法可被外部调用设置
|
||||
setIndexs(index, setLastIndex) {
|
||||
this.innerIndex = this.$uv.deepClone(index)
|
||||
if (setLastIndex) {
|
||||
this.setLastIndex(index)
|
||||
}
|
||||
},
|
||||
// 记录上一次的各列索引位置
|
||||
setLastIndex(index) {
|
||||
// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
|
||||
// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
|
||||
this.lastIndex = this.$uv.deepClone(index)
|
||||
},
|
||||
// 设置对应列选项的所有值
|
||||
setColumnValues(columnIndex, values) {
|
||||
// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
|
||||
this.innerColumns.splice(columnIndex, 1, values)
|
||||
// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
|
||||
let tmpIndex = this.$uv.deepClone(this.innerIndex)
|
||||
for (let i = 0; i < this.innerColumns.length; i++) {
|
||||
if (i > this.columnIndex) {
|
||||
tmpIndex[i] = 0
|
||||
}
|
||||
}
|
||||
// 一次性赋值，不能单个修改，否则无效
|
||||
this.setIndexs(tmpIndex)
|
||||
},
|
||||
// 获取对应列的所有选项
|
||||
getColumnValues(columnIndex) {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await this.$uv.sleep()
|
||||
})()
|
||||
return this.innerColumns[columnIndex]
|
||||
},
|
||||
// 设置整体各列的columns的值
|
||||
setColumns(columns) {
|
||||
this.innerColumns = this.$uv.deepClone(columns)
|
||||
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
|
||||
if (this.innerIndex.length === 0) {
|
||||
this.innerIndex = new Array(columns.length).fill(0)
|
||||
}
|
||||
},
|
||||
// 获取各列选中值对应的索引
|
||||
getIndexs() {
|
||||
return this.innerIndex
|
||||
},
|
||||
// 获取各列选中的值
|
||||
getValues() {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await this.$uv.sleep()
|
||||
})()
|
||||
return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$show-lines: 1;
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
.uv-picker {
|
||||
position: relative;
|
||||
|
||||
&__view {
|
||||
|
||||
&__column {
|
||||
@include flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
&__item {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
color: $uv-main-color;
|
||||
|
||||
&--disabled {
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.87);
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<uv-popup
|
||||
ref="pickerPopup"
|
||||
mode="bottom"
|
||||
:round="round"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
@change="popupChange"
|
||||
>
|
||||
<view class="uv-picker">
|
||||
<uv-toolbar
|
||||
v-if="showToolbar"
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="confirmColor"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
:title="title"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
></uv-toolbar>
|
||||
<picker-view
|
||||
class="uv-picker__view"
|
||||
:indicatorStyle="`height: ${$uv.addUnit(itemHeight)}`"
|
||||
:value="innerIndex"
|
||||
:immediateChange="immediateChange"
|
||||
:style="{
|
||||
height: `${$uv.addUnit(visibleItemCount * itemHeight)}`
|
||||
}"
|
||||
@change="changeHandler"
|
||||
>
|
||||
<picker-view-column
|
||||
v-for="(item, index) in innerColumns"
|
||||
:key="index"
|
||||
class="uv-picker__view__column"
|
||||
>
|
||||
<text
|
||||
v-if="$uv.test.array(item)"
|
||||
class="uv-picker__view__column__item uv-line-1"
|
||||
v-for="(item1, index1) in item"
|
||||
:key="index1"
|
||||
:style="[{
|
||||
height: $uv.addUnit(itemHeight),
|
||||
lineHeight: $uv.addUnit(itemHeight),
|
||||
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
|
||||
},textStyle(index,index1)]"
|
||||
>{{ getItemText(item1) }}</text>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view
|
||||
v-if="loading"
|
||||
class="uv-picker--loading"
|
||||
>
|
||||
<uv-loading-icon mode="circle"></uv-loading-icon>
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* uv-picker
|
||||
* @description 选择器
|
||||
* @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ）
|
||||
* @property {String} title 顶部标题
|
||||
* @property {Array} columns 对象数组，设置每一列的数据
|
||||
* @property {Boolean} loading 是否显示加载中状态（默认 false ）
|
||||
* @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ）
|
||||
* @property {String} cancelText 取消按钮的文字（默认 '取消' ）
|
||||
* @property {String} confirmText 确认按钮的文字（默认 '确定' ）
|
||||
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ）
|
||||
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ）
|
||||
* @property {String} color 文字颜色（默认 '' ）
|
||||
* @property {String} activeColor 选中文字的颜色（默认 '' ）
|
||||
* @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ）
|
||||
* @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）
|
||||
* @property {Array} defaultIndex 各列的默认索引
|
||||
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ）
|
||||
* @event {Function} close 关闭选择器时触发
|
||||
* @event {Function} cancel 点击取消按钮触发
|
||||
* @event {Function} change 当选择值变化时触发
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
*/
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
export default {
|
||||
name: 'uv-picker',
|
||||
emits: ['confirm','cancel','close','change'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
computed: {
|
||||
// 为了解决支付宝不生效
|
||||
textStyle(){
|
||||
return (index,index1) => {
|
||||
const style = {};
|
||||
// #ifndef APP-NVUE
|
||||
style.display = 'block';
|
||||
// #endif
|
||||
if(this.color) {
|
||||
style.color = this.color;
|
||||
}
|
||||
if(this.activeColor && index1 === this.innerIndex[index]) {
|
||||
style.color = this.activeColor;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 上一次选择的列索引
|
||||
lastIndex: [],
|
||||
// 索引值 ，对应picker-view的value
|
||||
innerIndex: [],
|
||||
// 各列的值
|
||||
innerColumns: [],
|
||||
// 上一次的变化列索引
|
||||
columnIndex: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听默认索引的变化，重新设置对应的值
|
||||
defaultIndex: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setIndexs(n, true)
|
||||
}
|
||||
},
|
||||
// 监听columns参数的变化
|
||||
columns: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setColumns(n)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$refs.pickerPopup.open();
|
||||
},
|
||||
close() {
|
||||
this.$refs.pickerPopup.close();
|
||||
},
|
||||
popupChange(e) {
|
||||
if(!e.show) this.$emit('close');
|
||||
},
|
||||
// 获取item需要显示的文字，判别为对象还是文本
|
||||
getItemText(item) {
|
||||
if (this.$uv.test.object(item)) {
|
||||
return item[this.keyName]
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
},
|
||||
// 点击工具栏的取消按钮
|
||||
cancel() {
|
||||
this.$emit('cancel');
|
||||
this.close();
|
||||
},
|
||||
// 点击工具栏的确定按钮
|
||||
confirm() {
|
||||
// 在这里使用deepClone拷贝后，vue3会自动转换成原始对象，这样处理是因为cli项目可能出现不返回值的情况
|
||||
this.$emit('confirm', this.$uv.deepClone({
|
||||
indexs: this.innerIndex,
|
||||
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
|
||||
values: this.innerColumns
|
||||
}));
|
||||
if(this.closeOnClickConfirm) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
// 选择器某一列的数据发生变化时触发
|
||||
changeHandler(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail
|
||||
let index = 0,
|
||||
columnIndex = 0
|
||||
// 通过对比前后两次的列索引，得出当前变化的是哪一列
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
let item = value[i]
|
||||
if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
|
||||
// 设置columnIndex为当前变化列的索引
|
||||
columnIndex = i
|
||||
// index则为变化列中的变化项的索引
|
||||
index = item
|
||||
break // 终止循环，即使少一次循环，也是性能的提升
|
||||
}
|
||||
}
|
||||
this.columnIndex = columnIndex
|
||||
const values = this.innerColumns
|
||||
// 将当前的各项变化索引，设置为"上一次"的索引变化值
|
||||
this.setLastIndex(value)
|
||||
this.setIndexs(value)
|
||||
|
||||
this.$emit('change', {
|
||||
value: this.innerColumns.map((item, index) => item[value[index]]),
|
||||
index,
|
||||
indexs: value,
|
||||
// values为当前变化列的数组内容
|
||||
values,
|
||||
columnIndex
|
||||
})
|
||||
},
|
||||
// 设置index索引，此方法可被外部调用设置
|
||||
setIndexs(index, setLastIndex) {
|
||||
this.innerIndex = this.$uv.deepClone(index)
|
||||
if (setLastIndex) {
|
||||
this.setLastIndex(index)
|
||||
}
|
||||
},
|
||||
// 记录上一次的各列索引位置
|
||||
setLastIndex(index) {
|
||||
// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
|
||||
// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
|
||||
this.lastIndex = this.$uv.deepClone(index)
|
||||
},
|
||||
// 设置对应列选项的所有值
|
||||
setColumnValues(columnIndex, values) {
|
||||
// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
|
||||
this.innerColumns.splice(columnIndex, 1, values)
|
||||
// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
|
||||
let tmpIndex = this.$uv.deepClone(this.innerIndex)
|
||||
for (let i = 0; i < this.innerColumns.length; i++) {
|
||||
if (i > this.columnIndex) {
|
||||
tmpIndex[i] = 0
|
||||
}
|
||||
}
|
||||
// 一次性赋值，不能单个修改，否则无效
|
||||
this.setIndexs(tmpIndex)
|
||||
},
|
||||
// 获取对应列的所有选项
|
||||
getColumnValues(columnIndex) {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await this.$uv.sleep()
|
||||
})()
|
||||
return this.innerColumns[columnIndex]
|
||||
},
|
||||
// 设置整体各列的columns的值
|
||||
setColumns(columns) {
|
||||
this.innerColumns = this.$uv.deepClone(columns)
|
||||
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
|
||||
if (this.innerIndex.length === 0) {
|
||||
this.innerIndex = new Array(columns.length).fill(0)
|
||||
}
|
||||
},
|
||||
// 获取各列选中值对应的索引
|
||||
getIndexs() {
|
||||
return this.innerIndex
|
||||
},
|
||||
// 获取各列选中的值
|
||||
getValues() {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await this.$uv.sleep()
|
||||
})()
|
||||
return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$show-lines: 1;
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
.uv-picker {
|
||||
position: relative;
|
||||
|
||||
&__view {
|
||||
|
||||
&__column {
|
||||
@include flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
&__item {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
color: $uv-main-color;
|
||||
|
||||
&--disabled {
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.87);
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,90 +1,90 @@
|
||||
{
|
||||
"id": "uv-picker",
|
||||
"displayName": "uv-picker 选择器 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.10",
|
||||
"description": "uv-picker 此选择器用于单列，多列，多列联动的选择场景...",
|
||||
"keywords": [
|
||||
"uv-picker",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"picker",
|
||||
"联动选择"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-popup",
|
||||
"uv-loading-icon",
|
||||
"uv-toolbar"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"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",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
{
|
||||
"id": "uv-picker",
|
||||
"displayName": "uv-picker 选择器 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.10",
|
||||
"description": "uv-picker 此选择器用于单列，多列，多列联动的选择场景...",
|
||||
"keywords": [
|
||||
"uv-picker",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"picker",
|
||||
"联动选择"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-popup",
|
||||
"uv-loading-icon",
|
||||
"uv-toolbar"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"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",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,21 +1,21 @@
|
||||
## Picker 选择器
|
||||
|
||||
> **组件名：uv-picker**
|
||||
|
||||
此选择器用于单列，多列，多列联动的选择场景。
|
||||
|
||||
`uv-datetime-picker`等组件也用到了该组件，功能完善，需要特别注意的是`columns`参数的形式是数组嵌套。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/picker.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
## Picker 选择器
|
||||
|
||||
> **组件名：uv-picker**
|
||||
|
||||
此选择器用于单列，多列，多列联动的选择场景。
|
||||
|
||||
`uv-datetime-picker`等组件也用到了该组件，功能完善，需要特别注意的是`columns`参数的形式是数组嵌套。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/picker.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
Reference in New Issue
Block a user