UNPKG

sard-uniapp

Version:

sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库

sard.wzt.zone

sutras/sard-uniapp

119 lines (87 loc) • 6.91 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
--- title: Select subtitle: 列表选择 group: 表单组件 version: 1.27+ --- ## 介绍 从列表中选择一个或多个选项。 ## 引入 ```js import Select from 'sard-uniapp/components/select/select.vue' import SelectOption from 'sard-uniapp/components/select-option/select-option.vue' import SelectOptionGroup from 'sard-uniapp/components/select-option-group/select-option-group.vue' ``` ## 代码演示 ### 基础使用 `v-model` 绑定当前被选中的 `SelectOption` 的 `value` 属性值。 <<< @demo/select/demo/Basic.vue 更多案例，请参考 [SelectPopout 组件](./select-popout)。 ## API ### SelectProps | 属性 | 描述 | 类型 | 默认值 | | ------------------ | ------------------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------- | | root-class | 组件根元素类名 | string | - | | root-style | 组件根元素样式 | StyleValue | - | | model-value | 当前绑定的值 | any | - | | multiple | 是否允许多选 | boolean | false | | multiple-limit | 多选时允许最多选择的个数，为0则不限制 | number | 0 | | filterable | 是否允许筛选 | boolean | false | | filter-placeholder | 筛选输入框的占位文案 | string | - | | filter-method | 允许筛选时的回调 | `(query: string) => void` | - | | remote | 是否允许远程加载数据 | boolean | false | | remote-method | 允许远程加载数据时的回调 | `(query: string, page: number, isRefresh: boolean) => Promise\<boolean>` | - | | threshold | 触发远程加载回调的阈值，单位ms | number | 500 | | show-toolbar | 多选时，是否显示工具栏 | boolean | false | | options | 选项的数据 | Record<string, any>[] | [] | | option-keys | 自定义 `options` 中的字段 | OptionKeys | `{label: 'label', value: 'value', children: 'children'}` | | value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | OptionKeys | `{label: 'label', value: 'value', children: 'children'}` | ### OptionKeys ```tsx interface OptionKeys { label?: string value?: string children?: string } ``` ### SelectSlots | 插槽 | 描述 | 属性 | | ------- | -------------- | ---- | | default | 自定义默认内容 | - | ### SelectEmits | 事件 | 描述 | 类型 | | ------------------ | ------------------------ | ---------------------- | | update:model-value | 列表选择组件值改变时触发 | `(value: any) => void` | | change | 列表选择组件值改变时触发 | `(value: any) => void` | ### SelectOptionGroupProps | 属性 | 描述 | 类型 | 默认值 | | ---------- | ---------------------- | ---------------- | ------ | | root-class | 组件根元素类名 | string | - | | root-style | 组件根元素样式 | StyleValue | - | | label | 选项组的标签 | string \| number | - | | disabled | 是否禁用组内所有的选项 | boolean | false | ### SelectOptionGroupSlots | 插槽 | 描述 | 属性 | | ------- | -------------- | ---- | | default | 自定义默认内容 | - | ### SelectOptionProps | 属性 | 描述 | 类型 | 默认值 | | ---------- | ---------------- | ------------------------------------- | ------ | | root-class | 组件根元素类名 | string | - | | root-style | 组件根元素样式 | StyleValue | - | | label | 选项的标签 | string \| number | - | | value | 选项的值 | string \| number \| boolean \| object | - | | disabled | 是否禁用该选项 | boolean | false | | plain | 是否移除默认样式 | boolean | false | ### SelectOptionSlots | 插槽 | 描述 | 属性 | | ------- | -------------- | ------------------------------------------ | | default | 自定义默认内容 | `{ disabled: boolean; selected: boolean }` | | label | 自定义标签内容 | `{ disabled: boolean; selected: boolean }` | ### SelectOptionEmits | 事件 | 描述 | 类型 | | ----- | -------------- | ---------------------- | | click | 点击选项时触发 | `(event: any) => void` | ## 主题定制 ### CSS 变量 <<< @comp/select/variables.scss#variables