aircraft-pilot/components/w-select

props

名称	类型	默认值	说明
width	string	'200px'	选择框宽度
height	string	'30px'	选择框高度
bgColor	string	'#fff'	选择框背景颜色
placeholder	string	'请选择'	输入框占位文本
valueName	string	'label'	显示的内容字段名
keyName	string	'value'	绑定的内容字段名
list	array	[]	展示的内容列表
showClose	boolean	true	是否显示删除按钮
multiple	boolean	false	是否开启多选
filterable	boolean	false	是否开启搜索功能，开启后直接输入值不选择也可以保存内容

该组件默认下拉选择器是从底部弹出，当检测到底部高度不足时则会在上面弹出

events

事件名	说明
change	选择的内容改变时触发，返回的参数为列表的 item

基本使用

绑定的值通过v-model绑定，如下面的chooseValue，需要获取 item 的值可以监听@change事件

<template>
  <view class="login">
    <w-select
      style="margin-left: 20rpx;"
      v-model="chooseValue"
      :list="list"
      valueName="content"
      keyName="id"
      @change="change"
    >
    </w-select>
  </view>
</template>
<script>
export default {
  data() {
    return {
      chooseValue: "",
      list: [
        {
          id: 1,
          content: "张三",
        },
        {
          id: 2,
          content: "李四",
        },
        {
          id: 3,
          content: "王五",
        },
      ],
    };
  },
  methods: {
    change(e) {
      console.log("chooseValue", this.chooseValue);
    },
  },
};
</script>

多选

多选开启multiple属性，双向绑定的值必须为数组类型，在 change 事件中根据自己需求进行处理。

<template>
  <w-select
    v-model="chooseValue"
    :list="list"
    multiple
    valueName="content"
    keyName="id"
    @change="change"
  >
  </w-select>
</template>
<script>
export default {
  data() {
    return {
      chooseValue: [],
      list: [
        {
          id: 1,
          content: "张三",
        },
        {
          id: 2,
          content: "李四",
        },
        {
          id: 3,
          content: "王五",
        },
      ],
    };
  },
  methods: {
    change(e) {
      console.log("chooseValue", this.chooseValue);
    },
  },
};
</script>