vue右健菜单组件

原创

已于 2022-04-02 10:58:56 修改 · 269 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-cli3 #typescript

于 2021-08-17 19:19:25 首次发布

效果图

安装组件

npm i vue-contextmeuns

组件引入、初始化

import ContextMenu from "vue-contextmenus";
import "vue-contextmenus/lib/vue-contextmenus.css";

@Component({
  components: {
    ContextMenu
  },
})

##使用方法

example.vue

//全局监听右健事件
<template>
  <ContextMenu :options="options" hidingMode="click">
    <div id="app">
      <img alt="Vue logo" src="./assets/logo.png">
    </div>
  </ContextMenu>
</template>

//只监听IMG图片的右健事件
<template>
  <div id="app">
  	<ContextMenu :options="options" hidingMode="click">
      <img alt="Vue logo" src="./assets/logo.png">
  	</ContextMenu>
  </div>
</template>

数据：
options = [
    {'type':'title', 'title':'基本操作'},
    {'type':"line"},
    {'title':