vue3实现右键菜单
vue3原生实现右键菜单
·
vue3原生实现右键菜单
效果图
代码
<template>
<div class="home">
<!-- 在需要右键菜单的元素,绑定contextmenu事件 -->
<div
class="test" v-for="item in menus" :key="item"
@contextmenu.prevent="openMenu($event,item)">{{item}}</div>
<!-- 右键菜单部分 -->
<ul v-show="visible1"
:style="{ left: position.left + 'px', top: position.top + 'px', display: (visible1 ? 'block' : 'none') }"
class="contextmenu">
<div class="item">
复制Vue代码
</div>
<div class="item" @click="copySvg(rightClickItem.resource, rightClickItem.name)">
复制SVG
</div>
<div class="item" @click="downSvg(rightClickItem.resource, rightClickItem.name)">
下载SVG
</div>
<div class="item" @click="downPng(rightClickItem.resource, rightClickItem.name)">
下载PNG
</div>
</ul>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
const visible1 = ref(false)
const position = ref({
top: 0,
left: 0
})
const rightClickItem = ref('')
const openMenu = (e:MouseEvent, item:any) => {
visible1.value = true
position.value.top = e.pageY
position.value.left = e.pageX
rightClickItem.value = item
}
const closeMenu = () => {
visible1.value = false
}
watch(visible1, () => {
if (visible1.value) {
document.body.addEventListener('click', closeMenu)
} else {
document.body.removeEventListener('click', closeMenu)
}
})
</script>
<style scoped lang="scss">
.contextmenu {
width: 100px;
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
.item {
padding: 0 15px;
height: 35px;
width: 100%;
line-height: 35px;
color: rgb(29, 33, 41);
cursor: pointer;
}
.item:hover {
background: rgb(229, 230, 235);
}
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)