mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-21 02:50:11 +08:00
feat(dropdown): add max-height prop of menu (#1436)
* feat(dropdown): add max-height prop of menu * feat: delete demo
This commit is contained in:
kooriookami
GitHub
parent
76c7acb87a
commit
d7341b0fec
@ -313,6 +313,30 @@ describe('Dropdown', () => {
|
||||
})
|
||||
await sleep(TIMEOUT)
|
||||
expect(wrapper.findComponent({ ref: 'd' }).attributes('tabindex')).toBe('0')
|
||||
})
|
||||
|
||||
test('max height', async () => {
|
||||
const wrapper = _mount(
|
||||
`
|
||||
<el-dropdown ref="b" max-height="60px">
|
||||
<span class="el-dropdown-link" ref="a">
|
||||
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>Apple</el-dropdown-item>
|
||||
<el-dropdown-item>Orange</el-dropdown-item>
|
||||
<el-dropdown-item>Cherry</el-dropdown-item>
|
||||
<el-dropdown-item disabled>Peach</el-dropdown-item>
|
||||
<el-dropdown-item divided>Pear</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
`,
|
||||
() => ({}),
|
||||
)
|
||||
const content = wrapper.findComponent({ ref: 'b' })
|
||||
const scrollbar = content.findComponent({ ref: 'scrollbar' })
|
||||
expect(scrollbar.find('.el-scrollbar__wrap').attributes('style')).toContain('max-height: 60px;')
|
||||
})
|
||||
})
|
||||
|
||||
@ -14,11 +14,18 @@
|
||||
:gpu-acceleration="false"
|
||||
>
|
||||
<template #default>
|
||||
<slot name="dropdown"></slot>
|
||||
<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="['el-dropdown', dropdownSize ? 'el-dropdown--' + dropdownSize : '']">
|
||||
<slot v-if="!splitButton" name="default"> </slot>
|
||||
<slot v-if="!splitButton" name="default"></slot>
|
||||
<template v-else>
|
||||
<el-button-group>
|
||||
<el-button
|
||||
@ -55,14 +62,17 @@ import {
|
||||
import { on, addClass, removeClass } from '@element-plus/utils/dom'
|
||||
import ElButton from '@element-plus/button'
|
||||
import ElButtonGroup from '@element-plus/button-group'
|
||||
import ElScrollbar from '@element-plus/scrollbar'
|
||||
import ElPopper from '@element-plus/popper'
|
||||
import { useDropdown } from './useDropdown'
|
||||
import { addUnit } from '@element-plus/utils/util'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ElDropdown',
|
||||
components: {
|
||||
ElButton,
|
||||
ElButtonGroup,
|
||||
ElScrollbar,
|
||||
ElPopper,
|
||||
},
|
||||
props: {
|
||||
@ -100,6 +110,10 @@ export default defineComponent({
|
||||
type: String,
|
||||
default: 'light',
|
||||
},
|
||||
maxHeight: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
emits: ['visible-change', 'click', 'command'],
|
||||
setup(props, { emit }) {
|
||||
@ -109,6 +123,9 @@ export default defineComponent({
|
||||
const timeout = ref<Nullable<number>>(null)
|
||||
|
||||
const visible = ref(false)
|
||||
const scrollbar = ref(null)
|
||||
const wrapStyle = computed(() => `max-height: ${addUnit(props.maxHeight)}`)
|
||||
|
||||
watch(
|
||||
() => visible.value,
|
||||
val => {
|
||||
@ -187,11 +204,13 @@ export default defineComponent({
|
||||
function triggerElmFocus() {
|
||||
triggerElm.value?.focus?.()
|
||||
}
|
||||
|
||||
function triggerElmBlur() {
|
||||
triggerElm.value?.blur?.()
|
||||
}
|
||||
|
||||
const dropdownSize = computed(() => props.size || ELEMENT.size)
|
||||
|
||||
function commandHandler(...args) {
|
||||
emit('command', ...args)
|
||||
}
|
||||
@ -247,6 +266,8 @@ export default defineComponent({
|
||||
|
||||
return {
|
||||
visible,
|
||||
scrollbar,
|
||||
wrapStyle,
|
||||
dropdownSize,
|
||||
handlerMainButtonClick,
|
||||
triggerVnode,
|
||||
|
||||
@ -741,6 +741,7 @@ $--tree-expand-icon-color: $--color-text-placeholder !default;
|
||||
$--dropdown-menu-box-shadow: $--box-shadow-light !default;
|
||||
$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
|
||||
$--dropdown-menuItem-hover-color: $--link-color !default;
|
||||
$--dropdown-menu-index: 10 !default;
|
||||
|
||||
/* Badge
|
||||
-------------------------- */
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
// using attributes selector to override
|
||||
|
||||
@include picker-popper(
|
||||
$--color-white,
|
||||
1px solid $--border-color-light,
|
||||
$--dropdown-menu-box-shadow,
|
||||
$--color-white,
|
||||
1px solid $--border-color-light,
|
||||
$--dropdown-menu-box-shadow,
|
||||
);
|
||||
|
||||
.#{$namespace}-dropdown-menu {
|
||||
@ -25,10 +25,22 @@
|
||||
#{& + '-selfdefine'} {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@include b(scrollbar__bar) {
|
||||
z-index: #{$--dropdown-menu-index + 1};
|
||||
}
|
||||
|
||||
@include b(dropdown__list) {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-button-group {
|
||||
display: block;
|
||||
|
||||
.#{$namespace}-button {
|
||||
float: none;
|
||||
}
|
||||
@ -82,7 +94,7 @@
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
z-index: $--dropdown-menu-index;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
background-color: $--color-white;
|
||||
|
||||
@ -306,12 +306,12 @@ Besides default size, Dropdown component provides three additional sizes for you
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Dropdown Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — |
|
||||
| size | menu size, also works on the split button | string | medium / small / mini | — |
|
||||
| max-height | the max height of menu | string / number | — | — |
|
||||
| split-button | whether a button group is displayed | boolean | — | false |
|
||||
| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | how to trigger | string | hover/click/contextmenu | hover |
|
||||
|
||||
@ -307,12 +307,12 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Dropdown atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
|
||||
| type | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string | — | — |
|
||||
| size | tamaño del menú, también funciona en `split-button` | string | medium / small / mini | — |
|
||||
| max-height | the max height of menu | string / number | — | — |
|
||||
| split-button | si se visualiza un grupo de botones | boolean | — | false |
|
||||
| placement | colocación del menú | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | cómo detonar | string | hover/click/contextmenu | hover |
|
||||
|
||||
@ -306,13 +306,13 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Attributs du Dropdown
|
||||
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | Type du bouton, se référer au composant `Button`. Ne marche que si `split-button` est `true`. | string | — | — |
|
||||
| size | Taille du menu, marche aussi avec `split button`. | string | medium / small / mini | — |
|
||||
| max-height | the max height of menu | string / number | — | — |
|
||||
| split-button | Si le bouton est séparé en deux. | boolean | — | false |
|
||||
| placement | Emplacement du menu déroulant | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | Comment déclencher l'ouverture du menu. | string | hover/click/contextmenu | hover |
|
||||
|
||||
@ -305,12 +305,12 @@ dropdownリストを起動するには、ボタンを使用します。
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### dropdown属性
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | `split-button` が `true`のとき、メニューボタンのタイプは `Button` コンポーネントを参照する。 | string | — | — |
|
||||
| size | メニューのサイズ(分割ボタンでも動作) | string | medium / small / mini | — |
|
||||
| max-height | the max height of menu | string / number | — | — |
|
||||
| split-button | ボタングループの表示の有無 | boolean | — | false |
|
||||
| placement | ポップメニューの配置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | トリガーのきっかけ | string | hover/click/contextmenu | hover |
|
||||
|
||||
@ -315,6 +315,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效) | string | — | — |
|
||||
| size | 菜单尺寸，在`split-button`为 true 的情况下也对触发按钮生效 | string | medium / small / mini | — |
|
||||
| max-height | 菜单最大高度 | string / number | — | — |
|
||||
| split-button | 下拉触发元素呈现为按钮组 | boolean | — | false |
|
||||
| placement | 菜单弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | 触发下拉的行为 | string | hover, click, contextmenu | hover |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user