最近项目中需要在移动端实现一个下拉选择器的功能,UI框架使用的是VantUI,Vant并没有像ElementUI提供现成的下拉选择器,所以这边需要使用vant的cell、popup、picker组件二次封装一个选择器组件。
封装
<template>
<div class="ss-picker">
<van-cell
:title="label"
:value="value"
is-link
@click="open"
/>
<van-popup
v-model="show"
:close-on-click-overlay="false"
position="bottom"
>
<van-picker
:columns="columns"
:value-key="valueKey"
show-toolbar
@cancel="cancel"
@confirm="confirm"
/>
</van-popup>
</div>
</template>
<script>
export default {
name: "ssPicker",
model: {
prop: "selectValue",
event: "select"
},
props: {
selectValue: {
type: Object,
},
show: {
type: Boolean,
default: false
},
label: {
type: String,
},
value: {
type: String,
},
columns: {
type: Array,
},
valueKey: {
type: String,
default: "text"
}
},
methods: {
open() {
this.$emit("open")
},
close() {
this.$emit("update:show", false)
},
// 确认
confirm(val) {
this.$emit("select", val)
this.close()
},
// 取消
cancel() {
this.close()
},
}
}
</script>
全局注册
在main.js全局注册一下此组件,这样就不用每个页面都引入了,直接在需要用的页面使用即可。
import ssPicker from "@/components/ssPicker/index.vue"
Vue.component("ssPicker", ssPicker)
使用文档
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
show | van-popup的显示 | Boolean | false |
label | van-cell左侧标题 | String | 无 |
value | van-cell右侧数据 | String | 无 |
columns | van-picker的数据列表 | Array | 无 |
valueKey | van-picker选项文字对应的键名 | String | text |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
open | 打开van-popup | 无 |
select | 点击van-picker选中数据 | 当前选中行数据 |
使用方法
如果单纯的只是选择后绑定数据,可以直接使用v-model绑定。
如果需要进行其他复杂的操作,可以使用@select绑定方法,该方法返回picker选中的内容。
下面demo中v-model
和@select
实现的效果都是一样的,给this.picker.active
赋上选中的值,可以只保留v-model,不需要再用@select。
Demo
<ssPicker
v-model="picker.active"
:columns="picker.list"
:show.sync="picker.show"
:value="picker.active.text?picker.active.text:'请选择测试内容'"
valueKey="text"
label="测试内容"
@open="picker.show=true"
@select="selectPicker"
>
</ssPicker>
export default {
data() {
return {
// 选择器
picker: {
show: false,
active: {},
list: []
},
}
},
methods: {
selectPicker(val){
this.picker.active = val
}
}
}
结语
本次组件封装时间比较仓促,还有很多没完善的地方,后面找时间再优化一下吧。如果有问题,欢迎交流指正。