【sgContextmenu】自定义组件：基于elementUI自定义右键菜单、右击菜单sgContextmenu，v1.0，仅支持一级菜单，比较简单轻便。 |
您所在的位置：网站首页 › qq的右键菜单可以禁用吗 › 【sgContextmenu】自定义组件：基于elementUI自定义右键菜单、右击菜单sgContextmenu，v1.0，仅支持一级菜单，比较简单轻便。 |
【sgContextmenu】自定义组件：基于elementUI自定义右键菜单、右击菜单sgContextmenu，v1.0，仅支持一级菜单，比较简单轻便。
|
定义右键菜单组件sgContextmenu.vue export default { name: 'sgContextMenu', data() { return { style: null, } }, props: ["target", "value"], watch: { target(val) { val && this.init(); }, value(val) { val ? this.__add() : this.__remove(); }, }, methods: { // 初始化事件 init() { this.$nextTick(() => this.target.addEventListener('contextmenu', this.__show)); }, // 绑定事件 __add() { document.addEventListener('mousedown', this.__hide); document.addEventListener('mousewheel', this.__hide); }, // 取消事件 __remove() { document.removeEventListener('mousedown', this.__hide); document.removeEventListener('mousewheel', this.__hide); }, // 隐藏菜单 __hide() { this.$emit('input', false) //隐藏 }, // 右键显示菜单 __show(e) { this.$emit('input', true) //隐藏 e.target.click();//点击右键触发的元素 let left = e.clientX + 10; let top = e.clientY + 10; this.$nextTick(() => { let rect = this.$refs.contextmenu.getBoundingClientRect() // 如果超出浏览器右侧 left + rect.width > innerWidth && (left = innerWidth - rect.width) // 如果超出浏览器底部 top + rect.height > innerHeight && (top = innerHeight - rect.height) this.style = { left: left + 'px', top: top + 'px' }; }); this.$emit('targetElement', e.target);//获取右键的DOM元素抛出给父组件 e.preventDefault(); e.stopPropagation(); }, } } .sgContextMenu { z-index: 999999; //根据情况自己拿捏 position: fixed; padding: 10px; background-color: #fff; border: 1px solid #ebeef5; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); &>ul { list-style: none; margin: 0; padding: 0; &>li { white-space: nowrap; list-style: none; border-radius: 4px; line-height: 36px; padding: 0 20px; margin: 0; font-size: 14px; color: #606266; cursor: pointer; transition: .382s; display: flex; justify-content: space-between; align-items: center; &:hover { background-color: #fff6fe; color: #743a72; } &[disabled] { opacity: 0.382; pointer-events: none; /*去色、灰色*/ filter: grayscale(100%); } } } }应用右键菜单组件 关闭当前选项卡(Alt + W) 关闭所有(Ctrl + Alt + W) 关闭其他(Alt + X) 关闭左边 关闭右边 关闭左边所有 关闭右边所有 ... import sgContextmenu from "../components/sgContextmenu"; components: { sgContextmenu, } ... data() { return { // 右键菜单---------------------------------------- showContextMenu: false, contextMenuTarget: null, //出现右键菜单的DOM对象 }; }, mounted() { this.contextMenuTarget = document.querySelector(".el-tabs__nav");//出现右键菜单的DOM元素 },需要多级子菜单的粉丝朋友，复杂应用场景的请点击下方链接取用 基于elementUI自定义右键菜单、右击菜单sgContextMenu_v2升级版2.0，支持无限极子菜单，可以自定义菜单按钮图标样式等，自认为这次的封装很到位，个人强烈推荐直接复制使用，不喜勿喷~_你挚爱的强哥的博客-CSDN博客基于elementUI自定义右键菜单、右击菜单contextMenu_elementui 右键菜单_你挚爱的强哥的博客-CSDN博客。觉得这个v2.0版本的右键菜单太过于复杂的粉丝，可以点击下方去精简版1.0随取随用~定义右键菜单组件sgContextmenu.vue。_elementui 右键菜单。 |
【本文地址】
今日新闻 |
推荐新闻 |