选择器
# FxSelect 选择器
移动端与PC端交互方式不同，故参数变动较多，移动端请直接参考底部移动端使用方式
当选项过多时，使用下拉菜单展示并选择内容。
# 基础用法&禁用选项
适用广泛的基础单选
复制代码
# 禁用状态
选择器不可用状态
复制代码
# 可清空单选
包含清空按钮，可将选择器清空为初始状态
复制代码
# 基础多选
适用性较广的基础多选，用 Tag 展示已选项
复制代码
# 自定义模板
可以自定义备选项
复制代码
# 分组
备选项进行分组展示
复制代码
# 创建条目
可以创建并选中选项中不存在的条目
复制代码
Select Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value / v-model | 绑定值 | string/array | — | - |
| options | 选项列表，选项属性参见“Option Attributes” | array | — | [] |
| multiple | 是否多选 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
| option-value-key | 作为options中 value 唯一标识的键名 | string | — | value |
| size | 输入框尺寸 | string | medium/small/mini | — |
| clearable | 是否可以清空选项 | boolean | — | false |
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
| multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
| name | select input 的 name 属性 | string | — | — |
| autocomplete | select input 的 autocomplete 属性 | string | — | off |
| placeholder | 占位符 | string | — | 请选择 |
| filterable | 是否可搜索 | boolean | — | false |
| allow-create | 是否允许用户创建新条目，需配合 filterable 使用 | boolean | — | false |
| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
| popper-class | Select 下拉框的类名 | string | — | — |
| reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
| default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用 | boolean | - | false |
| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true |
| automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | - | false |
| is-option-group | 是否是分组选项 | boolean | - | false |
| validate-when-options-change | 更新options时是否触发验证 | boolean | - | - |
Select Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 选中值发生变化时触发，function(val) | 当前的选中值 |
| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
| remove-tag | 多选模式下移除tag时触发 | 移除的tag值 |
| clear | 可清空的单选模式下用户点击清空按钮时触发 | — |
| blur | 当 input 失去焦点时触发 | (event: Event) |
| focus | 当 input 获得焦点时触发 | (event: Event) |
Option Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 选项的值，如果该项为“其他”项，约定其值为"other" | string/number | — | — |
| label | 选项的标签，若不设置则默认与 value 相同 | string/number | — | — |
| disabled | 是否禁用该选项 | boolean | — | false |
| isOther | 标识该项是否为“其他”项。注：is-option-group为true时不支持“其他”选项 | boolean | - | - |
| isRequired | 标识选中“其他”项，输入框是否为必填 | boolean | - | - |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| focus | 使 input 获取焦点 | - |
| blur | 使 input 失去焦点，并隐藏下拉框 | - |
| before-change | 选择值生效前的钩子函数，如果返回false，则选择不生效 | - |
| resetInputHeight | 计算组件高度 | - |
# 移动端 选择器
# 基础用法
参数
prevent-click用来关闭click行为。picker组件支持通过点击来选择项，原理是touch事件触发时计算clientY/pageY与picker顶部的偏移值来确定点击的是哪一项，此时默认把picker固定在页面底部。所以当picker不在底部时，计算出的偏移值是不正确的，需要关闭click行为。
<template>
<fx-select
:columns="columns"
prevent-click
></fx-select>
</template>
<script>
export default {
data() {
return {
columns: [
[0, 1, 2, 3, 4, 5, 6, 7, 8],
['a', 'b', 'c', 'd'],
[11, 12, 13, 14, 15, 16],
],
};
};
};
</script>
# 禁用和默认值
Column.defaultValue设置该列的默认值；Item.disabled设置该项是否禁用。
export default {
data() {
return {
columns: [{
values: [0, 1, 2, 3, 4, 5, 6, 7, 8],
}, {
values: ['a', 'b', 'c', 'd'],
defaultValue: 'c',
}, {
values: [11, 12, 13, 14, { value: 15, disabled: true }, 16],
}],
};
};
};
# 调整每项的高度和每列同时展示的项数
<template>
<fx-select
:columns="columns"
:item-height="30"
:visible-item-count="7"
prevent-click
></fx-select>
</template>
# 多列联动
<template>
<fx-select
:columns="columns"
@change="onChange"
prevent-click
show-toolbar
></fx-select>
</template>
<script>
export default {
computed: {
columns(): object[] {
return [{
values: Object.keys(this.cols),
}, {
values: this.cols.a,
}];
},
},
methods: {
onChange(picker: any, values: any) {
picker.setColumnOptions(1, (this.cols as any)[values[0]]);
},
},
data() {
return {
cols: {
'a': [11, 12, 13, 14, 15],
'b': [21, 22, 23, 24, 25],
'c': [31, 32, 33, 34, 35],
},
};
};
};
</script>
# 加载状态
参数
show-toolbar控制picker头部的工具栏是否显示
<template>
<fx-select
:columns="columns"
loading
show-toolbar
prevent-click
></fx-select>
</template>
# API
| option | description | type | acceptable values | default |
|---|---|---|---|---|
| columns | 每一列数据 | Column[] | [] | |
| item-height | 选项高度 | Number | 36 | |
| visible-item-count | 同时可见item的数量 | Number | 5 | |
| show-separator | 是否展示分隔符 | Boolean | false | |
| show-toolbar | 是否展示头部操作栏 | Boolean | false | |
| return-object | 是否把选中的源object返回，默认只返回选中字符串 | Boolean | false | |
| prevent-click | 关闭click行为 | Boolean | false | |
| loading | 是否显示加载蒙层 | Boolean | false | |
| cancel-btn-text | 取消按钮的文案 | String | 取消 | |
| confirm-btn-text | 确定按钮的文案 | String | 确定 |
# Column
Column也支持直接传入Item[]
| key | description | type |
|---|---|---|
| values | 该列数据的枚举值 | Item[] |
| defaultValue | 该列数据的默认选中值 | String|Number |
| className | 该列DOM根节点的class名 | String |
columns支持多种格式:
columns: ['a', 'b', 'c'];
columns: [['a1', 'a2', 'a3'], ['b1', 'b2'], ['c1', 'c2']];
columns: [{ value: 'a', disabled: true }, 'b', 'c'];
columns: [{ values: ['a1', 'a2'] }, { values: ['b1', 'b2'] }];
# Item
Item也支持直接传入String/Number
| key | description | type |
|---|---|---|
| value | 该项value | String|Number |
| disabled | 禁用该项 | Boolean |
# Value
return-object == true时，Value的类型为String|Number。return-object == false时，Value的类型为Item。
# Events
| event | description | params |
|---|---|---|
| cancel | 点击取消按钮触发 | -- |
| confirm | 点击确认按钮触发 | (values: Value[]) |
| change | 选项值发生变化时触发，参数分别为picker实例，当前选中值，此次发生变化的列索引 | (picker: Vue, values: Value[], index: number) |
# Methods
| name | description | params | returns |
|---|---|---|---|
| getValue | 获取所有列选中的值 | -- | Value[] |
| setValue | 设置所有列选中的值，注意这里的入参**values只接受字符串数组或者数值数组**，不接受对象数组（因为深拷贝导致对象匹配不上） | (values: String[]|Number[]) | -- |
| getColumnValue | 获取指定列选中的值 | (columnIndex: number) | Value |
| setColumnValue | 设置指定列选中的值，注意这里的入参**value只接受字符串或者数值** | (columnIndex: number, value: string|number) | -- |
| getColumnOptions | 获取指定列所有选项枚举值 | (columnIndex: number) | Column |
| setColumnOptions | 设置指定列所有选项枚举值 | (columnIndex: number, column: Column) | -- |