更新记录

1.2.3（2024-04-24） 下载此版本

修复了默认回显问题

之前版本的defaultValue属性更名为placeholder，更符合语义化

1.2.2（2023-11-17） 下载此版本

兼容vue3

1.2.1（2023-11-16） 下载此版本

更新文档描述，修复一个小问题，更新图片展示

平台兼容性

props

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

events

基本使用

绑定的值通过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>