test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-03 11:47:48 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(dropdown): fix dropdown code based on popper's change

Browse Source
This commit is contained in:
JeremyWuuuuu 2020-09-14 23:42:33 +08:00 committed by hangzou
parent 9389c16685
commit 9902c33dbf
4 changed files with 112 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/dropdown/__tests__/dropdown.spec.ts
View File

@ -44,13 +44,13 @@ describe('Dropdown', () => {
)
const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
const triggerElm = wrapper.find('.el-dropdown-link')
expect(content.value).toBe(false)
expect(content.visible).toBe(false)
await triggerElm.trigger(MOUSE_ENTER_EVENT)
await sleep(TIMEOUT)
expect(content.value).toBe(true)
expect(content.visible).toBe(true)
await triggerElm.trigger(MOUSE_LEAVE_EVENT)
await sleep(TIMEOUT)
expect(content.value).toBe(false)
expect(content.visible).toBe(false)
})
test('menu click', async () => {
@ -117,13 +117,13 @@ describe('Dropdown', () => {
)
const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
const triggerElm = wrapper.find('.el-dropdown-link')
expect(content.value).toBe(false)
expect(content.visible).toBe(false)
await triggerElm.trigger(MOUSE_ENTER_EVENT)
await sleep(TIMEOUT)
expect(content.value).toBe(false)
expect(content.visible).toBe(false)
await triggerElm.trigger(CLICK)
await sleep(TIMEOUT)
expect(content.value).toBe(true)
expect(content.visible).toBe(true)
})
test('split button', async () => {
@ -157,12 +157,12 @@ describe('Dropdown', () => {
const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
const triggerElm = wrapper.find('.el-dropdown__caret-button')
const button = wrapper.find('.el-button')
expect(content.value).toBe(false)
expect(content.visible).toBe(false)
await button.trigger('click')
expect((wrapper.vm as any).name).toBe('click')
await triggerElm.trigger(MOUSE_ENTER_EVENT)
await sleep(TIMEOUT)
expect(content.value).toBe(true)
expect(content.visible).toBe(true)
})
test('hide on click', async () => {
@ -192,7 +192,7 @@ describe('Dropdown', () => {
await sleep(TIMEOUT)
await wrapper.findComponent({ ref: 'c' }).trigger('click')
await sleep(TIMEOUT)
expect(content.value).toBe(true)
expect(content.visible).toBe(true)
})
test('triggerElm keydown', async () => {
@ -224,7 +224,7 @@ describe('Dropdown', () => {
keyCode: eventKeys.enter,
})
await sleep(TIMEOUT)
expect(content.value).toBe(false)
expect(content.visible).toBe(false)
await triggerElm.trigger(MOUSE_ENTER_EVENT)
await sleep(TIMEOUT)
@ -232,7 +232,7 @@ describe('Dropdown', () => {
keyCode: eventKeys.tab,
})
await sleep(TIMEOUT)
expect(content.value).toBe(false)
expect(content.visible).toBe(false)
})
test('dropdown menu keydown', async () => {

5
packages/dropdown/src/dropdown-menu.vue
View File

@ -1,6 +1,5 @@
<template>
<ul
v-clickOutside:[_trigger]="_hide"
:class="[size && `el-dropdown-menu--${size}`]"
class="el-dropdown-menu"
@mouseenter.stop="show"
@ -11,14 +10,10 @@
</template>
<script lang='ts'>
import { defineComponent, getCurrentInstance, onMounted, ref } from 'vue'
import ClickOutside from '@element-plus/directives/click-outside'
import { useDropdown, initDropdownDomEvent } from './useDropdown'
export default defineComponent({
name: 'ElDropdownMenu',
directives: {
ClickOutside,
},
setup() {
const { _elDropdownSize, elDropdown } = useDropdown()
const size = _elDropdownSize.value

12
packages/dropdown/src/dropdown.vue
View File

@ -11,7 +11,6 @@ import {
VNode,
} from 'vue'
import { on, addClass, removeClass } from '@element-plus/utils/dom'
import ClickOutside from '@element-plus/directives/click-outside'
import ElButton from '@element-plus/button/src/button.vue'
import ElButtonGroup from '@element-plus/button/src/button-group.vue'
import ELPopper from '@element-plus/popper/src/index.vue'
@ -19,9 +18,6 @@ import { useDropdown } from './useDropdown'
export default defineComponent({
name: 'ElDropdown',
directives: {
ClickOutside,
},
components: {
ElButton,
ElButtonGroup,
@ -225,14 +221,16 @@ export default defineComponent({
class: 'el-dropdown',
}, [triggerVnode.value])
const onVisibleUpdate = (val: boolean) => visible.value = val
return () => h(ELPopper, {
ref: 'popper',
placement: props.placement,
effect: props.effect,
value: visible.value,
manualMode: true,
visible: visible.value,
'onUpdate:visible': onVisibleUpdate,
popperClass: 'el-dropdown-popper',
trigger: props.trigger,
trigger: [props.trigger],
}, {
default: () => slots.dropdown?.(),
trigger: () => dropdownVnode,

169
website/docs/en-US/dropdown.md
View File

@ -11,13 +11,15 @@ Hover on the dropdown menu to unfold it for more actions.
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<style>
@ -44,23 +46,27 @@ Use the button to trigger the dropdown list.
<el-button type="primary">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
Dropdown List
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<style>
@ -101,13 +107,15 @@ Click the triggering element or hover on it.
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
<el-col :span="12">
@ -116,13 +124,15 @@ Click the triggering element or hover on it.
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
@ -155,13 +165,15 @@ Use `hide-on-click` to define if menu closes on clicking.
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<style>
@ -186,13 +198,15 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">Action 1</el-dropdown-item>
<el-dropdown-item command="b">Action 2</el-dropdown-item>
<el-dropdown-item command="c">Action 3</el-dropdown-item>
<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="a">Action 1</el-dropdown-item>
<el-dropdown-item command="b">Action 2</el-dropdown-item>
<el-dropdown-item command="c">Action 3</el-dropdown-item>
<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<style>
@ -226,42 +240,51 @@ Besides default size, Dropdown component provides three additional sizes for you
```html
<el-dropdown split-button type="primary">
Default
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown size="medium" split-button type="primary">
Medium
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown size="small" split-button type="primary">
Small
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown size="mini" split-button type="primary">
Mini
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
```
:::