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)

相关推荐

  • vue中如何自定义右键菜单详解

    在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > </li> 在页面编写右键菜单内容: <ul v-show=&q

  • 1分钟Vue实现右键菜单

    1分钟Vue实现右键菜单

    目录 效果图 安装 代码实现 自定义样式 总结 高效实现需求,避免重复造轮子.今天给大家分享的是,如何在最短的时候内实现右键菜单.方法也很简单,一个插件就可以搞定,话不多说,上效果图: 效果图 安装 npm install vue-contextmenujs 或 yarn add vue-contextmenujs 使用 import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); 代码实现 以element-ui图

  • vue添加自定义右键菜单的完整实例

    vue添加自定义右键菜单的完整实例

    一.写原生方法 1.在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > ... </li> 2.在页面编写右键菜单内容:

  • vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装  npm install rightmenu --save-dev   开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu)

  • 原生Vue 实现右键菜单组件功能

    Vue 原生实现右键菜单组件, 零依赖 快速安装 npm install vue-contextmenujs 使用 测试中使用的是 element-ui 图标 import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); <template> <div id="app" style="width:100vw;height:100vh" @contextmenu

  • Vue+element-ui添加自定义右键菜单的方法示例

    1.在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件 <template> <el-button size="medium" @contextmenu.prevent.native="openMenu($event)"> ...... </template> 2.在页面编写右键菜单内容 <ul v-show="visible" :style="{left:left+'px'

  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c

  • vue右键菜单的简单封装

    vue右键菜单的简单封装

    本文实例为大家分享了vue实现右键菜单封装的具体代码,供大家参考,具体内容如下 封装一个简单的右键菜单,要求右键处出现菜单,点击除了菜单部分可以关闭菜单. 组件 <template>   <div class="ContextMenu" @click="close" v-show="show">     <ul class="menuMain" ref="menuMain" :

  • ASP.NET MVC 2右键菜单和简单分页实例讲解

    ASP.NET MVC 2右键菜单和简单分页实例讲解

    右键菜单非常方便,很多时候会用到.这篇文章将使用一个JQUERY的插件在ASP.NET MVC中实现右键菜单.本文还将介绍一下在ASP.NET MVC中如何实现简单的分页.效果如下图: 新建一个asp.net mvc应用程序.将此插件放入Scripts文件夹.并在页面上引用. 定义右键菜单: <div class="contextMenu" id="myMenu1"> <ul> <li id="detail">

  • vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    之前是采用npm或者yarn直接装包vue-contextmenujs的形式: npm install vue-contextmenujs -S || yarn add vue-contextmenujs 当右键点击记录时,完整展示应该是如下图所示: 结果,当点击靠前的记录时,顶部一部分记录被浏览器给遮挡了,如下图所示: 由于是使用的第三方开源组件,所以我直接将组件源码下载下来,然后修改组件源码,通过直接在源码中引入组件的形式调用.组件github仓库地址:https://github.com/

  • vue使用monaco editor汉化右键菜单示例

    vue使用monaco editor汉化右键菜单示例

    安装依赖插件 首先使用npm或者其他包管理工具安装依赖插件: npm install monaco-editor --save npm install monaco-editor-nls --save npm install monaco-editor-webpack-plugin --save npm install monaco-editor-esm-webpack-plugin --save-dev 推荐安装的依赖版本对应:package.json { "dependencies"

  • C#自定义控件添加右键菜单的方法

    C#自定义控件添加右键菜单非常简单,主要用到控件,像control定义右键菜单,用items.add()叠加右键菜单内容,用click事件处理函数. 1.control是要定义右键菜单的控件. private void control_MouseDown(object sender, MouseEventArgs e) {    if (e.Button == MouseButtons.Right)    {        ContextMenu menu = new rightClickMen

  • jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

    jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

    目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE H

  • jQuery简单实现禁用右键菜单

    代码非常简单,这里就不多废话了,直接上代码: 复制代码 代码如下: $(document).ready(function(){     $(document).bind("contextmenu",function(e){         return false;     }); }); 5行代码搞定,简单吧,当然小伙伴们可以自由扩展下,可以实现屏蔽右键菜单的指定项.

  • iOS下拉选择菜单简单封装

    本文实例为大家分享了简单封装的iOS下拉选择菜单代码,供大家参考,具体内容如下 // // OrderListDownMenu.h #import <UIKit/UIKit.h> @protocol OrderListDownMenuDelegate <NSObject> - (void)OrderListDownMenu:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath; @end

随机推荐