vantカスタム二級メニュー操作
(1)コンポーネント説明:
本コンポーネントは、二級連動の効果を解決するために作成されたもので、ここでは省と都市の分離効果を利用して、具体的に効果を示しています。
(2)コンポーネントコード:
フィルタ機能を組み合わせて使用することもできます。
補足知識:vant 2級連動pickerセレクタ
余計なことを言わないで、コードを見てください。
<van-picker:columns=「columns」@change=「onChange」/>
本コンポーネントは、二級連動の効果を解決するために作成されたもので、ここでは省と都市の分離効果を利用して、具体的に効果を示しています。
(2)コンポーネントコード:
<template>
<div>
<button @click="showM">{{ value || " " }}</button>
<button @click="showC">{{ value2 || " " }}</button>
<!-- -->
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
</van-popup>
<!-- -->
<van-popup v-model="showPicker2" position="bottom">
<van-picker
show-toolbar
:columns="columns2"
@confirm="onConfirm2"
@cancel="showPicker2 = false"
/>
</van-popup>
</div>
</template>
<script>
export default {
mounted() {},
data() {
return {
value: "",
value2: "",
columns: [" ", " ", " "],
city: [
{
name: " ",
value: [" ", " "]
},
{
name: " ",
value: [" ", " "]
},
{
name: " ",
value: [" ", " "]
}
],
showPicker: false,
showPicker2: false,
columns2: []
};
},
methods: {
onConfirm(value) {
this.value = value;
this.value2 = "";
this.showPicker = false;
},
onConfirm2(value) {
this.value2 = value;
this.showPicker2 = false;
},
showM() {
this.showPicker = true;
},
showC() {
if (this.value) {
let self = this;
self.showPicker2 = true;
self.city.forEach(v => {
if (v.name == self.value) {
self.value2 = self.name;
self.columns2 = v.value;
}
});
} else {
}
}
},
components: {}
};
</script>
<style lang="scss" scoped>
</style>
(3)展示効果:フィルタ機能を組み合わせて使用することもできます。
補足知識:vant 2級連動pickerセレクタ
余計なことを言わないで、コードを見てください。
<van-picker:columns=「columns」@change=「onChange」/>
const citys = {
' ': [' ', ' ', ' ', ' ', ' '],
' ': [' ', ' ', ' ', ' ', ' ']
};
data:{
columns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: citys[' '],
className: 'column2',
defaultIndex: 2
}
],
}
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
console.log(values)
},
以上のvantは二級メニューをカスタマイズして操作します。つまり、小編集は皆さんに全部の内容を共有しています。参考にしてもらいたいです。どうぞよろしくお願いします。