说明:
继上篇使用elementUI解决全屏el-dropdown和el-tooltip无法显示的问题后,因需要升级迁移项目,使用vue2中的解决方法已不生效,现给出在vue3项目中使用elementPlus中的el-dropdown和el-tooltip组件在全屏状态下不显示的方法。
el-tooltip
在官方给出的el-tooltip中有一个属性为
将其值设置为false即可
<!-- 音量调节 -->
<el-tooltip
class="voice-tooltip"
v-model="showVolumeSlider"
content="调整音量"
effect="dark"
placement="top"
:teleported="false"
>
<template #content>
<el-slider
v-model="volume"
:min="0"
:max="100"
:show-tooltip="false"
vertical
height="200px"
@change="changeVolume"
></el-slider>
</template>
<span
class="iconfont voice-btn"
:class="{
'icon-sound-on': !isMuted && volume > 0,
'icon-sound-off': isMuted || volume === 0
}"
@mouseenter="toggleTooltip"
@click="toggleSound"
></span>
</el-tooltip>
el-dropdown
虽然 el-dropdown的官方文档中未给出此属性,但使用后依然生效,
<!-- 倍速选择 -->
<el-dropdown
class="filter-item"
:tabindex="2"
placement="top"
@command="changeTripleSpeed"
:teleported="false"
>
<span class="123nnn">{{ commandName() }}</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="item in tripleSpeedOptions"
:key="item.key"
:command="item.key"
:icon="tripleSpeed === item.key ? Check : ''"
>
{{ item.display_name }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>