bkui-vue3
bkui-vue3 copied to clipboard
bugfix(Dropdown): slot default 为 hover 才展现的话,slot content内容无法选中。移开自动隐藏
https://user-images.githubusercontent.com/4243366/181430517-8b2deea5-c067-460a-abfb-45a2814c7888.mov
……

<template>
<div class='demo-box'>
<div class='tool-box'>
<bk-dropdown>
<bk-button>更多操作</bk-button>
<template #content>
<bk-dropdown-menu>
<bk-dropdown-item
v-for="item in dropdownList"
:key="item"
@click="handleClick(item)"
>
{{ item }}
</bk-dropdown-item>
</bk-dropdown-menu>
</template>
</bk-dropdown>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import BkDropdown from '@bkui-vue/dropdown';
import BkMessage from '@bkui-vue/message';
const dropdownList = ref(['生产环境', '预发布环境', '测试环境', '正式环境', '开发环境', '调试环境']);
const handleClick = (item) => {
BkMessage(item);
};
</script>
<style>
.tool-box{
display: none;
}
.demo-box{
height: 50px;
width: 200px;
border: 1px solid #ccc;
}
.demo-box:hover .tool-box{
display: block;
}
</style>