You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
2 years ago | |
---|---|---|
.. | ||
readme.md | 2 years ago | |
w-select.vue | 2 years ago |
readme.md
props
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
width | string | '300rpx' | 选择框宽度 |
height | string | '60rpx' | 选择框高度 |
round | boolean | true | 是否开启圆角 |
bgColor | string | '#fff' | 选择框的背景颜色 |
color | string | '#606266' | 字体颜色 |
placeholderColor | string | 'color:#bcbec4' | 提示文字的字体颜色 |
defaultValue | string | '请选择' | 默认显示的名称 |
valueName | string | 'value' | 显示的内容字段名,必传 |
list | array | [] | 展示的内容列表 |
showClose | boolean | true | 是否显示删除按钮 |
multiple | boolean | false | 是否开启多选 |
filterable | boolean | false | 是否开启搜索功能,开启后直接输入值不选择也可以保存内容 |
events
事件名 | 说明 |
---|---|
change | 选择的内容改变时触发,返回的参数为列表的item |
使用举例
需要绑定的值通过v-model
绑定,如下面的chooseValue
,需要获取item的值可以监听@change
事件
开启多选multiple
时,双向绑定的值为数组类型,在change事件中根据自己需求进行处理。
valueName
属性必须传,告知组件需要显示的是什么值
<template>
<view class="login">
<w-select style="margin-left: 20rpx;"
v-model='chooseValue'
defaultValue="所有审批人"
:list='list'
valueName='content'
@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>