mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
feat(components): improve event and supplement docs (#17150)
* feat: improve event and supplement documentation * feat: improve event and supplement documentation * style: lint back old * docs: autocomplate select event content back old * docs: cascader clear event add version * fix: delete redundant code * feat: back old code * feat: back old code * feat: back old code * chore: update version
This commit is contained in:
@@ -82,6 +82,10 @@ autocomplete/custom-loading
|
||||
|
||||
| Name | Description | Type |
|
||||
| ------ | ------------------------------------------------ | ----------------------------------------------------- |
|
||||
| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` |
|
||||
| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` |
|
||||
| input | triggers when the Input value change | ^[Function]`(value: string \| number) => void` |
|
||||
| clear | triggers when the Input is cleared by clicking the clear button | ^[Function]`() => void` |
|
||||
| select | triggers when a suggestion is clicked | ^[Function]`(item: typeof modelValue \| any) => void` |
|
||||
| change | triggers when the icon inside Input value change | ^[Function]`(value: string \| number) => void` |
|
||||
|
||||
|
||||
@@ -171,6 +171,7 @@ cascader/panel
|
||||
| expand-change | triggers when expand option changes | ^[Function]`(value: CascaderValue) => void` |
|
||||
| blur | triggers when Cascader blurs | ^[Function]`(event: FocusEvent) => void` |
|
||||
| focus | triggers when Cascader focuses | ^[Function]`(event: FocusEvent) => void` |
|
||||
| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable Select | ^[Function]`() => void` |
|
||||
| visible-change | triggers when the dropdown appears/disappears | ^[Function]`(value: boolean) => void` |
|
||||
| remove-tag | triggers when remove tag in multiple selection mode | ^[Function]`(value: CascaderNode['valueByOption']) => void` |
|
||||
|
||||
|
||||
@@ -186,6 +186,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
|
||||
| change | triggers when user confirms the value | ^[Function]`(val: typeof v-model) => void` |
|
||||
| blur | triggers when Input blurs | ^[Function]`(e: FocusEvent) => void` |
|
||||
| focus | triggers when Input focuses | ^[Function]`(e: FocusEvent) => void` |
|
||||
| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable DatePicker | ^[Function]`() => void` |
|
||||
| calendar-change | triggers when the calendar selected date is changed. | ^[Function]`(val: [Date, null \| Date]) => void` |
|
||||
| panel-change | triggers when the navigation button click. | ^[Function]`(date: Date \| [Date, Date], mode: 'month' \| 'year', view?: string) => void` |
|
||||
| visible-change | triggers when the DatePicker's dropdown appears/disappears | ^[Function]`(visibility: boolean) => void` |
|
||||
|
||||
@@ -115,6 +115,7 @@ datetime-picker/default-time
|
||||
| change | triggers when user confirms the value | component's binding value |
|
||||
| blur | triggers when Input blurs | `(e: FocusEvent)` |
|
||||
| focus | triggers when Input focuses | `(e: FocusEvent)` |
|
||||
| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable DateTimePicker | ^[Function]`() => void` |
|
||||
| calendar-change | triggers when the calendar selected date is changed. Only for `datetimerange` | [Date, Date] |
|
||||
| visible-change | triggers when the DateTimePicker's dropdown appears/disappears | true when it appears, and false otherwise |
|
||||
|
||||
|
||||
@@ -86,6 +86,7 @@ time-picker/range
|
||||
| change | triggers when user confirms the value | ^[Function]`(val: number \| string \| Date \| [number, number] \| [string, string] \| [Date, Date]) => void` |
|
||||
| blur | triggers when Input blurs | ^[Function]`(e: FocusEvent) => void` |
|
||||
| focus | triggers when Input focuses | ^[Function]`(e: FocusEvent) => void` |
|
||||
| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable TimePicker | ^[Function]`() => void` |
|
||||
| visible-change | triggers when the TimePicker's dropdown appears/disappears | ^[Function]`(visibility: boolean) => void` |
|
||||
|
||||
### Exposes
|
||||
|
||||
@@ -85,6 +85,7 @@ time-select/time-range
|
||||
| change | triggers when user confirms the value | ^[Function]`(value: string) => void` |
|
||||
| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` |
|
||||
| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` |
|
||||
| clear ^(2.7.7) | triggers when the clear icon is clicked in a clearable TimeSelect | ^[Function]`() => void` |
|
||||
|
||||
### Exposes
|
||||
|
||||
|
||||
@@ -152,11 +152,16 @@ describe('Cascader.vue', () => {
|
||||
})
|
||||
|
||||
test('clearable', async () => {
|
||||
const isClear = ref(false)
|
||||
|
||||
const wrapper = _mount(() => (
|
||||
<Cascader
|
||||
modelValue={['zhejiang', 'hangzhou']}
|
||||
clearable
|
||||
options={OPTIONS}
|
||||
onClear={() => {
|
||||
isClear.value = true
|
||||
}}
|
||||
/>
|
||||
))
|
||||
|
||||
@@ -164,6 +169,7 @@ describe('Cascader.vue', () => {
|
||||
expect(wrapper.findComponent(ArrowDown).exists()).toBe(true)
|
||||
await trigger.trigger('mouseenter')
|
||||
expect(wrapper.findComponent(ArrowDown).exists()).toBe(false)
|
||||
expect(isClear.value).toBe(false)
|
||||
await wrapper.findComponent(CircleClose).trigger('click')
|
||||
expect(wrapper.find('input').element.value).toBe('')
|
||||
expect(
|
||||
@@ -172,6 +178,7 @@ describe('Cascader.vue', () => {
|
||||
await trigger.trigger('mouseleave')
|
||||
await trigger.trigger('mouseenter')
|
||||
await expect(wrapper.findComponent(CircleClose).exists()).toBe(false)
|
||||
expect(isClear.value).toBe(true)
|
||||
})
|
||||
|
||||
test('show last level label', async () => {
|
||||
|
||||
@@ -120,6 +120,7 @@ export const cascaderEmits = {
|
||||
[CHANGE_EVENT]: (_: CascaderValue) => true,
|
||||
focus: (evt: FocusEvent) => evt instanceof FocusEvent,
|
||||
blur: (evt: FocusEvent) => evt instanceof FocusEvent,
|
||||
clear: () => true,
|
||||
visibleChange: (val: boolean) => isBoolean(val),
|
||||
expandChange: (val: CascaderValue) => !!val,
|
||||
removeTag: (val: CascaderNode['valueByOption']) => !!val,
|
||||
|
||||
@@ -577,6 +577,7 @@ const handleClear = () => {
|
||||
syncPresentTextValue()
|
||||
}
|
||||
togglePopperVisible(false)
|
||||
emit('clear')
|
||||
}
|
||||
|
||||
const syncPresentTextValue = () => {
|
||||
|
||||
@@ -215,6 +215,7 @@ const emit = defineEmits([
|
||||
'change',
|
||||
'focus',
|
||||
'blur',
|
||||
'clear',
|
||||
'calendar-change',
|
||||
'panel-change',
|
||||
'visible-change',
|
||||
@@ -514,6 +515,7 @@ const onClearIconClick = (event: MouseEvent) => {
|
||||
pickerVisible.value = false
|
||||
pickerOptions.value.handleClear && pickerOptions.value.handleClear()
|
||||
}
|
||||
emit('clear')
|
||||
}
|
||||
|
||||
const valueIsEmpty = computed(() => {
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
@change="(event) => $emit('change', event)"
|
||||
@blur="(event) => $emit('blur', event)"
|
||||
@focus="(event) => $emit('focus', event)"
|
||||
@clear="() => $emit('clear')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in items"
|
||||
@@ -51,7 +52,7 @@ defineOptions({
|
||||
name: 'ElTimeSelect',
|
||||
})
|
||||
|
||||
defineEmits(['change', 'blur', 'focus', 'update:modelValue'])
|
||||
defineEmits(['change', 'blur', 'focus', 'clear', 'update:modelValue'])
|
||||
|
||||
const props = defineProps(timeSelectProps)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user