mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-18 10:59:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [el-time-picker] add visibleChange event (#5704)

Browse Source
This commit is contained in:
weidehai 2022-02-11 11:24:46 +08:00 committed by GitHub
parent 945e469624
commit 8945e21ec7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/en-US/component/date-picker.md
View File

@ -168,13 +168,14 @@ Note, date time locale (month name, first day of the week ...) are also configur
## Events
| Event Name | Description | Parameters |
| --------------- | ------------------------------------------------------------------------- | ------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
| calendar-change | triggers when the calendar selected date is changed. Only for `daterange` | [Date, Date] |
| panel-change | triggers when the navigation button click. | `(date, mode, view)` |
| Event Name | Description | Parameters |
| --------------- | ------------------------------------------------------------------------- | ----------------------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
| calendar-change | triggers when the calendar selected date is changed. Only for `daterange` | [Date, Date] |
| panel-change | triggers when the navigation button click. | `(date, mode, view)` |
| visible-change | triggers when the DatePicker's dropdown appears/disappears | true when it appears, and false otherwise |
## Methods

13
docs/en-US/component/datetime-picker.md
View File

@ -89,12 +89,13 @@ datetime-picker/default-time
## Events
| Event Name | Description | Parameters |
| --------------- | ----------------------------------------------------------------------------- | ------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
| calendar-change | triggers when the calendar selected date is changed. Only for `datetimerange` | [Date, Date] |
| Event Name | Description | Parameters |
| --------------- | ----------------------------------------------------------------------------- | ----------------------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
| 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 |
## Methods

11
docs/en-US/component/time-picker.md
View File

@ -67,11 +67,12 @@ time-picker/range
## Events
| Event Name | Description | Parameters |
| ---------- | ------------------------------------- | ------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
| Event Name | Description | Parameters |
| -------------- | ---------------------------------------------------------- | ----------------------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
| visible-change | triggers when the TimePicker's dropdown appears/disappears | true when it appears, and false otherwise |
## Methods

17
packages/components/time-picker/src/common/picker.vue
View File

@ -15,8 +15,8 @@
:stop-popper-mouse-event="false"
:hide-after="0"
persistent
@show="pickerActualVisible = true"
@hide="pickerActualVisible = false"
@show="onShow"
@hide="onHide"
>
<template #default>
<el-input
@ -244,6 +244,7 @@ export default defineComponent({
'blur',
'calendar-change',
'panel-change',
'visible-change',
],
setup(props, ctx) {
const { lang } = useLocale()
@ -330,6 +331,16 @@ export default defineComponent({
emitInput(result)
}
const onShow = () => {
pickerActualVisible.value = true
ctx.emit('visible-change', true)
}
const onHide = () => {
pickerActualVisible.value = false
ctx.emit('visible-change', false)
}
const focus = (focusStartInput = true) => {
let input = refStartInput.value
if (!focusStartInput && isRangeInput.value) {
@ -671,6 +682,8 @@ export default defineComponent({
onCalendarChange,
onPanelChange,
focus,
onShow,
onHide,
}
},
})