更新记录
1.0.8(2022-06-23)
点击空白处自动关闭内容选择框
1.0.7(2022-05-20)
优化了箭头的显示
查看更多
平台兼容性
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>