标签：picker 生命周期 vant dictionary value ui 组件 下拉框
基于vant-ui的vant-picker二次封装
文章目录
前言
在项目中表单项经常会出现下拉选择框，但是在vant中没有提供直接的select组件，但是可以使用Field、Popup和Picker这三个组件组合来完成。
如果页面中只有一个select这样做做也还可以，但是页面中出现多个select就有点繁琐了，所以本文进行组件的封装。
本文主要介绍了不封装选择框的用法和封装组件后的用法，通过对比可以看出封装后代码简洁性。
一、vant提供的组件用法
1.代码片段
mfCusPersonJobInsert.vue
<template>
<div>
<van-field
readonly
clickable
:value="mfCusCustomer.idTypeName"
label="证件类型"
placeholder="请选择证件类型"
@click="idTypeshow = true"
input-align="right"
>
</van-field>
<!-- 证件类型选择器 -->
<van-popup v-model="idTypeshow" position="bottom">
<van-picker
show-toolbar
:columns="idTypecolumn"
@cancel="idTypeshow = false"
@confirm="onConfirm"
/>
</van-popup>
</div>
</template>
<script>
import dictionary from '@/utils/dictionary'
export default {
name:'mfCusPersonJobInsert',
//import引入的组件需要注入到对象中才能使用
components: {},
props: {
},
data() {
//这里存放数据
return {
mfCusCustomer:{
},//客户实体
idTypecolumn: dictionary.dictionary.idType,
idTypeshow: false,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
//证件类型
onConfirm(idType) {
this.mfCusCustomer.idTypeName = idType.text;
this.mfCusCustomer.idTypeId = idType.keyId;
this.idTypeshow = false; //此属性关闭下拉框组件的弹层
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss'>
</style>
2.下拉框数据源
dictionary.js
export default{
dictionary:{
idType:[
{text:"身份证",keyId:"0"},
{text:"护照",keyId:"2"},
{text:"军官证",keyId:"3"},
{text:"港澳居民来往内地通行证",keyId:"5"},
{text:"其他",keyId:"10"}
],
}
}
3.实现效果
二、封装组件
1.引入vant库
import Vant from 'vant'
Vue.use(Vant);
2.组件实现
<template>
<div>
<!-- select选择框文本对应的id -->
<van-field
v-model="nameId"
:name="$attrs.nameId"
type="hidden"
v-show="false"
/>
<!-- select选择框文本 -->
<van-field
v-model="result"
v-bind="$attrs"
readonly
:name="name"
@click="show = !show"
>
<template #right-icon>
<van-icon class="iconfont" class-prefix="icon" name="xiala" size="18" color="#CCCCCCC"/>
</template>
</van-field>
<van-popup v-model="show" position="bottom">
<van-picker
:columns="columns"
show-toolbar
:title="$attrs.label"
@cancel="show = !show"
@confirm="onConfirm"
/>
</van-popup>
</div>
</template>
<script>
export default {
name:'VantFieldSelect',
model: {
prop: "selectValue"
},
props: {
columns: {
type: Array
},
selectValue: {
type: String
},
name:{
type: String //父组件传进来一个name
}
},
data() {
return {
show: false,
result: this.selectValue,
nameId:''
};
},
methods: {
onConfirm(value) {
//value.text value.keyId
this.result = value.text;
this.nameId = value.keyId;
this.show = !this.show;
this.$emit("getMessage", this.name,value.keyId);//把value值传给父组件
},
},
watch: {
selectValue: function(newVal) {
this.result = newVal;
},
result(newVal) {
this.$emit("input", newVal);
}
}
};
</script>
<style></style>
3.组件调用
mfCusPersBaseInfoInsert.vue
<template>
<div>
<van-form validate-first @submit="onSubmit">
<!-- 证件类型 -->
<vant-field-select
label="证件类型"
name='idTypeText'
nameId="idType"
placeholder="请选择"
v-model="formData.idTypeText"
:columns="idTypecolumn"
@getMessage="setSelectValue"
:rules="[{ validator, message: '请输入正确内容' }]"
/>
<div style="margin: 16px;">
<van-button round block type="info" native-type="submit">提交</van-button>
</div>
</van-form>
</div>
</template>
<script>
import dictionary from '@/utils/dictionary'
import VantFieldSelect from '@/components/VantFieldSelect'
export default {
name:'mfCusPersBaseInfoInsert',
//import引入的组件需要注入到对象中才能使用
components: {
VantFieldSelect,
},
props: {
},
data() {
//这里存放数据
return {
formData:{
idTypeText:'',
idType:"",
},//客户实体
idTypecolumn: dictionary.dictionary.idType,
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
setSelectValue(name,value){
let a=name.split("Text")[0];
this.formData[a]=value;
// document.getElementById(name).value=value;
},
onSubmit(values) {
debugger
this.formData;
console.log('submit', values);
},
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss'>
</style>
4.组件效果
5.表单提交时获取下拉框文本和下拉框文本对应的key值
6.自定义formData中下拉框文本和下拉框文本对应的key值
总结
实际应用中需要拿到下拉选择的id值，组件封装中又添加了一个van-field，用于存储下拉框id的值，同时在表单提交中和data中也可以拿到下拉框文本和id，这样就完没解决了代码的复用。
标签：picker,生命周期,vant,dictionary,value,ui,组件,下拉框 来源： https://blog.csdn.net/jslong66/article/details/112387684
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。