扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue实现自定义右击删除菜单的示例
  • 124

0
分享到

Vue实现自定义右击删除菜单的示例

Vue右击删除菜单Vue自定义右击删除 2023-02-02 15:02:36 124人浏览 泡泡鱼
摘要

目录一、定义和使用二、语法三、使用细节四、案例4.1 自定义右击删除菜单步骤4.2 技术点4.3 html代码4.4 CSS样式4.5 基础数据4.6 模拟数据4.7 添加日期列4.

一、定义和使用

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。

二、语法

HTML 中:

<element oncontextmenu="myScript">

javascript 中:

object.oncontextmenu=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("contextmenu", myScript);

Jquery中，使用on监听事件

$(document).on('contextmenu', myScript);
注意： Internet Explorer 8 及更早 IE 浏览器版本不支持 addEventListener() 。

三、使用细节

是否支持冒泡:

Yes

是否可以取消:

Yes

事件类型:

MouseEvent

支持的 HTML 标签:

所有 HTML 元素

四、案例

这通过一个小案例，在考勤统计列表中，每行中对应某员工这月周期内的每天考勤数据；如果某条记录需要删除，这里通过在记录上直接右击出现删除菜单，操作起来则更为方便。如下图：

4.1 自定义右击删除菜单步骤

通过DOM对象监听鼠标点击事件

触发鼠标点击事件，获取鼠标当前浏览器位置

根据当前位置重新调整自定义contextmenu的位置

显示自定义contextmenu

4.2 技术点

这里使用Vue技术框架来做这个案例，统计列表使用是element-ui中的table组件，事件监听和数据获取通过jquery实现，在开发前请将其通过npm进行安装。

//安装element-ui
npm i element-ui -S
//安装jquery
npm i jquery -S

4.3 html代码

这里通过列数据中isDate判断该列是否渲染为对应日期列，渲染日期相对应的考勤记录时，需要追加data-prop和data-id进行数据传递，后续执行删除操作时会使用到。

<template>
  <div class="list-wrap">
    <el-table
          stripe
          :data="tableData"
                class="list-table"
          style="width: 100%">
                <el-table-column type="selection" width="55" fixed="left"></el-table-column>
                <template v-for="(item, index) in tableColumn">
                    <el-table-column :prop="item.prop" :label="item.name" :key="index" :width="item.width" v-if="item.isDate">
                        <template slot-scope="scope">
                            <span class="date-cell" v-html="scope.row[item.prop]"
                                        :data-prop="item.prop"
                                        :data-id="scope.row['id_'+item.prop]"></span>
                        </template>
                    </el-table-column>
                    <el-table-column :prop="item.prop" :label="item.name" :key="index" :width="item.width" v-else fixed="left"></el-table-column>
                </template>
        </el-table>
  </div>
</template>
 
<style lang="scss">
@import './index.scss';
</style>

4.4 CSS样式

.date-cell类选择器对考勤记录数据进行样式修改，更改鼠标为小手图标，并禁止选择文本内容，为避免后期右击时会误操作选中内容。

.menu-box类选择器为右击菜单增加基础样式。

.date-cell{ cursor: pointer;
  -moz-user-select:none; 
  -WEBkit-user-select:none; 
  -ms-user-select:none; 
  -khtml-user-select:none; 
  user-select:none;
}
 
.menu-box{
  position: absolute;
 
  ul.list{
    background-color: #fff;
    border: 1px solid #ccc;
    li{
      border-top: 1px solid #ccc;
      padding: 6px 15px;
      font-size: 14px;
      line-height: 1.5;
      color: #666;
      list-style: none;
      cursor: pointer;
 
      &:first-child{
        border-top: 0;
      }
    }
  }
}

4.5 基础数据

变量tableData用于存储员工考勤数据，变量tableColumn用于存储表格列头部数据定义，在获取考勤记录后，动态追加日期列到变量tableColumn中。

