更新记录

1.0.8(2022-06-23)

点击空白处自动关闭内容选择框

1.0.7(2022-05-20)

优化了箭头的显示

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
3.3.1 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 小红书小程序
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

在使用本组件前请确保已经安装scss

目前只测试了H5,APP,小程序可以正常使用,其他的请自测。

在微信小程序中keyName必须传,否则会报错

props

名称 类型 默认值 说明
width string '300rpx' 选择框宽度
height string '60rpx' 选择框高度
bgColor string '#fff' 选择框的背景颜色
defaultValue string '所有人' 默认显示的名称
keyName string 'id' 绑定的key值,唯一
valueName string 'value' 显示的内容字段名
list array [] 展示的内容列表
showClose boolean true 是否显示删除按钮
multiple boolean false 是否开启多选
filterable boolean false 是否开启搜索功能

events

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

使用举例

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

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

<template>
    <view>
        <w-select  v-model='chooseValue' defaultValue="所有审批人" :list='list' keyName='id' valueName='content'
          @change='change'></w-select>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                chooseValue: "",
                list: [{
                    id: 1,
                    content: '11'
                }, {
                    id: 2,
                    content: '22'
                }, {
                    id: 3,
                    content: '33'
                }]
            };
        },
        methods: {
            change(e) {
                console.log('chooseValue', this.chooseValue)
            }
        },
    }
</script>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问