vue 多项选择器 picker组件——动态绑定数组实现多项选择器

<template>
  <van-field
    readonly
    clickable
    label="城市"
    :value="selectedCity"
    placeholder="选择城市"
    @click="showCityPicker = true"
  />
  <van-popup v-model="showCityPicker" position="bottom">
    <van-picker
      show-toolbar
      :columns="cityColumns"
      @cancel="showCityPicker = false"
      @confirm="onCityConfirm"
    />
  </van-popup>
</template>
 
<script>
import { ref } from 'vue';
import { Picker, Popup, Field } from 'vant';
 
export default {
  components: {
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
  },
  setup() {
    const cityColumns = ref([
      { text: '北京', value: 'BJ' },
      { text: '上海', value: 'SH' },
      // ...更多城市
    ]);
    const selectedCity = ref('');
    const showCityPicker = ref(false);
 
    const onCityConfirm = (value) => {
      selectedCity.value = value;
      showCityPicker.value = false;
    };
 
    return {
      cityColumns,
      selectedCity,
      showCityPicker,
      onCityConfirm,
    };
  },
};
</script>

这段代码展示了如何使用Vant Weapp的van-field和van-picker组件创建一个城市选择器。cityColumns是一个响应式数组，包含了所有可能的城市选项。用户点击字段时会弹出一个包含所有城市的选择器，选择城市后会更新字段的值并关闭选择器。这个例子简单易懂，并且展示了如何在Vue组件中使用Vant Weapp组件和处理用户输入。