vant下拉单选

参考@官网文档

代码：

<template>
  <div>
    <van-field readonly="" is-link @click="show = true" v-model="inputval" name="测试单选" label="测试单选" />
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        inputval: '',
        show: false,
        actions: [{
          name: '选项一'
        }, {
          name: '选项二'
        }, {
          name: '选项三'
        }],
      };
    },
    methods: {
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.show = false;
        this.inputval = item.name
      },
    },
  };
</script>
<style>
</style>

View Code