JS使用iView的Dropdown实现一个右键菜单

下面我会详细讲解JavaScript使用iView的Dropdown组件实现一个右键菜单的完整攻略。

1. 准备工作

在开始实现之前，你需要先引入iView的相关文件。具体可以使用以下方式引入：

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">

<!-- 引入js文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/iview/dist/iview.min.js"></script>

接着我们需要定义用来触发右键菜单的元素，这里可以使用contextmenu事件来实现右键菜单的效果。例如：

<div id="app">
  <div class="box" v-on:contextmenu.prevent="showMenu" ref="box"></div>
</div>

这里使用了一个名为box的div元素作为触发右键菜单的元素，在该元素上绑定了contextmenu事件，并阻止了事件的默认行为。当用户在该元素上右键时，即可触发右键菜单。

2. 实现右键菜单

执行以下代码即可实现右键菜单：

new Vue({
  el: '#app',
  data: {
    menuVisible: false,    // 右键菜单是否可见
    menuTop: 0,            // 菜单距离浏览器顶部的位置
    menuLeft: 0            // 菜单距离浏览器左侧的位置
  },
  methods: {
    // 显示右键菜单
    showMenu(event) {
      // 阻止事件冒泡
      event.stopPropagation();

      // 计算菜单的位置
      this.menuTop = event.clientY;
      this.menuLeft = event.clientX;

      // 显示右键菜单
      this.menuVisible = true;
    },

    // 隐藏右键菜单
    hideMenu() {
      this.menuVisible = false;
    },

    // 处理菜单点击事件
    handleMenuClick(name) {
      console.log('点击了菜单：', name);
      this.hideMenu();
    }
  },
  template: `
    <Dropdown v-model="menuVisible" :transfer="false" @on-click-menu="handleMenuClick">
      <div class="box" v-on:contextmenu.prevent="showMenu" ref="box"></div>
      <DropdownMenu slot="list" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
        <DropdownItem name="菜单1">菜单1</DropdownItem>
        <DropdownItem name="菜单2">菜单2</DropdownItem>
        <DropdownItem name="菜单3">菜单3</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  `
});

这里使用了Dropdown组件作为右键菜单的容器，并使用了DropdownMenu和DropdownItem作为menu和menu-item。

在showMenu方法中，通过计算点击位置的坐标，设置了菜单的位置，并将菜单状态设置为可见。在handleMenuClick方法中，处理了菜单的点击事件，并将菜单状态设置为不可见。

3. 示例说明

示例1

以下示例演示了如何在列表中使用右键菜单：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list" v-on:contextmenu.prevent="showMenu($event, item)" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.gender }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>

  <Dropdown v-model="menuVisible" :transfer="false" @on-click-menu="handleMenuClick">
    <DropdownMenu slot="list" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
      <DropdownItem name="复制">复制</DropdownItem>
      <DropdownItem name="删除">删除</DropdownItem>
    </DropdownMenu>
  </Dropdown>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    list: [
      { id: 1, name: '张三', gender: '男', age: 18 },
      { id: 2, name: '李四', gender: '女', age: 20 },
      { id: 3, name: '王五', gender: '男', age: 22 },
      { id: 4, name: '赵六', gender: '女', age: 24 },
      { id: 5, name: '陈七', gender: '男', age: 26 }
    ],
    menuVisible: false,
    menuTop: 0,
    menuLeft: 0
  },
  methods: {
    // 显示右键菜单
    showMenu(event, item) {
      event.stopPropagation();

      // 计算菜单的位置
      this.menuTop = event.clientY;
      this.menuLeft = event.clientX;

      // 处理右键菜单中的参数
      this.menuParams = item;

      // 显示右键菜单
      this.menuVisible = true;
    },

    // 隐藏右键菜单
    hideMenu() {
      this.menuVisible = false;
    },

    // 处理菜单点击事件
    handleMenuClick(name) {
      if (name === '复制') {
        console.log('复制用户：', this.menuParams);
      } else if (name === '删除') {
        console.log('删除用户：', this.menuParams);
      }
      this.hideMenu();
    }
  }
});
</script>

这里使用了一个名为list的数组作为数据源，通过v-for指令渲染出列表。在tr元素上绑定了contextmenu事件，并在事件处理函数中调用了showMenu方法，展示出右键菜单。在右键菜单的handleMenuClick方法中，可以处理在列表中的右键菜单的点击事件。

示例2

以下示例演示了如何在图片上使用右键菜单：

<div id="app">
  <img src="https://img.ivsky.com/img/tupian/li/202103/21/suolawushou-005.jpg" v-on:contextmenu.prevent="showMenu" ref="image">

  <Dropdown v-model="menuVisible" :transfer="false" @on-click-menu="handleMenuClick">
    <DropdownMenu slot="list" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
      <DropdownItem name="保存">保存</DropdownItem>
      <DropdownItem name="分享">分享</DropdownItem>
    </DropdownMenu>
  </Dropdown>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    menuVisible: false,
    menuTop: 0,
    menuLeft: 0
  },
  methods: {
    // 显示右键菜单
    showMenu(event) {
      event.stopPropagation();

      // 计算菜单的位置
      this.menuTop = event.clientY;
      this.menuLeft = event.clientX;

      // 显示右键菜单
      this.menuVisible = true;
    },

    // 隐藏右键菜单
    hideMenu() {
      this.menuVisible = false;
    },

    // 处理菜单点击事件
    handleMenuClick(name) {
      if (name === '保存') {
        console.log('保存图片');
      } else if (name === '分享') {
        console.log('分享图片');
      }
      this.hideMenu();
    }
  }
});
</script>

这里使用了一张图片和一个Dropdown组件。在img标签上绑定了contextmenu事件，并在事件处理函数中调用了showMenu方法，展示出右键菜单。在右键菜单的handleMenuClick方法中，可以处理在图片上的右键菜单的点击事件。