iview通过Dropdown(下拉菜单)实现的右键菜单

下面是详细讲解 "iview通过Dropdown(下拉菜单)实现的右键菜单" 的完整攻略。

1. iview中Dropdown组件的基本使用

iview是一个基于Vue.js的组件库，在iview中，Dropdown组件可以很容易实现右键菜单的效果。

1.1 安装iview

在开始使用iview之前，需要先安装iview。可以使用npm进行安装：

npm install iview --save

1.2 引入iview

在需要使用Dropdown组件的页面中，需要先将iview引入进来：

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

1.3 使用Dropdown组件

iview中的Dropdown组件可以通过一个Button或者一个i标签触发，其中，Button可以设置触发Dropdown的文字，而i标签可以设置触发Dropdown的图标。具体实现如下：

<template>
  <Dropdown @on-click="handleClick">
    <Button type="primary">下拉菜单</Button>
    <Dropdown-Menu slot="list">
      <Dropdown-Item name="1">菜单一</Dropdown-Item>
      <Dropdown-Item name="2">菜单二</Dropdown-Item>
      <Dropdown-Item name="3">菜单三</Dropdown-Item>
    </Dropdown-Menu>
  </Dropdown>
</template>
<script>
  export default {
    methods: {
      handleClick(name) {
        console.log(`点击了${name}`);
      }
    }
  }
</script>

在这个例子中，通过Dropdown组件来实现一个简单的右键菜单。在Dropdown组件中，通过Button设置了触发Dropdown的文字为“下拉菜单”。而在Dropdown-Menu中设置了三个Dropdown-Item，分别为“菜单一”、“菜单二”、“菜单三”。当点击Dropdown-Item时，会触发Dropdown组件的@on-click事件，并调用handleClick方法。

2. iview通过Dropdown(下拉菜单)实现的右键菜单

基于iview中的Dropdown组件，很容易地实现一个右键菜单。具体实现如下：

<template>
  <div @contextmenu.prevent>
    <div v-for="(item,index) in dataList" :key="index">
      <Dropdown>
        <a @click="itemClick(item)">
          {{item.name}}
        </a>
        <Dropdown-Menu slot="list">
          <Dropdown-Item name="edit">编辑</Dropdown-Item>
          <Dropdown-Item name="delete">删除</Dropdown-Item>
        </Dropdown-Menu>
      </Dropdown>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dataList: [
          {
            id: 1,
            name: '菜单一'
          },
          {
            id: 2,
            name: '菜单二'
          },
          {
            id: 3,
            name: '菜单三'
          }
        ]
      }
    },
    methods: {
      itemClick(item) {
        console.log(`点击了${item.name}`);
      }
    }
  }
</script>

在这个例子中，通过v-for循环渲染了一个包含三个链接的div。在每个链接的右侧，通过Dropdown组件来实现右键菜单。当点击链接时，会触发itemClick事件，并输出该链接的名字。

以上就是iview通过Dropdown实现的右键菜单的完整攻略。