说明
悬浮操作。当滑到某处，需要弹出操作，并且保持住显示效果。
示例
函数定义
// 当同时有多个需要悬停的区域，需要传入id字段
function(delay = 100): { // 延迟显示时间，默认100毫秒
enter: (id?: string), // 进入悬停区域
leave: (id?: string), // 离开悬停区域
isHovering: (id?: string) => boolean, // 判断是否正在悬停状态
}
1
2
3
4
5
6
2
3
4
5
6
Demo代码
<template>
<hl-group
v-for="item in items"
:key="item"
gap="var(--xs)"
align="items-between"
class="w-full m-b-sm"
@mouseenter="enter(item)"
@mouseleave="leave(item)"
>
<hl-button type="link">{{ item }}</hl-button>
<hl-dropdown v-show="isHovering(item)" class="static">
<hl-button type="link">操作</hl-button>
<template #dropdown>
<hl-dropdown-menu @mouseenter="enter(item)" @mouseleave="leave(item)">
<hl-dropdown-item>编辑</hl-dropdown-item>
<hl-dropdown-item>删除</hl-dropdown-item>
</hl-dropdown-menu>
</template>
</hl-dropdown>
</hl-group>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { HlGroup, HlButton, HlDropdown, HlDropdownItem, HlDropdownMenu } from 'helper-ui'
import { useHovering } from './'
export default defineComponent({
components: { HlGroup, HlButton, HlDropdown, HlDropdownItem, HlDropdownMenu },
setup() {
const items = ref(['数据一', '数据二', '数据三'])
const { enter, leave, isHovering } = useHovering()
return {
items,
enter,
leave,
isHovering,
}
},
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45