element-plus/packages/components/dropdown/src/dropdown.vue

296 lines
7.2 KiB
Vue
Raw Normal View History

2020-11-04 11:24:36 +08:00
<template>
<div class="el-dropdown">
<el-popper
ref="triggerVnode"
v-model:visible="visible"
:placement="placement"
:fallback-placements="['bottom', 'top', 'right', 'left']"
:effect="effect"
pure
:manual-mode="true"
:trigger="[trigger]"
:popper-class="`el-dropdown__popper ${popperClass}`"
append-to-body
transition="el-zoom-in-top"
:stop-popper-mouse-event="false"
:gpu-acceleration="false"
>
<template #default>
<el-scrollbar
ref="scrollbar"
tag="ul"
:wrap-style="wrapStyle"
view-class="el-dropdown__list"
>
<slot name="dropdown"></slot>
</el-scrollbar>
</template>
<template #trigger>
<div :class="[dropdownSize ? 'el-dropdown--' + dropdownSize : '']">
<slot v-if="!splitButton" name="default"></slot>
<template v-else>
<el-button-group>
<el-button
:size="dropdownSize"
:type="type"
@click="handlerMainButtonClick"
>
<slot name="default"></slot>
</el-button>
<el-button
:size="dropdownSize"
:type="type"
class="el-dropdown__caret-button"
>
<el-icon class="el-dropdown__icon"><arrow-down /></el-icon>
</el-button>
</el-button-group>
</template>
</div>
</template>
</el-popper>
</div>
2020-11-04 11:24:36 +08:00
</template>
2020-11-12 14:43:55 +08:00
<script lang="ts">
2020-08-28 11:44:04 +08:00
import {
defineComponent,
provide,
getCurrentInstance,
ref,
computed,
watch,
onMounted,
} from 'vue'
import ElButton from '@element-plus/components/button'
import ElPopper, { Effect } from '@element-plus/components/popper'
import ElScrollbar from '@element-plus/components/scrollbar'
import ElIcon from '@element-plus/components/icon'
2020-08-28 11:44:04 +08:00
import { on, addClass, removeClass } from '@element-plus/utils/dom'
import { addUnit } from '@element-plus/utils/util'
import { ArrowDown } from '@element-plus/icons-vue'
import { useSize } from '@element-plus/hooks'
epic: refactor icons (#3492) * refactor(components): el-alert icon (#3441) * refactor(components): el-alert icon * fix: el-alert test * fix: [el-alert] lint error * feat(utils): add icon util * refactor(components): el-alert icon * refactor(utils): icon * test: update alert test * refactor: remove el-icon in util * refactor(components): el-notification icon (#3512) * chore: temp save changes * refactor: update icon * fix: var * docs: update icon * fix: type class error * style: remove unused class * fix: update icon type * docs: update icon * fix: update iconComponent * refactor(components): el-dialog icon (#3505) * refactor(components): [el-dialog] icon * fix: typo * refactor: dialog icon ref * refactor: dialog icon * style: update close button size * refactor(components): el-message-box icon (#3507) * refactor(components): message-box icon * refactor(components): message icon * fix: test * refactor: update ref * fix: test * docs: update icon * fix: delete unused code * docs: update type * fix: update close button size * fix: type * fix: icon type class * fix: icon type * fix: update type class * refactor(components): el-popconfirm icon (#3513) * refactor(components): el-popconfirm icon * fix: space styles * docs: update example * docs: update example for trigger event * refactor(components): el-page-header icon (#3518) * refactor(components): el-page-header icon * docs: update icon * fix: space errors * refactor(components): el-steps icon (#3520) * refactor(components): el-backtop icon (#3514) * refactor(components): el-backtop icon * fix: update font size * refactor(components): el-button icon (#3536) * refactor(components): el-button icon * fix: update example * refactor(components): el-button icon * refactor: style simplify Co-authored-by: imswk <syfzxx@vip.qq.com> * refactor(components): el-tree icon (#3590) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-avatar icon (#3599) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-carousel icon (#3602) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-progress icon (#3607) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-result icon (#3609) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-timeline icon (#3646) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-table icon (#3611) Co-authored-by: qianjie <qianjie@patsnap.com> * chore: add vue to gitignore * fix: buildProp error * refactor(components): el-pagination icon (#3605) * test: el-menu deprecated icon font (#3794) * test: el-loading deprecated icon font (#3795) * chore: Update changelog 1.1.0-beta.20 (#3838) * fix: about custom extension of table column (#3437) * refactor(components): el-autocomplete icon (#3783) * refactor(components): el-dropdown icon (#3517) * refactor(components): el-dropdown icon * fix: arrow down icon size * style: revert * fix: font-size * refactor(components): el-link icon (#3538) * refactor(components): el-link icon * refactor: update example * fix: import icons * docs: add tip * refactor: update link icon * fix: icon align * fix: typo * refactor(components): el-select icon (#3780) * refactor(components): el-input icon (#3565) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * docs: icon usage * fix: input style * fix: add scoped * docs: fix icon * fix: icon align * fix: icon align * fix: typo * fix: typo * refactor(components): el-input-number icon (#3566) * refactor(components): el-input-number icon * fix: icon align * refactor(components): el-tag icon (#3793) * refactor(components): el-tag icon * fix: icon align * fix: icon margin * refactor(components): el-switch icon (#3787) * refactor(components): el-switch icon * fix: icon align * docs: add icon usage * refactor(components): el-collapse icon (#3788) * refactor(components): el-collapse icon * docs: update icon demo * fix: typo * refactor(components): el-uplod icon (#3598) * refactor(components): el-uplod icon * docs: update icon useage * docs: fix icon * docs: fix icon * docs: update upload-filled icon * fix: icon align * fix: item icon align * refactor(components): el-select-v2 icon (#3781) * refactor(components): el-select-v2 icon * revert: play/main.ts * fix: icon style * fix: icon solt * refactor(components): el-cascader icon (#3785) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-cascader icon * refactor(components): el-tag icon * fix: icon align * fix: icon margin * docs: icon usage * fix: input style * fix: add scoped * test: remove unuesd code * fix: cascader-panel * fix: icon style * fix: icon animation * refactor(components): el-drawer icon (#3796) * refactor(components): el-drawer icon * fix: close icon size * fix: close icon align * refactor(components): el-transfer icon (#3792) * refactor(components): el-transfer icon * fix: icon align * refactor(components): el-image-viewer icon (#3797) * refactor(components): el-image-view icon * fix: icon size * docs: update domo * style: format vue * fix: fullscreen icon * Add cursor for icons Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * refactor(components): rate-icon (#3891) * refactor(components): el-rate icon * docs: update example * docs: update * test: update * docs: update * fix: variable rename * fix: demo update * fix: allow half bug * refactor(components): el-time-picker icon (#3834) * refactor(components): el-button icon * refactor(components): date-picker icon * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-time-select icon * fix: icon width * docs: icon usage * fix: input style * fix: add scoped * fix: icon size * docs: icon display * fix: icon in button * docs: fix error * refactor(components): el-time-picker icon * fix: var * fix: icon align * test: delete unused code * test: fix error * fix: remove unused code * docs: fix typo * docs: update icon * fix: default prefix icon * fix: range picker icon align * Update cursor for picker Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * fix(components): el-input close icon * chore: delete fonts * fix: copy full style Co-authored-by: imswk <syfzxx@vip.qq.com> Co-authored-by: bastarder <85257684@qq.com> Co-authored-by: qianjie <qianjie@patsnap.com> Co-authored-by: Element <wallement@gmail.com> Co-authored-by: Alan Wang <948467222@qq.com> Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
2021-10-27 23:17:13 +08:00
import type { Placement } from '@element-plus/components/popper'
import type { PropType, ComponentPublicInstance, CSSProperties } from 'vue'
import type { TriggerType } from '@element-plus/hooks/use-popper/use-target-events'
import type { ButtonType } from '@element-plus/components/button/src/types'
2020-08-28 11:44:04 +08:00
type Nullable<T> = null | T
const { ButtonGroup: ElButtonGroup } = ElButton
2020-08-28 11:44:04 +08:00
export default defineComponent({
name: 'ElDropdown',
components: {
ElButton,
ElButtonGroup,
ElScrollbar,
2020-11-04 11:24:36 +08:00
ElPopper,
epic: refactor icons (#3492) * refactor(components): el-alert icon (#3441) * refactor(components): el-alert icon * fix: el-alert test * fix: [el-alert] lint error * feat(utils): add icon util * refactor(components): el-alert icon * refactor(utils): icon * test: update alert test * refactor: remove el-icon in util * refactor(components): el-notification icon (#3512) * chore: temp save changes * refactor: update icon * fix: var * docs: update icon * fix: type class error * style: remove unused class * fix: update icon type * docs: update icon * fix: update iconComponent * refactor(components): el-dialog icon (#3505) * refactor(components): [el-dialog] icon * fix: typo * refactor: dialog icon ref * refactor: dialog icon * style: update close button size * refactor(components): el-message-box icon (#3507) * refactor(components): message-box icon * refactor(components): message icon * fix: test * refactor: update ref * fix: test * docs: update icon * fix: delete unused code * docs: update type * fix: update close button size * fix: type * fix: icon type class * fix: icon type * fix: update type class * refactor(components): el-popconfirm icon (#3513) * refactor(components): el-popconfirm icon * fix: space styles * docs: update example * docs: update example for trigger event * refactor(components): el-page-header icon (#3518) * refactor(components): el-page-header icon * docs: update icon * fix: space errors * refactor(components): el-steps icon (#3520) * refactor(components): el-backtop icon (#3514) * refactor(components): el-backtop icon * fix: update font size * refactor(components): el-button icon (#3536) * refactor(components): el-button icon * fix: update example * refactor(components): el-button icon * refactor: style simplify Co-authored-by: imswk <syfzxx@vip.qq.com> * refactor(components): el-tree icon (#3590) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-avatar icon (#3599) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-carousel icon (#3602) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-progress icon (#3607) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-result icon (#3609) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-timeline icon (#3646) Co-authored-by: qianjie <qianjie@patsnap.com> * refactor(components): el-table icon (#3611) Co-authored-by: qianjie <qianjie@patsnap.com> * chore: add vue to gitignore * fix: buildProp error * refactor(components): el-pagination icon (#3605) * test: el-menu deprecated icon font (#3794) * test: el-loading deprecated icon font (#3795) * chore: Update changelog 1.1.0-beta.20 (#3838) * fix: about custom extension of table column (#3437) * refactor(components): el-autocomplete icon (#3783) * refactor(components): el-dropdown icon (#3517) * refactor(components): el-dropdown icon * fix: arrow down icon size * style: revert * fix: font-size * refactor(components): el-link icon (#3538) * refactor(components): el-link icon * refactor: update example * fix: import icons * docs: add tip * refactor: update link icon * fix: icon align * fix: typo * refactor(components): el-select icon (#3780) * refactor(components): el-input icon (#3565) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * docs: icon usage * fix: input style * fix: add scoped * docs: fix icon * fix: icon align * fix: icon align * fix: typo * fix: typo * refactor(components): el-input-number icon (#3566) * refactor(components): el-input-number icon * fix: icon align * refactor(components): el-tag icon (#3793) * refactor(components): el-tag icon * fix: icon align * fix: icon margin * refactor(components): el-switch icon (#3787) * refactor(components): el-switch icon * fix: icon align * docs: add icon usage * refactor(components): el-collapse icon (#3788) * refactor(components): el-collapse icon * docs: update icon demo * fix: typo * refactor(components): el-uplod icon (#3598) * refactor(components): el-uplod icon * docs: update icon useage * docs: fix icon * docs: fix icon * docs: update upload-filled icon * fix: icon align * fix: item icon align * refactor(components): el-select-v2 icon (#3781) * refactor(components): el-select-v2 icon * revert: play/main.ts * fix: icon style * fix: icon solt * refactor(components): el-cascader icon (#3785) * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-cascader icon * refactor(components): el-tag icon * fix: icon align * fix: icon margin * docs: icon usage * fix: input style * fix: add scoped * test: remove unuesd code * fix: cascader-panel * fix: icon style * fix: icon animation * refactor(components): el-drawer icon (#3796) * refactor(components): el-drawer icon * fix: close icon size * fix: close icon align * refactor(components): el-transfer icon (#3792) * refactor(components): el-transfer icon * fix: icon align * refactor(components): el-image-viewer icon (#3797) * refactor(components): el-image-view icon * fix: icon size * docs: update domo * style: format vue * fix: fullscreen icon * Add cursor for icons Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * refactor(components): rate-icon (#3891) * refactor(components): el-rate icon * docs: update example * docs: update * test: update * docs: update * fix: variable rename * fix: demo update * fix: allow half bug * refactor(components): el-time-picker icon (#3834) * refactor(components): el-button icon * refactor(components): date-picker icon * refactor(components): input icon * docs: update example * refactor(components): el-select icon * refactor(components): el-time-select icon * fix: icon width * docs: icon usage * fix: input style * fix: add scoped * fix: icon size * docs: icon display * fix: icon in button * docs: fix error * refactor(components): el-time-picker icon * fix: var * fix: icon align * test: delete unused code * test: fix error * fix: remove unused code * docs: fix typo * docs: update icon * fix: default prefix icon * fix: range picker icon align * Update cursor for picker Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com> * fix(components): el-input close icon * chore: delete fonts * fix: copy full style Co-authored-by: imswk <syfzxx@vip.qq.com> Co-authored-by: bastarder <85257684@qq.com> Co-authored-by: qianjie <qianjie@patsnap.com> Co-authored-by: Element <wallement@gmail.com> Co-authored-by: Alan Wang <948467222@qq.com> Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
2021-10-27 23:17:13 +08:00
ElIcon,
ArrowDown,
2020-08-28 11:44:04 +08:00
},
props: {
trigger: {
type: String as PropType<TriggerType | 'contextmenu'>,
2020-08-28 11:44:04 +08:00
default: 'hover',
},
type: String as PropType<ButtonType>,
2020-08-28 11:44:04 +08:00
size: {
type: String,
default: '',
},
splitButton: Boolean,
hideOnClick: {
type: Boolean,
default: true,
},
placement: {
type: String as PropType<Placement>,
2020-08-28 11:44:04 +08:00
default: 'bottom',
},
showTimeout: {
type: Number,
2020-09-21 15:39:53 +08:00
default: 150,
2020-08-28 11:44:04 +08:00
},
hideTimeout: {
type: Number,
default: 150,
},
tabindex: {
type: [Number, String],
2020-08-28 11:44:04 +08:00
default: 0,
},
effect: {
type: String as PropType<Effect>,
default: Effect.LIGHT,
2020-08-28 11:44:04 +08:00
},
maxHeight: {
type: [Number, String],
default: '',
},
popperClass: {
type: String,
default: '',
},
2020-08-28 11:44:04 +08:00
},
emits: ['visible-change', 'click', 'command'],
2020-11-04 11:24:36 +08:00
setup(props, { emit }) {
2020-08-28 11:44:04 +08:00
const _instance = getCurrentInstance()
const timeout = ref<Nullable<number>>(null)
const visible = ref(false)
const scrollbar = ref(null)
const wrapStyle = computed<CSSProperties>(() => ({
maxHeight: addUnit(props.maxHeight),
}))
2020-08-28 11:44:04 +08:00
watch(
() => visible.value,
(val) => {
2020-11-12 14:43:55 +08:00
if (val) triggerElmFocus()
if (!val) triggerElmBlur()
2020-08-28 11:44:04 +08:00
emit('visible-change', val)
}
2020-08-28 11:44:04 +08:00
)
const focusing = ref(false)
watch(
() => focusing.value,
(val) => {
2020-08-28 11:44:04 +08:00
const selfDefine = triggerElm.value
if (selfDefine) {
if (val) {
addClass(selfDefine, 'focusing')
} else {
removeClass(selfDefine, 'focusing')
}
}
}
2020-08-28 11:44:04 +08:00
)
2020-11-04 11:24:36 +08:00
const triggerVnode = ref<Nullable<ComponentPublicInstance>>(null)
2020-11-12 14:43:55 +08:00
const triggerElm = computed<Nullable<HTMLButtonElement>>(() => {
const _: any = (triggerVnode.value?.$refs.triggerRef as HTMLElement)
?.children[0]
return !props.splitButton ? _ : _?.children?.[1]
2020-11-04 11:24:36 +08:00
})
2020-08-28 11:44:04 +08:00
function handleClick() {
if (triggerElm.value?.disabled) return
if (visible.value) {
hide()
} else {
show()
}
}
function show() {
if (triggerElm.value?.disabled) return
timeout.value && clearTimeout(timeout.value)
2020-11-12 14:43:55 +08:00
timeout.value = window.setTimeout(
() => {
visible.value = true
},
['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout
2020-11-12 14:43:55 +08:00
)
2020-08-28 11:44:04 +08:00
}
function hide() {
if (triggerElm.value?.disabled) return
removeTabindex()
2020-11-12 14:43:55 +08:00
if (props.tabindex >= 0) {
2020-08-28 11:44:04 +08:00
resetTabindex(triggerElm.value)
}
clearTimeout(timeout.value)
2020-11-12 14:43:55 +08:00
timeout.value = window.setTimeout(
() => {
visible.value = false
},
['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout
2020-11-12 14:43:55 +08:00
)
2020-08-28 11:44:04 +08:00
}
function removeTabindex() {
triggerElm.value?.setAttribute('tabindex', '-1')
}
function resetTabindex(ele) {
removeTabindex()
ele?.setAttribute('tabindex', '0')
}
function triggerElmFocus() {
triggerElm.value?.focus?.()
}
2020-08-28 11:44:04 +08:00
function triggerElmBlur() {
triggerElm.value?.blur?.()
}
const dropdownSize = useSize()
2020-11-12 14:43:55 +08:00
function commandHandler(...args) {
2020-08-28 11:44:04 +08:00
emit('command', ...args)
}
provide('elDropdown', {
instance: _instance,
dropdownSize,
visible,
handleClick,
commandHandler,
show,
hide,
trigger: computed(() => props.trigger),
hideOnClick: computed(() => props.hideOnClick),
triggerElm,
})
onMounted(() => {
if (!props.splitButton) {
on(triggerElm.value, 'focus', () => {
focusing.value = true
})
on(triggerElm.value, 'blur', () => {
focusing.value = false
})
on(triggerElm.value, 'click', () => {
focusing.value = false
})
}
if (props.trigger === 'hover') {
on(triggerElm.value, 'mouseenter', show)
on(triggerElm.value, 'mouseleave', hide)
} else if (props.trigger === 'click') {
on(triggerElm.value, 'click', handleClick)
} else if (props.trigger === 'contextmenu') {
on(triggerElm.value, 'contextmenu', (e) => {
e.preventDefault()
handleClick()
})
2020-08-28 11:44:04 +08:00
}
2020-11-04 11:24:36 +08:00
Object.assign(_instance, {
handleClick,
hide,
resetTabindex,
})
2020-08-28 11:44:04 +08:00
})
const handlerMainButtonClick = (event) => {
2020-08-28 11:44:04 +08:00
emit('click', event)
hide()
}
2020-11-04 11:24:36 +08:00
return {
visible,
scrollbar,
wrapStyle,
2020-11-04 11:24:36 +08:00
dropdownSize,
handlerMainButtonClick,
triggerVnode,
}
2020-08-28 11:44:04 +08:00
},
})
</script>