UNPKG

cloud-ui.vusion

Version:
347 lines (314 loc) 12.8 kB
# 级联胶囊 CascadeCapsules ### 基本形式 ``` html <u-cascade-capsules :categories="[ { label: '学科门类' }, { label: '一级学科' }, { label: '二级学科' }, ]" :data="[ { text: '理学', value: '理学', children: [ { text: '物理学', value: '物理学', children: [ { text: '理论物理', value: '理论物理' }, { text: '凝聚态物理', value: '凝聚态物理' }, { text: '材料物理', value: '材料物理' }, ]}, { text: '数学', value: '数学', children: [ { text: '基础数学', value: '基础数学' }, { text: '计算数学', value: '计算数学' }, { text: '应用数学', value: '应用数学' }, ]}, { text: '化学', value: '化学' }, ]}, { text: '工学', value: '工学', children: [ { text: '计算机科学与技术', value: '计算机科学与技术', children: [ { text: '计算机系统结构', value: '计算机系统结构' }, { text: '计算机软件与理论', value: '计算机软件与理论', disabled: true }, { text: '计算机应用技术', value: '计算机应用技术' }, ]}, { text: '软件工程', value: '软件工程', disabled: true }, { text: '机械工程', value: '机械工程', children: [ { text: '机械制造及其自动化', value: '机械制造及其自动化' }, { text: '机械电子工程', value: '机械电子工程' }, { text: '机械设计及理论', value: '机械设计及理论', disabled: true }, { text: '车辆工程', value: '车辆工程', disabled: true }, ]}, ]}, ]"> </u-cascade-capsules> ``` ### 值转换器 组件的 value 各选择器的 value 的转换器。 #### join 默认为`'join'`,表示将 values 数组 join 之后变成 value。这种情况下 value 一般不会重复,推荐使用。 ``` vue <template> <u-linear-layout direction="vertical"> <u-cascade-capsules converter="join" v-model="value" :categories="[ { label: '学科门类' }, { label: '一级学科' }, { label: '二级学科' }, ]" :data="[ { text: '理学', value: '理学', children: [ { text: '物理学', value: '物理学', children: [ { text: '理论物理', value: '理论物理' }, { text: '凝聚态物理', value: '凝聚态物理' }, { text: '材料物理', value: '材料物理' }, ]}, { text: '数学', value: '数学', children: [ { text: '基础数学', value: '基础数学' }, { text: '计算数学', value: '计算数学' }, { text: '应用数学', value: '应用数学' }, ]}, { text: '化学', value: '化学' }, ]}, { text: '工学', value: '工学', children: [ { text: '计算机科学与技术', value: '计算机科学与技术', children: [ { text: '计算机系统结构', value: '计算机系统结构' }, { text: '计算机软件与理论', value: '计算机软件与理论', disabled: true }, { text: '计算机应用技术', value: '计算机应用技术' }, ]}, { text: '软件工程', value: '软件工程', disabled: true }, { text: '机械工程', value: '机械工程', children: [ { text: '机械制造及其自动化', value: '机械制造及其自动化' }, { text: '机械电子工程', value: '机械电子工程' }, { text: '机械设计及理论', value: '机械设计及理论', disabled: true }, { text: '车辆工程', value: '车辆工程', disabled: true }, ]}, ]}, ]"> </u-cascade-capsules> <div>选择的值为:{{ value }}</div> </u-linear-layout> </template> <script> export default { data() { return { value: '工学,计算机科学与技术,计算机应用技术', }; }, }; </script> ``` `'join.number'`与`join`类似,只是会考虑它为数字的情况。 `'join:,'`,还可以用`:`修改分隔符,类似 Vue 的指令参数。 ``` vue <template> <u-linear-layout direction="vertical"> <u-cascade-capsules :value.sync="value" converter="join.number:|" :categories="[ { label: 'CPU', key: 'cpu' }, { label: '内存', key: 'memory' }, { label: '系统盘', key: 'storage' }, ]" :data="[ { text: '1核', value: 1, children: [ { text: '1GB', value: 1, children: [ { text: '20GB', value: 20 }, ] }, { text: '2GB', value: 2, children: [ { text: '20GB', value: 20 }, ] }, ] }, { text: '2核', value: 2, children: [ { text: '2GB', value: 2, children: [ { text: '20GB', value: 20 }, ] }, { text: '4GB', value: 4, children: [ { text: '20GB', value: 20 }, ] }, { text: '8GB', value: 8, children: [ { text: '20GB', value: 20 }, ] }, ] }, { text: '4核', value: 4, children: [ { text: '4GB', value: 4, children: [ { text: '20GB', value: 20 }, ] }, { text: '8GB', value: 8, children: [ { text: '20GB', value: 20 }, ] }, { text: '16GB', value: 16, children: [ { text: '20GB', value: 20 }, ] }, ] }, ]"> </u-cascade-capsules> <div>选择的值为:{{ value }}</div> </u-linear-layout> </template> <script> export default { data() { return { value: undefined, }; }, }; </script> ``` #### last-value `'last-value'`表示以最后一项的值作为 value,如果每一项的值是唯一的,可以用这种方法。 ``` vue <template> <u-linear-layout direction="vertical"> <u-cascade-capsules converter="last-value" v-model="value" :categories="[ { label: '学科门类' }, { label: '一级学科' }, { label: '二级学科' }, ]" :data="[ { text: '理学', value: '1', children: [ { text: '物理学', value: '11', children: [ { text: '理论物理', value: '111' }, { text: '凝聚态物理', value: '112' }, { text: '材料物理', value: '113' }, ]}, { text: '数学', value: '12', children: [ { text: '基础数学', value: '121' }, { text: '计算数学', value: '122' }, { text: '应用数学', value: '123' }, ]}, { text: '化学', value: '13' }, ]}, { text: '工学', value: '2', children: [ { text: '计算机科学与技术', value: '21', children: [ { text: '计算机系统结构', value: '211' }, { text: '计算机软件与理论', value: '212', disabled: true }, { text: '计算机应用技术', value: '213' }, ]}, { text: '软件工程', value: '22', disabled: true }, { text: '机械工程', value: '23', children: [ { text: '机械制造及其自动化', value: '231' }, { text: '机械电子工程', value: '232' }, { text: '机械设计及理论', value: '233', disabled: true }, { text: '车辆工程', value: '234', disabled: true }, ]}, ]}, ]"> </u-cascade-capsules> <div>选择的值为:{{ value }}</div> </u-linear-layout> </template> <script> export default { data() { return { value: '213', }; }, }; </script> ``` ### 自动选择 此功能默认开启,父级切换时会跟据当前级别的`value`自动选择,如果没有与`value`相匹配的项,会自动选择第一个显示且非禁用的项。 可以将`auto-select`设置为`false`,关闭此功能。 ``` html <u-cascade-capsules converter="join.number" :auto-select="false" :categories="[ { label: 'CPU', key: 'cpu' }, { label: '内存', key: 'memory' }, { label: '系统盘', key: 'storage' }, ]" :data="[ { text: '1核', value: 1, children: [ { text: '1GB', value: 1, children: [ { text: '20GB', value: 20 }, ] }, { text: '2GB', value: 2, children: [ { text: '20GB', value: 20 }, ] }, ] }, { text: '2核', value: 2, children: [ { text: '2GB', value: 2, children: [ { text: '20GB', value: 20 }, ] }, { text: '4GB', value: 4, children: [ { text: '20GB', value: 20 }, ] }, { text: '8GB', value: 8, children: [ { text: '20GB', value: 20 }, ] }, ] }, { text: '4核', value: 4, children: [ { text: '4GB', value: 4, children: [ { text: '20GB', value: 20 }, ] }, { text: '8GB', value: 8, children: [ { text: '20GB', value: 20 }, ] }, { text: '16GB', value: 16, children: [ { text: '20GB', value: 20 }, ] }, ] }, ]"> </u-cascade-capsules> ``` ### 可取消 ``` html <u-cascade-capsules :auto-select="false" cancelable :categories="[ { label: '学科门类' }, { label: '一级学科' }, { label: '二级学科' }, ]" :data="[ { text: '理学', value: '理学', children: [ { text: '物理学', value: '物理学', children: [ { text: '理论物理', value: '理论物理' }, { text: '凝聚态物理', value: '凝聚态物理' }, { text: '材料物理', value: '材料物理' }, ]}, { text: '数学', value: '数学', children: [ { text: '基础数学', value: '基础数学' }, { text: '计算数学', value: '计算数学' }, { text: '应用数学', value: '应用数学' }, ]}, { text: '化学', value: '化学' }, ]}, { text: '工学', value: '工学', children: [ { text: '计算机科学与技术', value: '计算机科学与技术', children: [ { text: '计算机系统结构', value: '计算机系统结构' }, { text: '计算机软件与理论', value: '计算机软件与理论', disabled: true }, { text: '计算机应用技术', value: '计算机应用技术' }, ]}, { text: '软件工程', value: '软件工程', disabled: true }, { text: '机械工程', value: '机械工程', children: [ { text: '机械制造及其自动化', value: '机械制造及其自动化' }, { text: '机械电子工程', value: '机械电子工程' }, { text: '机械设计及理论', value: '机械设计及理论', disabled: true }, { text: '车辆工程', value: '车辆工程', disabled: true }, ]}, ]}, ]"> </u-cascade-capsules> ``` ## API ### Props/Attrs | Prop/Attr | Type | Default | Description | | --------- | ---- | ------- | ----------- | | data | Array\<{ text, value }\> | | 数据列表 | | value.sync, v-model | Any | | 当前选择的值 | | categories | Array\<{ label, key }\> | | 多级分类 | | autoSelect | Boolean | `true` | | converter | String, Object | `'join'` | value values 的转换器。可选值:`'join'`表示将 values 数组 join 之后变成 value,`'join.number'`与`join`类似,只是会考虑它为数字的情况。也可以用`:`修改分隔符,类似 Vue 的指令参数,`'last-value'`表示以最后一项的值作为 value。也可以传入一个包含 { get, set } 的一个对象 | | field | String | `'text'` | 显示文本字段 | | cancelable | Boolean | `false` | 是否可以取消选择 | | readonly | Boolean | `false` | 是否只读 | | disabled | Boolean | `false` | 是否禁用 | ### Events #### @input 选择某一项时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | Any | 选择项的值 | #### @select 选择某一项时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event.level | Number | 选择的层级 | | $event.value | Any | 改变后的值 | | $event.values | Array | 改变后每项值的数组 | | $event.item | Object | 选择项相关对象 | | $event.itemVM | ListViewItem | 选择项子组件 | #### @change 选择值改变时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event.value | Any | 改变后的值 | | $event.oldValue | Any | 旧的值 | | $event.values | Array | 改变后每项值的数组 | | $event.oldValues | Array | 旧的每项值的数组 |