更新记录
1.0.4(2025-06-25) 下载此版本
- 更新说明文档
1.0.3(2025-06-24) 下载此版本
修复change事件多次触发问题
1.0.2(2024-11-07) 下载此版本
- 修复vue2数据绑定问题
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
nx-picker
简介
官方的 picker 只不支持双向绑定,而且绑定的还只是索引,不能关联数组对象中的 value 值,比较麻烦,所以改造优化一下
用法
主要工作是配置配置好数据源 range
,列表显示的值 range-key
, 绑定的value值 range-value
<template>
<nx-picker v-model="currentType" :range="typeList" range-key="label" range-value="value" @change="changeType">
切换
</nx-picker>
</template>
<script>
export default {
data() {
return {
currentType: '',
typeList: [
{
value: 1,
label: '测试1'
},
{
value: 2,
label: '测试2'
}
]
}
},
methods: {
changeType: function(e) {
console.log(this.currentType);
}
}
}
</script>
核心处理逻辑
<template>
<picker mode="selector" :value="currentIndex" :range="range" :range-key="rangeKey" @change="handleChange">
<slot :label="label"></slot>
</picker>
</template>
<script>
export default {
props: {
range: {
type: Array,
default: () => [],
},
strokeWidth: {
type: Number,
default: 10,
},
activeColor: {
type: String,
default: '#42b983',
},
rangeKey: {
type: String,
default: ''
},
rangeValue: {
type: String,
default: ''
},
modelValue: {
type: [String, Number],
default: ''
},
value: {
type: [String, Number],
default: ''
},
},
model: {
prop: 'value',
event: 'input'
},
computed: {
innerValue() {
// #ifdef VUE2
return this.value
// #endif
// #ifdef VUE3
return this.modelValue
// #endif
}
},
data() {
return {
currentIndex: 0,
label: ''
}
},
watch: {
innerValue: {
handler(newVal, oldVal) {
this.currentIndex = this.getIndex(newVal)
this.label = this.range[this.currentIndex][this.rangeKey]
},
immediate: true // 默认值 false,首次不触发
}
},
methods: {
handleChange: function(e) {
let index = e.detail.value
this.currentIndex = index
this.label = this.range[this.currentIndex][this.rangeKey]
this.$emit('update:modelValue', this.getValue(index))
this.$emit('input', this.getValue(index))
},
getValue: function(index) {
const value = this.range[index][this.rangeValue]
return value
},
getIndex: function(val) {
let index = 0
this.range.some((item, i) => {
if (item[this.rangeValue] === val) {
index = i
}
return item[this.rangeValue] === val
})
return index
},
getLabel: function(index) {
const label = this.range[index][this.rangeKey]
return label
}
}
}
</script>
<style>
</style>