vue右键菜单的简单封装
本文实例为大家分享了vue实现右键菜单封装的具体代码,供大家参考,具体内容如下
封装一个简单的右键菜单,要求右键处出现菜单,点击除了菜单部分可以关闭菜单。
组件
<template> <div class="ContextMenu" @click="close" v-show="show"> <ul class="menuMain" ref="menuMain" :style="{ top: y, left: x }"> <slot></slot> </ul> </div> </template> <script> export default { name: "ContextMenu", mounted() { document.addEventListener("contextmenu", this.contextClick); }, data() { return { x: "0px", y: "0px", show: false }; }, methods: { //右键事件 contextClick(e) { //阻止默认事件 e.preventDefault(); this.show = true; this.x = e.clientX + "px"; this.y = e.clientY + "px"; }, close(e) { //判断点击区域是否是menuMain的子元素 如果不是则关闭菜单 if (!this.$refs.menuMain.contains(e.target)) { this.show = false; } } } }; </script> <style lang="less" scoped> .ContextMenu { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; .menuMain { position: fixed; z-index: 100000; list-style: none; border-radius: 10px; padding: 0; margin: 0; background-color: #f5f5f5; overflow: hidden; li{ padding: 20px; cursor: pointer; &:hover{ background-color: #bdbdbd; } } } } </style>
使用
<context-menu> <li>hello</li> <li>hello</li> </context-menu>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)