<script> 
  export default {
    data(){
      return {
        tableData: [],
        tableColumn: [
            {prop: "name", name: "姓名", width: "80px"},
            {prop: "workday", name: "实际到岗/天", width: "100px"},
        ]
      }
    },
    created() {
      
    },
    methods: {
    
    }
  }
</script>

此时页面样式如下图：

4.6 模拟数据

这里在目录位置新建demo.JSON文件，将以下数据拷入即可。

[
  {"id":1482,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-01"},
  {"id":1481,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-02"},
  {"id":1480,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-03"},
  {"id":1479,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-04"},
  {"id":1478,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-05"},
  {"id":1477,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-06"},
  {"id":1476,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-07"},
  {"id":1475,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-08"},
  {"id":1474,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-09"},
  {"id":1473,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-10"},
  {"id":1472,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-11"},
  {"id":1471,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-12"},
  {"id":1470,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-13"},
  {"id":1469,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-14"},
  {"id":1468,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-15"},
  {"id":1467,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-16"},
  {"id":1466,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-17"},
  {"id":1465,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-18"},
  {"id":1464,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-19"},
  {"id":1463,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-20"},
  {"id":1462,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-21"},
  {"id":1461,"name":"张三","record":["08:30","18:00"],"recorddate":"2023-01-22"},
  {"id":1382,"name":"李四","record":["08:30","18:00"],"recorddate":"2023-01-01"},
  {"id":1381,"name":"李四","record":["08:30","18:00"],"recorddate":"2023-01-07"},
  {"id":1380,"name":"李四","record":["08:30","18:00"],"recorddate":"2023-01-08"},
  {"id":1379,"name":"李四","record":["08:30","18:00"],"recorddate":"2023-01-15"},
  {"id":1378,"name":"李四","record":["08:30","18:00"],"recorddate":"2023-01-21"},
  {"id":1377,"name":"李四","record":["08:30","18:00"],"recorddate":"2023-01-22"},
  {"id":1376,"name":"王五","record":["08:30","18:00"],"recorddate":"2023-01-05"},
  {"id":1375,"name":"王五","record":["08:30","18:00"],"recorddate":"2023-01-06"},
  {"id":1374,"name":"王五","record":["08:30","18:00"],"recorddate":"2023-01-09"},
  {"id":1373,"name":"王五","record":["08:30","18:00"],"recorddate":"2023-01-11"},
  {"id":1372,"name":"王五","record":["08:30","18:00"],"recorddate":"2023-01-10"},
  {"id":1371,"name":"王五","record":["08:30","18:00"],"recorddate":"2023-01-04"},
  {"id":1370,"name":"王五","record":["08:30","18:00"],"recorddate":"2023-01-03"},
  {"id":1369,"name":"王五","record":["08:30","18:00"],"recorddate":"2023-01-02"}
]

4.7 添加日期列

引入刚才创建好的demo.json文件，导致模拟数据。变量tableData用于存储考勤数据，变量tableColumn用于存储表格列数据，在updateList()函数执行后，获取全部唯一日期数据，和全部用户数据，分别存储到tableData和tableColumn变量中。

由于这里是通过模拟数据实现的功能效果，后期在项目中，相应数据是通过接口查询获取而且的。

<script>
  import DemoData from './demo.json'
 
  export default {
    data(){
      return {
        tableData: [],
        tableColumn: [
            {prop: "name", name: "姓名", width: "80px"},
            {prop: "workday", name: "实际到岗/天", width: "100px"},
        ]
      }
    },
    created() {
      this.updateList();
    },
    methods: {
 
      //加载列表数据
      updateList(){
        //获取日期列表
        let dateColumn = [],
            employeeList = [];
 
        //循环获取唯一 列日期 和 唯一 员工信息
        DemoData.map(item => {
          if(!dateColumn.includes(item.recorddate)){
            dateColumn.push(item.recorddate);
          }
          if(!employeeList.includes(item.name)){
            employeeList.push(item.name);
          }
        });
        //升序排序
        dateColumn.sort();
        //修改列长度，以免name和workday固定列被替换
        this.tableColumn.length = 2;
        //追加日期列
        this.tableColumn = this.tableColumn.concat(dateColumn.map(item => {
          return {
            prop: item,
            name: item,
            width: "100px",
            isDate: true
          }
        }));
      }
      //end
    }
  }
</script>

以上代码完成后，日期列则可以正常显示出来了，如下图：

4.8 重组行数据

通过变量employeeList存储的员工信息，遍历查询模拟数据中各自对应的考勤记录，并通过变量dateColumn中存储的日期作为键，存储到对应员工信息中。

<script>
  import DemoData from './demo.json'
 
  export default {
    data(){
      return {
        tableData: [],
        tableColumn: [
            {prop: "name", name: "姓名", width: "80px"},
            {prop: "workday", name: "实际到岗/天", width: "100px"},
        ]
      }
    },
    created() {
      this.updateList();
    },
    methods: {
 
      //加载列表数据
      updateList(){
        //获取日期列表
        let dateColumn = [],
            employeeList = [];
 
        //循环获取唯一 列日期 和 唯一 员工信息
        DemoData.map(item => {
          if(!dateColumn.includes(item.recorddate)){
            dateColumn.push(item.recorddate);
          }
          if(!employeeList.includes(item.name)){
            employeeList.push(item.name);
          }
        });
        //升序排序
        dateColumn.sort();
        //修改列长度，以免name和workday固定列被替换
        this.tableColumn.length = 2;
        //追加列
        this.tableColumn = this.tableColumn.concat(dateColumn.map(item => {
          return {
            prop: item,
            name: item,
            width: "100px",
            isDate: true
          }
        }));
 
        //重组员工考勤数据，一行显示考勤记录
        this.tableData = employeeList.map(item => {
          let nData = {},
              tmp = null,
              realWorkSize = 0;
 
          //获取对应员工的考勤记录
          dateColumn.forEach(key => {
            tmp = DemoData.filter(sub => sub.name == item && sub.recorddate == key);
            if(tmp.length==1&&tmp[0]['record'].length==2){
              //记录考勤数据
              nData[key] = tmp[0]['record'][0] + '<br />' + tmp[0]['record'][1];
              //保存对应考勤记录的ID
              nData['id_'+key] = tmp[0]['id'];
              //统计到岗天数
              realWorkSize++;
            }else{
              nData[key] = '-';
            }
          })
 
          return {
           name: item,
           workday: realWorkSize,
           ...nData
          }
        });
      }
      //end
    }
  }
</script>

此时模拟数据中考勤记录都正常显示在页面中了，如下图：

五、自定义右击菜单

此时我们可以来实现自定义右击菜单了，这里只简单讲解下实现方法和步骤，如有实际需求可对此功能进行封装处理，这里先用散装代码实现此功能。

5.1 准备工作

首先引入jquery，并且添加禁用右击菜单的鼠标事件，代码如下：

<script>
  import DemoData from './demo.json'
  import $ from 'jquery'
 
  //记录是否悬浮在指定单元格上
  let isHoverCell = false;
  //记录悬浮位置考勤记录对象
  let hoverData = null;
  //右击菜单Dom对象
  let MenuBox = null;
  //记录上一个数据的ID，用于判断是否需要新打开一个窗口
  let tmpPreId = 0;
 
  export default {
    data(){
      return {
        tableData: [],
        tableColumn: [
            {prop: "name", name: "姓名", width: "80px"},
            {prop: "workday", name: "实际到岗/天", width: "100px"},
        ]
      }
    },
    created() {
      this.updateList();
 
      //右击菜单事件
      window.oncontextmenu = function(e){
        if(isHoverCell){
          //取消默认的浏览器自带右键
          e.preventDefault();
        }
      }
      //event end
    },
    methods: {
      //...
      //end
    }
  }
</script>

绑定oncontextmenu事件后，当鼠标悬浮在考勤记录上时，则变量isHoverCell值为true，此时右击禁用则会生效。

5.2 判断鼠标位置

在methods中新建cellAddEvent()函数，将其放到updateList()函数执行结束位置，延迟100秒再执行，以防数据未渲染完jquery无法查询到全部考勤记录的DOM节点。

另外，考勤数据会因增删改查等操作，重新渲染，所以每个单元格绑定事件，也会在重新渲染后被释放，需渲染完后重新绑定事件，故cellAddEvent()函数应放应updateList()函数内执行。

<script>
  import DemoData from './demo.json'
  import $ from 'jquery'
 
  //记录是否悬浮在指定单元格上
  let isHoverCell = false;
  //记录悬浮位置考勤记录对象
  let hoverData = null;
  //右击菜单Dom对象
  let MenuBox = null;
  //记录上一个数据的ID，用于判断是否需要新打开一个窗口
  let tmpPreId = 0;
 
  export default {
    data(){
      return {
        tableData: [],
        tableColumn: [
            {prop: "name", name: "姓名", width: "80px"},
            {prop: "workday", name: "实际到岗/天", width: "100px"},
        ]
      }
    },
    created() {
      this.updateList();
 
      //右击菜单事件
      window.oncontextmenu = function(e){
        if(isHoverCell){
          //取消默认的浏览器自带右键
          e.preventDefault();
        }
      }
      //event end
    },
    methods: {
      
      cellAddEvent(){
        let that = this,
            propData = "";
        //悬浮事件
        $('.date-cell').hover(function(){
          isHoverCell = true;
 
          let id = $(this).data('id'),
              filterData = DemoData.filter(item => item.id == id);
 
          if(filterData.length==1){
            hoverData = {
              prop: $(this).data('prop'),
              data: filterData[0]
            }
          }
          //if end
        }, function(){
          isHoverCell = false;
          hoverData = null;
        });
 
      },
      //加载列表数据
      updateList(){
        //获取日期列表
        let dateColumn = [],
            employeeList = [];
 
        //循环获取唯一 列日期 和 唯一 员工信息
        DemoData.map(item => {
          if(!dateColumn.includes(item.recorddate)){
            dateColumn.push(item.recorddate);
          }
          if(!employeeList.includes(item.name)){
            employeeList.push(item.name);
          }
        });
        //升序排序
        dateColumn.sort();
        //修改列长度，以免name和workday固定列被替换
        this.tableColumn.length = 2;
        //追加列
        this.tableColumn = this.tableColumn.concat(dateColumn.map(item => {
          return {
            prop: item,
            name: item,
            width: "100px",
            isDate: true
          }
        }));
 
        //重组员工考勤数据，一行显示考勤记录
        this.tableData = employeeList.map(item => {
          let nData = {},
              tmp = null,
              realWorkSize = 0;
 
          //获取对应员工的考勤记录
          dateColumn.forEach(key => {
            tmp = DemoData.filter(sub => sub.name == item && sub.recorddate == key);
            if(tmp.length==1&&tmp[0]['record'].length==2){
              //记录考勤数据
              nData[key] = tmp[0]['record'][0] + '<br />' + tmp[0]['record'][1];
              //保存对应考勤记录的ID
              nData['id_'+key] = tmp[0]['id'];
              //统计到岗天数
              realWorkSize++;
            }else{
              nData[key] = '-';
            }
          })
 
          return {
           name: item,
           workday: realWorkSize,
           ...nData
          }
        });
 
        setTimeout(() => {
          this.cellAddEvent();
        }, 100);
      }
      //end
    }
  }
</script>

此时大家会发现，鼠标在页面其他位置可以正常右击显示默认菜单，但放到考勤记录上时，右击菜单则失效无法显示了。

5.3 添加自定义菜单

当变量isHoverCell为true时，右击执行rightMenuInitial()函数，通过jquery创建菜单容器后，追加到body中。此时右击则能看到删除按钮了。

<script> 
  import DemoData from './demo.json'
  import $ from 'jquery'
 
  //记录是否悬浮在指定单元格上
  let isHoverCell = false;
  //记录悬浮位置考勤记录对象
  let hoverData = null;
  //右击菜单Dom对象
  let MenuBox = null;
  //记录上一个数据的ID，用于判断是否需要新打开一个窗口
  let tmpPreId = 0;
 
  export default {
    data(){
      return {
        tableData: [],
        tableColumn: [
            {prop: "name", name: "姓名", width: "80px"},
            {prop: "workday", name: "实际到岗/天", width: "100px"},
        ]
      }
    },
    created() {
      this.updateList();
      
      let that = this;
      //右击菜单事件
      window.oncontextmenu = function(e){
        if(isHoverCell){
          //取消默认的浏览器自带右键
          e.preventDefault();
          that.rightMenuInitial(e);
        }
      }
      //event end
    },
    methods: {
        
      rightMenuInitial(e){
        if(null==hoverData||'undefined'===typeof hoverData.data){
          this.$message.info("数据读取失败，刷新后再试~");
          return;
        }
 
        if(null!=MenuBox) {
          //上一个右击区域未变化，则结束后续操作
          if(tmpPreId==hoverData.data.id) return;
        };
 
        //记录当前ID
        tmpPreId = hoverData.data.id;
 
        //创建右击菜单容器
        MenuBox = $('<div />').addClass('menu-box');
 
        let that = this,
            listData = [
              {id: 1, name: "删除", style: "delete"}
            ],
            ulBox = $('<ul />').addClass('list');
 
        //添加列表
        MenuBox.append(ulBox);
 
        //循环生成右击菜单列表
        for(var i in listData){
          ulBox.append($('<li />').text(listData[i]['name']).addClass(listData[i]['style']));
        }
        //for end
 
        //添加位置
        MenuBox.css({
          'position': 'absolute',
          'left': e.clientX,
          'top': e.clientY,
          'z-index': 10
        });
 
        ulBox.hover(function(){
          isHoverCell = true;
        }, function(){
          isHoverCell = false;
        });
 
        
        ulBox.on('click', 'li.delete', function(){
          that.$confirm('确定删除'+ hoverData.data.name + '的' + hoverData.prop+'考勤记录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //查询源数据对应位置，将其删除（这里Demo演示，真实环境需要将删除数据ID传给后台进行操作）
            let index = DemoData.indexOf(hoverData.data);
            DemoData.splice(index, 1);
 
            that.updateList();
          }).catch(() => {
            that.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        });
 
        //追加到页面中
        $('body').append(MenuBox);
      },
      
      //...
      //end
    }
  }
</script>

5.4 增加移除菜单功能

增加removeMenuBox()函数，用于在不同情况下，需要移除自定义菜单。代码如下：

<script>
  import DemoData from './demo.json'
  import $ from 'jquery'
 
  //记录是否悬浮在指定单元格上
  let isHoverCell = false;
  //记录悬浮位置考勤记录对象
  let hoverData = null;
  //右击菜单Dom对象
  let MenuBox = null;
  //记录上一个数据的ID，用于判断是否需要新打开一个窗口
  let tmpPreId = 0;
 
  export default {
    data(){
      return {
        tableData: [],
        tableColumn: [
            {prop: "name", name: "姓名", width: "80px"},
            {prop: "workday", name: "实际到岗/天", width: "100px"},
        ]
      }
    },
    created() {
      this.updateList();
 
      let that = this;
      //右击菜单事件
      window.oncontextmenu = function(e){
        if(isHoverCell){
          //取消默认的浏览器自带右键
          e.preventDefault();
 
          that.rightMenuInitial(e);
        }
      }
      //event end
    },
    methods: {
      
      removeMenuBox(){
        if(!MenuBox) return;
        MenuBox.remove();
        MenuBox = null;
      },
      
      rightMenuInitial(e){
        if(null==hoverData||'undefined'===typeof hoverData.data){
          this.$message.info("数据读取失败，刷新后再试~");
          return;
        }
 
        if(null!=MenuBox) {
          this.removeMenuBox();
          //上一个右击区域未变化，则结束后续操作
          if(tmpPreId==hoverData.data.id) return;
        };
 
        //记录当前ID
        tmpPreId = hoverData.data.id;
 
        //创建右击菜单容器
        MenuBox = $('<div />').addClass('menu-box');
 
        let that = this,
            listData = [
              {id: 1, name: "删除", style: "delete"}
            ],
            ulBox = $('<ul />').addClass('list');
 
        //添加列表
        MenuBox.append(ulBox);
 
        //循环生成右击菜单列表
        for(var i in listData){
          ulBox.append($('<li />').text(listData[i]['name']).addClass(listData[i]['style']));
        }
        //for end
 
        //添加位置
        MenuBox.css({
          'position': 'absolute',
          'left': e.clientX,
          'top': e.clientY,
          'z-index': 10
        });
        //自定义菜单悬浮事件监听
        ulBox.hover(function(){
          isHoverCell = true;
        }, function(){
          isHoverCell = false;
        });
 
        
        ulBox.on('click', 'li.delete', function(){
          that.$confirm('确定删除'+ hoverData.data.name + '的' + hoverData.prop+'考勤记录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //查询源数据对应位置，将其删除（这里Demo演示，真实环境需要将删除数据ID传给后台进行操作）
            let index = DemoData.indexOf(hoverData.data);
            DemoData.splice(index, 1);
 
            that.removeMenuBox();
            that.updateList();
          }).catch(() => {
            that.removeMenuBox();
            that.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        });
 
        //追加到页面中
        $('body').append(MenuBox);
      },
      
      cellAddEvent(){
        let that = this,
            propData = "";
        //悬浮事件
        $('.date-cell').hover(function(){
          isHoverCell = true;
 
          let id = $(this).data('id'),
              filterData = DemoData.filter(item => item.id == id);
 
          if(filterData.length==1){
            hoverData = {
              prop: $(this).data('prop'),
              data: filterData[0]
            }
          }
          // console.log('id', id);e
          //if end
        }, function(){
          isHoverCell = false;
        });
 
        //鼠标移出事件，关闭删除菜单
        $(document).off('click').on('click', function(){
          if(!isHoverCell&&null!=MenuBox){
            that.removeMenuBox();
          }
        });
      },
      //加载列表数据
      updateList(){
        //获取日期列表
        let dateColumn = [],
            employeeList = [];
 
        //循环获取唯一 列日期 和 唯一 员工信息
        DemoData.map(item => {
          if(!dateColumn.includes(item.recorddate)){
            dateColumn.push(item.recorddate);
          }
          if(!employeeList.includes(item.name)){
            employeeList.push(item.name);
          }
        });
        //升序排序
        dateColumn.sort();
        //修改列长度，以免name和workday固定列被替换
        this.tableColumn.length = 2;
        //追加列
        this.tableColumn = this.tableColumn.concat(dateColumn.map(item => {
          return {
            prop: item,
            name: item,
            width: "100px",
            isDate: true
          }
        }));
 
        //重组员工考勤数据，一行显示考勤记录
        this.tableData = employeeList.map(item => {
          let nData = {},
              tmp = null,
              realWorkSize = 0;
 
          //获取对应员工的考勤记录
          dateColumn.forEach(key => {
            tmp = DemoData.filter(sub => sub.name == item && sub.recorddate == key);
            if(tmp.length==1&&tmp[0]['record'].length==2){
              //记录考勤数据
              nData[key] = tmp[0]['record'][0] + '<br />' + tmp[0]['record'][1];
              //保存对应考勤记录的ID
              nData['id_'+key] = tmp[0]['id'];
              //统计到岗天数
              realWorkSize++;
            }else{
              nData[key] = '-';
            }
          })
 
          return {
           name: item,
           workday: realWorkSize,
           ...nData
          }
        });
 
        setTimeout(() => {
          this.cellAddEvent();
        }, 100);
      }
      //end
    }
  }
</script>

5.5 追加菜单内容

在自定义右击菜单时，已预留了增加更多菜单项位置，如下代码，在变量listData中添加菜单内容即可。

rightMenuInitial(e){
    if(null==hoverData||'undefined'===typeof hoverData.data){
      this.$message.info("数据读取失败，刷新后再试~");
      return;
    }
 
    if(null!=MenuBox) {
      this.removeMenuBox();
      //上一个右击区域未变化，则结束后续操作
      if(tmpPreId==hoverData.data.id) return;
    };
 
    //记录当前ID
    tmpPreId = hoverData.data.id;
 
    //创建右击菜单容器
    MenuBox = $('<div />').addClass('menu-box');
 
    let that = this,
        listData = [
          {id: 1, name: "编辑", style: "edit"},
          {id: 2, name: "删除", style: "delete"}
        ],
        ulBox = $('<ul />').addClass('list');
    //...
}

如下图，右击时自定义菜单中则出现“编辑”项了，这块功能这里就不作详解，大家可以自行操作。这里就简单讲解下自定义右击菜单和删除功能，仅供大家参考，如有不足之处请见谅！

到此这篇关于Vue实现自定义右击删除菜单的示例的文章就介绍到这了,更多相关Vue 右击删除菜单内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vue实现自定义右击删除菜单的示例

本文链接: https://lsjlt.com/news/193999.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue实现自定义右击删除菜单的示例
    目录一、定义和使用二、语法三、使用细节四、案例4.1 自定义右击删除菜单步骤4.2 技术点4.3 html代码4.4 CSS样式4.5 基础数据4.6 模拟数据4.7 添加日期列4....
    99+
    2023-02-02
    Vue 右击删除菜单 Vue 自定义右击删除
  • Vue自定义指令实现点击右键弹出菜单示例详解
    目录一、实现思路1.使用contextmenu事件2.点击菜单之外的任意地方关闭菜单3.菜单置于图层的最顶层二、源代码一、实现思路 1.使用contextmenu事件 该需求需要拦截...
    99+
    2023-01-11
    Vue自定义指令右键弹出菜单 Vue自定义指令 点击右键弹出菜单
  • vue实现自定义全局右键菜单
    前段时间公司在做一个webIDE项目，其中有对文件树的各种操作，主要通过右键菜单实现，今天就来记录一下怎么在vue项目中实现全局的自定义右键菜单。效果如图所示： 注意： 需要在项目...
    99+
    2024-04-02
  • vue怎么实现自定义全局右键菜单
    本篇内容介绍了“vue怎么实现自定义全局右键菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果如图所示：注意：需要在项目中找到页面整体布...
    99+
    2023-06-29
  • vue怎么自定义右键菜单
    今天小编给大家分享一下vue怎么自定义右键菜单的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。在需要添加右键的页面，绑定con...
    99+
    2023-06-29
  • vue中自定义右键菜单插件
    前言： 作为一个刚刚入门前端的搬砖工作者，写博客只是为了能够记录自己因为业务使用过的一些插件，为了后续更好的使用和改造 本文分享了vue中自定义右键菜单插件的具体代码，供大家参考，具...
    99+
    2024-04-02
  • JS实现自定义鼠标右击菜单的代码怎么写
    这篇“JS实现自定义鼠标右击菜单的代码怎么写”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“...
    99+
    2024-04-02
  • JS如何实现自定义右键菜单
    这篇文章主要介绍了JS如何实现自定义右键菜单，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。示例：<div id="...
    99+
    2024-04-02
  • vue原生方法自定义右键菜单
    本文实例为大家分享了vue原生方法自定义右键菜单的具体代码，供大家参考，具体内容如下 1.在需要添加右键的页面，绑定contextmenu事件（阻止浏览器默认事件，添加自定义事件）...
    99+
    2024-04-02
  • vue中自定义右键菜单插件怎么用
    今天小编给大家分享一下vue中自定义右键菜单插件怎么用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。演示用法通过npm安装插...
    99+
    2023-06-29
  • eclipse构建自定义菜单的实现
    1.1 简介在开发工具上添加自己需要的功能，可以基于eclipse的插件进行扩展以满足新功能的需要。下面就说说如何在eclipse上如何添加菜单项。1.2 建立工程新建eclipse插件工程...
    99+
    2023-06-02
  • Android实现自定义带删除功能的EditText实例
    1.说明自定义带删除功能的EditText有两种方法，第一种是用组合视图的方法，即在一个view视图里面左侧放置一个EditText，右侧放置一个ImageView，但是这样增加了视图的层次，而且对输入内容的长度要做一定的处理。第二种是重新...
    99+
    2023-05-31
    android edittext roi
  • 如何使用Html实现添加、删除、右键菜单
    这篇文章将为大家详细讲解有关如何使用Html实现添加、删除、右键菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码如下：<!DOCTYPE html>&l...
    99+
    2024-04-02
  • DataGridView清除显示的数据、设定右键菜单
    一、清空数据 1、DataGridView未绑定数据时清空数据 this.dgv_PropDemo.DataSource = null 2、DataGridView绑定数据时清空数据...
    99+
    2024-04-02
  • Android自定义ViewGroup实现侧滑菜单
    目录前言一、常用的几种交互方式1.1 事件的拦截处理1.2 自行处理事件的几种方式1.3 子View的滚动与协调交互1.4 ViewGroup之间的嵌套与协调效果二、ViewDrag...
    99+
    2023-01-05
    Android ViewGroup侧滑菜单 Android ViewGroup菜单 Android ViewGroup Android 菜单
  • vue LogicFlow自定义边实现示例详解
    目录推荐几个好用的工具进入正题1. 认识自定义边（Edge）模板：2. 优先进行注册和使用：2.1 注册自定义 Edge：2.2 如何使用自定义 Edge：3. 自定义 Edge 的...
    99+
    2023-01-11
    vue LogicFlow自定义边 LogicFlow自定义边
  • Android实现自定义的卫星式菜单(弧形菜单)详解
    一、前言 Android 实现卫星式菜单也叫弧形菜单，主要要做的工作如下： 1.动画的处理 2.自定义ViewGroup来实现卫星式菜单View （1）自定义属性 &n...
    99+
    2022-06-06
    自定义 菜单 Android
  • Vue实现带参数的自定义指令示例
    正文 自定义指令参考官方文档：vuejs.bootcss.com/guide/custo… <!DOCTYPE html> <html lang="...
    99+
    2023-01-11
    Vue 带参数自定义指令 Vue 参数指令 Vue 自定义指令
  • Android自定义HorizontalScrollView实现qq侧滑菜单
    今天看了鸿洋_大神在慕课网讲的qq5.0侧滑菜单。学了不少的知识，同时也佩服鸿洋_大神思路的清晰。 看了教程课下也自己实现了一下。代码几乎完全相同  别喷我啊。。没办...
    99+
    2022-06-06
    菜单 horizontalscrollview Android
  • layui自定义ajax左侧三级菜单的示例分析
    这篇文章主要介绍了layui自定义ajax左侧三级菜单的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。HTML代码： 需引入layu...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作