Mobile selector component based on vant secondary encapsulation
<template>
<div>
<van-field
v-model="MobileValue"
:label="title"
readonly
:placeholder="placeholder"
@click-input="isShow = true"
:right-icon="clear && MobileValue ? 'clear' : 'arrow'"
@click-right-icon="clear && (MobileValue = '')"
input-align="right"
/>
<van-popup v-model="isShow" position="bottom">
<van-search
v-if="search"
v-model="SearchValue"
placeholder="Please enter your search terms"
shape="round"
@input="handleSearch"
input-align="center"
>
</van-search>
<van-picker
show-toolbar
value-key="label"
:title="placeholder"
:columns="options"
@cancel="isShow = false"
@confirm="handleConfirm"
/>
</van-popup>
</div>
</template>
<script>
/ * *
* Component Description Mobile phone pop-up box selector component
*
* @param {String} value Binds the value of the selection box
* @param {String} title Menu title
* @param {String} placeholder menu hints
* @param {Array} data Array of objects to configure the data displayed in each column
* @param {Boolean} multiple specifies whether multiple selection is enabled
* @param {Boolean} search Specifies whether to enable the search function. The function is disabled by default
* @param {Boolean} clear Specifies whether to clear the function. This function is disabled by default
* /
export default {
name: "MobileMenu".
props: {
title: {
type: String,
required: true.
default: ""
},
placeholder: {
type: String,
required: true.
default: ""
},
value: {
required: true.
default: ""
},
data: {
type: Array,
required: true.
default: []
},
multiple: {
type: Boolean,
default: false
},
search: {
type: Boolean,
default: false
},
clear:{
type: Boolean,
default: false
}
},
data() {
return {
isShow: false.
SearchValue: "".
options: this.data
};
},
computed: {
MobileValue: {
get() {
let data = this.data.filter(item => item.value === this.value)
return data.length === 0 ? this.value : data[0].label;
},
set(val) {
console.log(val);
this.$emit("update:value", val);
}
}
},
methods: {
handleConfirm(res) {
if (this.multiple) {
if (this.MobileValue === "") {
this.MobileValue = res.value;
} else {
this.MobileValue.includes(res.value)
? this.$toast("Do not double select")
: (this.MobileValue = this.MobileValue + "," + res.value);
}
} else {
this.MobileValue = res.value;
}
this.isShow = false;
},
handleSearch() {
this.options = this.data.filter(item =>
item.label.includes(this.SearchValue)
);
}
}
};
</script>
Copy the coderendering
