bkui-vue3 icon indicating copy to clipboard operation
bkui-vue3 copied to clipboard

bugfix(Dropdown): slot default 为 hover 才展现的话,slot content内容无法选中。移开自动隐藏

Open zhoulujun opened this issue 3 years ago • 2 comments

https://user-images.githubusercontent.com/4243366/181430517-8b2deea5-c067-460a-abfb-45a2814c7888.mov

……

zhoulujun avatar Jul 28 '22 05:07 zhoulujun

image

zhoulujun avatar Jul 28 '22 06:07 zhoulujun

<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>

zhoulujun avatar Jul 28 '22 06:07 zhoulujun