Giter VIP home page Giter VIP logo

vue-right-click-menu's Introduction

vue-right-click-menu · npm yarn github

支持vue的浏览器右键菜单插件,效果图如下:

插件安装

yarn add vue-right-click-menu

# or

npm install vue-right-click-menu --save

插件使用

  • 在项目的入口文件main.ts/main.js中加入下述代码
import rightMenu from "vue-right-click-menu";

Vue.use(rightMenu);
  • 在你的业务代码中,在元素上绑定v-right-click,然后传对应的参数即可.
<template>
  <li
    class="row-panel"
    v-right-click:[{id:19,bookid:1024}]="rightMenuObj"
  >
</template>
<script>
export default {
  computed: {
    rightMenuObj() {
      // 右键菜单对象,菜单内容和处理事件
      const obj = {
        this: this,
        text: [
          "查看资料",
          { content: "复制用户id", status: true },
          "移除该会话",
          "在联系人中查看",
          "在单聊窗口中打开",
          "会话置顶"
        ],
        handler: {
          checkingData(parameter) {
            console.log(parameter);
            console.log("查看资料点击事件");
          },
          copyId() {
            console.log("复制用户id点击事件");
          },
          removeItem() {
            console.log("移除会话点击事件");
          },
          showContact() {
            console.log("在联系人中查看");
          },
          showSingleChat() {
            console.log("在单聊窗口中打开");
          },
          topConversation() {
            console.log("会话置顶");
          }
        }
      };
      return obj;
    }
  }
}
</script>

参数说明

如示例代码所示,在元素上绑定指令,在computed中定义一个对象,传菜单内容和与之对应的事件处理函数就可以了。

接下来就跟大家讲下对象里每个属性的意义:

  • this 即当前vue实例,便于在处理函数中能访问到当前vue实例中的内容
  • text 类型为数组,即右键菜单要显示的内容
    • 数组内的内容分为字符串或对象,如果为字符串这一项默认是可以点击的
    • 如果你想让某个选项无法点击,则传一个对象
      • content 要显示的文字内容,字符串类型
      • status 是否禁用,boolean类型
  • 点击事件接受一个参数,具体写法可参考示例代码
  • handler 事件处理函数,函数的顺序要与text数组内的文本顺序相对应

写在最后

至此,插件的所有使用方法就介绍完了。

该插件仅支持Vue2.x的项目,Vue3.x项目请移步: vue-right-click-menu-next

想进一步了解插件源码的请移步插件的GitHub仓库:vue-right-click-menu

vue-right-click-menu's People

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.