本文介绍如何基于Vant库封装一个自定义的select组件和checkbox多选组件，实现类似vant picker的效果，简化项目中对于选择器的使用，包括单选和多选功能，提供详细的组件代码实现和事件监听。
官方推荐picker，但是我们项目用picker还要搭配Popup和cell、field，维护太太麻烦，所以自己封装一个
select单选
//封装VanFieldSelectPicker组件
v-model="resultLabel"
v-bind="$attrs"
readonly
is-link
input-align="right"
@click="show = !show"
/>
v-bind="$attrs"
:columns="columns"
show-toolbar
@cancel="cancel"
@confirm="onConfirm"
@change="change"
:value-key="this.option.label"
/>
export default {
name: 'VanFieldSelectPicker',
model: {
prop: 'selectValue'
},
props: {
columns: {
type: Array,
default: function () {
return []
}
},
selectValue: {
type: [String, Number],
default: ''
},
option: {
type: Object,
default: function () {
return { label: 'label', value: 'value' }
}
}
},
computed: {
resultLabel: {//双向绑定的数据做修改需要用get/set
get () {
const res = this.columns.filter(item => {
return item[this.option.value] === this.resultValue
})
return res.length ? res[0][this.option.label] : ''
},
set () {
}
}
},
data () {
return {
show: false,//Popup是否弹出
resultValue: this.selectValue //初始选中数据
}
},
methods: {
onConfirm (value, index) {//确定
this.resultValue = value[this.option.value]
this.show = !this.show
this.$emit('confirm', value, index, this.resultValue)
最低0.47元/天 解锁文章
1717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
