mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 19:28:14 +08:00
feat(components): [cascader] add tag-type attribute (#6726)
* feat(components): [cascader] add tag-type attribute * chore: add comment
This commit is contained in:
btea
GitHub
parent
3be9aee6b4
commit
d083be90c9
@ -138,26 +138,27 @@ cascader/panel
|
||||
|
||||
## Cascader Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------- | ------- |
|
||||
| model-value / v-model | binding value | - | — | — |
|
||||
| options | data of the options，the key of `value` and `label` can be customize by `Props`. | array | — | — |
|
||||
| props | configuration options, see the following table. | object | — | — |
|
||||
| size | size of input | string | large / default /small | — |
|
||||
| placeholder | placeholder of input | string | — | Select |
|
||||
| disabled | whether Cascader is disabled | boolean | — | false |
|
||||
| clearable | whether selected value can be cleared | boolean | — | false |
|
||||
| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
|
||||
| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false |
|
||||
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | - | false |
|
||||
| separator | option label separator | string | — | ' / ' |
|
||||
| filterable | whether the options can be searched | boolean | — | — |
|
||||
| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - |
|
||||
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
|
||||
| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
|
||||
| popper-class | custom class name for Cascader's dropdown | string | — | — |
|
||||
| teleported | whether cascader popup is teleported | boolean | true / false | true |
|
||||
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------- | ------- |
|
||||
| model-value / v-model | binding value | - | — | — |
|
||||
| options | data of the options，the key of `value` and `label` can be customize by `Props`. | array | — | — |
|
||||
| props | configuration options, see the following table. | object | — | — |
|
||||
| size | size of input | string | large / default /small | — |
|
||||
| placeholder | placeholder of input | string | — | Select |
|
||||
| disabled | whether Cascader is disabled | boolean | — | false |
|
||||
| clearable | whether selected value can be cleared | boolean | — | false |
|
||||
| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
|
||||
| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false |
|
||||
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | - | false |
|
||||
| separator | option label separator | string | — | ' / ' |
|
||||
| filterable | whether the options can be searched | boolean | — | — |
|
||||
| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - |
|
||||
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
|
||||
| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
|
||||
| popper-class | custom class name for Cascader's dropdown | string | — | — |
|
||||
| teleported | whether cascader popup is teleported | boolean | true / false | true |
|
||||
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
|
||||
| tag-type | tag type | string | success/info/warning/danger | info |
|
||||
|
||||
## Cascader Events
|
||||
|
||||
|
||||
@ -282,6 +282,19 @@ describe('Cascader.vue', () => {
|
||||
expect(tags[2].text()).toBe('Zhejiang / Wenzhou')
|
||||
})
|
||||
|
||||
test('tag type', async () => {
|
||||
const wrapper = mount(Cascader, {
|
||||
props: {
|
||||
options: OPTIONS,
|
||||
props: { multiple: true },
|
||||
tagType: 'success',
|
||||
modelValue: [['zhejiang', 'hangzhou']],
|
||||
},
|
||||
})
|
||||
await nextTick()
|
||||
expect(wrapper.find('.el-tag').classes()).toContain('el-tag--success')
|
||||
})
|
||||
|
||||
test('filterable', async () => {
|
||||
const wrapper = _mount({
|
||||
template: `
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
<el-tag
|
||||
v-for="tag in presentTags"
|
||||
:key="tag.key"
|
||||
type="info"
|
||||
:type="tagType"
|
||||
:size="tagSize"
|
||||
:hit="tag.hitState"
|
||||
:closable="tag.closable"
|
||||
@ -112,7 +112,7 @@
|
||||
<el-tag
|
||||
:key="tag2.key"
|
||||
class="in-tooltip"
|
||||
type="info"
|
||||
:type="tagType"
|
||||
:size="tagSize"
|
||||
:hit="tag2.hitState"
|
||||
:closable="tag2.closable"
|
||||
@ -214,7 +214,7 @@ import ElTooltip, {
|
||||
} from '@element-plus/components/tooltip'
|
||||
import { useDeprecateAppendToBody } from '@element-plus/components/popper'
|
||||
import ElScrollbar from '@element-plus/components/scrollbar'
|
||||
import ElTag from '@element-plus/components/tag'
|
||||
import ElTag, { tagProps } from '@element-plus/components/tag'
|
||||
import ElIcon from '@element-plus/components/icon'
|
||||
|
||||
import { formContextKey, formItemContextKey } from '@element-plus/tokens'
|
||||
@ -344,6 +344,8 @@ export default defineComponent({
|
||||
default: undefined,
|
||||
},
|
||||
teleported: useTooltipContentProps.teleported,
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
tagType: { ...tagProps.type, default: 'info' },
|
||||
},
|
||||
|
||||
emits: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user