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.1 KiB
2.1 KiB
基本用法
在 template
中使用组件
<superwei-combox :candidates="candidates" placeholder="请选择或输入" v-model="inputValue" @input="input" @select="select"></superwei-combox>
<script>
export default {
data() {
return {
candidates: ['选项一','选项二','选项三','选项四','...']
}
},
methods: {
input(e){
console.log(e) // 选项一
},
select(e){
console.log(e) // 选项一
}
}
}
</script>
<superwei-combox :candidates="candidates" :isJSON="true" keyName="name" placeholder="请选择或输入" v-model="inputValue" @input="input" @select="select"></superwei-combox>
<script>
export default {
data() {
return {
candidates: [{
id: '1',
name: '选项一'
}, {
id: '2',
name: '选项二',
disabled: true // 单独设置disabled后即可禁用该选项
}, {
id: '3',
name: '...'
}]
}
},
methods: {
input(e){
console.log(e) // 选项一
},
select(e){
console.log(e) // {id: '1',name: '选项一'}
}
}
}
</script>
API
Combox Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
label | String | - | 标签文字 |
value | String | - | combox的值 |
labelWidth | String | auto | 标签宽度,有单位字符串,如:'100px' |
placeholder | String | - | 输入框占位符 |
candidates | Array/String | [] | 候选字段 |
emptyTips | String | 无匹配项 | 无匹配项时的提示语 |
selectedBackground | String | #f5f7fa | 选中项背景颜色 |
selectedColor | String | #409eff | 选中项文字颜色 |
isJSON | Boolean | false | 候选字段是否是json数组 |
keyName | String | - | json数组显示的字段值 |
disabledColor | String | #ababac | 禁用项文字颜色 |
isAllowCreate | Boolean | true | 是否允许用户创建新条目 |
Combox Events
事件称名 | 说明 | 返回值 |
---|---|---|
@input | combox输入事件 | 返回combox输入值 |
@select | combox选择事件 | 返回combox选项值 |