fix(components): el-dropdown cannot be used with v-show (#4221)

This commit is contained in:
C.Y.Kun
2021-11-05 15:33:17 +08:00
committed by GitHub
parent c2571b59c7
commit ff332345f2

View File

@@ -1,58 +1,55 @@
<template>
<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"
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="[
'el-dropdown',
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 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"
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>
</template>
<script lang="ts">
import {