Select 选择组件

这个组件继承了 vant2 的 van-field 和 van-action-sheet 组件,需要更多参数可以参考这两个组件

action-sheet (opens new window)

field (opens new window)

• 固定数据
• 自定义弹出框内容
• 属性/事件/参数
  • Attributes
  • Events
  • Slot

固定数据

固定数据:

<template>
  <div class="device-ios">
    <div class="device-inner">
      <BaSelect
        v-model="yhzgtype.value"
        :select-options="yhzgtype.data"
        placeholder="请选择.."
        label="固定数据:"
        required
        @cancel="onCancel('yhzgtype')"
        @select="data => onSelect(data, 'yhzgtype')"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      yhzgtype: {
        value: '',
        data: {
          title: '固定数据',
          cancelText: '取消',
          actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }]
        }
      }
    };
  },
  mounted() {},
  methods: {
    onSelect(data, type) {
      console.log('选择类型', data, type);
      this[type].show = 'hide';
      switch (type) {
        case 'yhzgtype':
          this[type].value = data.name;
          break;
      }
    },
    onCancel(type) {
      this[type].value = '';
    }
  }
};
</script>

显示代码 复制代码 复制代码

自定义弹出框内容

插槽:

<template>
  <div class="device-ios">
    <div class="device-inner">
      <BaSelect
        v-model="zgterm.value"
        @click="zgterm.show = 'show'"
        :select-show="zgterm.show"
        placeholder="请选择.."
        label="插槽:"
        :select-options="{ title: '标题' }"
        required
      >
        <div style="height: 400px; overflow: auto">
          <van-cell-group>
            <van-cell
              v-for="item in 40"
              :title="'单元格' + item"
              :value="'单元格' + item"
              @click="onSelect('内容' + item, 'zgterm')"
              is-link
            />
          </van-cell-group>
        </div>
      </BaSelect>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zgterm: {
        value: '',
        show: 'hide'
      }
    };
  },
  methods: {
    onSelect(data, type) {
      console.log('选择类型', data, type);
      this.zgterm.show = 'hide';
      switch (type) {
        case 'zgterm':
          this.zgterm.value = data;
          break;
      }
    }
  }
};
</script>

显示代码 复制代码 复制代码

属性/事件/参数

---

Attributes

参数	说明	类型	可选值	默认值
v-model	输入框的值	string	—	—
select-options	接收 van-action-sheet 的所有 props	Object	—	—
label	输入框左侧标题	string	—	—
required	输入框必填*号	boolean	true/false	true
placeholder	输入框提示文字	string	—	—
select-show	弹窗是否显示	string	show/hide	hide

Events

事件名称	说明	回调参数
click	输入框点击事件	无
close	弹出框关闭事件,固定数据模式生效	无
select	弹出框选中事件,固定数据模式生效	无

Slot

名称	说明
default	自定义弹出框内容