mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
171 lines
7.0 KiB
Markdown
171 lines
7.0 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# Select 选择器
|
||
|
||
## 概述
|
||
使用模拟的增强下拉选择器来代替浏览器原生的选择器。
|
||
|
||
## 代码示例
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="基础用法" template="ui/templates/select/1.html">
|
||
<template v-slot:demo>
|
||
<Wb-select v-model="value1">
|
||
<wb-option :value="1" label="北京市"></wb-option>
|
||
<wb-option :value="2">上海市</wb-option>
|
||
<wb-option :value="3" disabled>深圳市</wb-option>
|
||
<wb-option :value="4">杭州市</wb-option>
|
||
<wb-option :value="5">南京市</wb-option>
|
||
<wb-option :value="6">重庆市</wb-option>
|
||
</Wb-select>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>Wb-select内部嵌套Wb-option使用，类似原生select内部嵌套option</p>
|
||
<p>Wb-selec默认宽度是100%</p>
|
||
<p>设置Wb-option为disabled表示禁用此选项</p>
|
||
<p>当选择一项时触发on-change事件</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="多选" template="ui/templates/select/2.html">
|
||
<template v-slot:demo>
|
||
<Wb-select v-model="value2" multiple :multiple-limit="2">
|
||
<wb-option :value="1" label="北京市"></wb-option>
|
||
<wb-option :value="2">上海市</wb-option>
|
||
<wb-option :value="3">深圳市</wb-option>
|
||
<wb-option :value="4">杭州市</wb-option>
|
||
<wb-option :value="5">南京市</wb-option>
|
||
<wb-option :value="6">重庆市</wb-option>
|
||
</Wb-select>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>添加multiple属性，value值必须是数组</p>
|
||
<p>可以通过multipleLimit属性来控制最多选择几个，默认为0</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
<componetTemplate title="可搜索" template="ui/templates/select/3.html">
|
||
<template v-slot:demo>
|
||
<Wb-select v-model="value3" filterable>
|
||
<wb-option :value="1">北京市</wb-option>
|
||
<wb-option :value="2">上海市</wb-option>
|
||
<wb-option :value="3">深圳市</wb-option>
|
||
<wb-option :value="4">杭州市</wb-option>
|
||
<wb-option :value="5">南京市</wb-option>
|
||
<wb-option :value="6">重庆市</wb-option>
|
||
</Wb-select>
|
||
<Wb-select v-model="value3" filterable @on-search="search">
|
||
<wb-option v-for="item in options" :key="item" :value="item">{{item}}</wb-option>
|
||
</Wb-select>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>设置filterable属性，则选项可以根据输入的内容筛选。</p>
|
||
<p>通过on-search监听输入的内容，在回调更新option选项数据</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="高性能" template="ui/templates/select/4.html">
|
||
<template v-slot:demo>
|
||
<Wb-select v-model="value4" :options="arr" options-value-name="value1" options-text-name="text1" filterable @on-change="change">
|
||
</Wb-select>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>将列表数据通过options传入，可以达到高性能，渲染1万+的数据也不卡</p>
|
||
<p>optionsValueName配置传入数据中value的字段名</p>
|
||
<p>optionsTextName配置传入数据中text的字段名</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
</row>
|
||
</ClientOnly>
|
||
|
||
<style lang="scss">
|
||
.code-box-demo{
|
||
.ui-select:first-child{
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
.ui-select {
|
||
display: block;
|
||
margin-top: 20px;
|
||
width: 50%
|
||
}
|
||
.ui-select .ui-select-dropdown-list {
|
||
padding: 0;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value1: '',
|
||
value2: [],
|
||
value3: '',
|
||
value4: '',
|
||
options: [1, 2, 3, 4],
|
||
arr: []
|
||
}
|
||
},
|
||
mounted () {
|
||
setTimeout(() => {
|
||
let i = 0;
|
||
this.arr = [];
|
||
while (i < 10000) {
|
||
this.arr.push({
|
||
value1: i,
|
||
text1: `option${i}`
|
||
})
|
||
i++;
|
||
}
|
||
}, 1000);
|
||
},
|
||
methods: {
|
||
change (value) {
|
||
console.log(value)
|
||
},
|
||
search(value){
|
||
setTimeout(()=>{
|
||
this.options = [];
|
||
for(let i=1; i< 10; i++){
|
||
this.options.push(value + '|' + i)
|
||
}
|
||
}, 500)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
## API
|
||
|
||
### Select Props
|
||
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| value | 输入的值, 可以使用v-model实现数据的双向绑定 | Number, String, File | '' |
|
||
| placeholder | 提示语 | String | '' |
|
||
| disabled | 是否禁止输入 | Boolean | false |
|
||
| readonly | 是否只读 | Boolean | false |
|
||
| clearable | 是否显示清空按钮 | Boolean | false |
|
||
| filterable | 是否可筛选 | Boolean | false |
|
||
| multiple | 是否多选 | Boolean | false |
|
||
| multipleLimit | 仅多选时使用，限制选择数，默认值0不限制选择个数 | Number | 0 |
|
||
| options | 配置选项的数据 | Array | null |
|
||
| optionsValueName | 指定选项对象的那个字段为值 | String | 'value' |
|
||
| optionsTextName | 指定选项对象的那个字段为text | String | 'text' |
|
||
|
||
### Select Events
|
||
|
||
| 事件名 | 说明 | 返回值 |
|
||
|:--------------|:--------------------------|:--------|
|
||
| on-search | 当设置filterable为true，输入过滤条件时触发。连续输入不触发，自带200毫秒的debounce | (value, event) => void |
|
||
| on-change | 值改变时触发 | (value, event) => void |
|
||
|
||
### Option Props
|
||
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| value | 选项的值 | Number, String | '' |
|
||
| label | 选项的内容 | String | '' |
|
||
| disabled | 是否禁止选中 | Boolean | false | |