使用vue封装右键菜单插件

前言

上周跟大家分享了如何使用vue的自定义指令实现自定义浏览器右键菜单，大家都觉得挺有意思的，这次我把它做成了插件，上传到了npm仓库。

在做这个插件的过程中，踩了蛮多坑，本文就跟大家分享下我的实现思路以及过程，欢迎各位感兴趣的开发者阅本文。

环境搭建

一开始我是直接用的typescript的tsc命令进行打包的，但是我的插件里用到了vue、scss，发现要把这些文件打包进去需要自己去配webpack。

我记得好久之前，我用Vue CLI 2.x创建项目时，可以选择当前要创建的项目是插件还是web项目，现在用的是Vue ClI 4.x了，在创建项目时没看到有这个选项。

于是，我带着侥幸的心理，去Vue CLI 官网找了一波，还真就被我找到了，它的build指令有个target选项，可以选择将其打包成一个插件，它的具体使用方法：vue-cli-service build。

既然Vue CLI提供了现成的解决方案，那就用它提供的吧。

创建项目

在终端进入你的项目目录，使用create命令创建一个名为vue-right-click-menu-next的项目

vue create vue-right-click-menu-next

在接下来的步骤中，选择自定义配置，选vue3, node-sass, eslint+prettier, typescript这些选项

配置依赖项

项目创建好后，我们删掉CLI初始化时创建的东西，然后修改package.json中的内容。

在package.json中，CLI默认是把vue和core-js放在dependencies下的，我们开发的插件是要给其他开发者引用的，如果我们打包的产物中包含Vue包的话可能会引发各种问题，比如用户可能会在引入我们的包之后会在runtime时创建两个不用的Vue实例，所以vue插件的package.json里一定不能将其放在dependencies中，而是要放在peerDependencies中，表明会从引用者的其他的包中引入相对应的包，而不会在这个包里直接引入。

在package.json中添加下述代码，移除原来dependencies下的依赖。

 "peerDependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  }

在devDependencies中添加git提交规范相关依赖

{
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-angular": "^11.0.0",
    "commitizen": "^4.2.2",
    "cz-conventional-changelog": "^3.3.0",
    "husky": "^4.3.0",
}

添加config和husky配置changelog生成地址和强制编辑器提交代码走我们定义的规范

{
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

最后，在script中添加提交命令与生成changelog的命令

{
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
    "commit": "git-cz"
}

配置打包命令

由文档可知，可以通过vue-cli-service build --target lib --name myLib [entry]命令，将一个单独的入口构建为一个库。

那么，我们就可以在package.json的script标签里添加build命令用以执行插件的打包，代码如下。

vueRightMenuPlugin 打包后的文件名
src/main.ts 插件的入口文件

{
  "build": "vue-cli-service build --target lib --name vueRightMenuPlugin src/main.ts",
}

由于我们的插件启用了typescript，使用它的默认打包，不会帮我们生成ts声明文件，使用我们插件的开发者项目可能会启用typescript，在引用插件时就会报错声明文件不存在，因此我们需要额外做下述操作：

在tsconfig.jsonz中添加下述代码，打包时在项目的指定位置自动生成配置文件。

{
    "declaration": true,// 是否生成声明文件
    "declarationDir": "dist/lib",// 声明文件打包的位置
}

创建vue.config.js文件，关闭并行打包的一些相关配置。

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      config.module.rule("ts").uses.delete("cache-loader");
      config.module
        .rule("ts")
        .use("ts-loader")
        .loader("ts-loader")
        .tap(opts => {
          opts.transpileOnly = false;
          opts.happyPackMode = false;
          return opts;
        });
    }
  },
  parallel: false
};

做完上述操作后，我们运行打包命令时就能自动生成声明文件了。

强制css内联

当我把插件开发完，测试时发现我引用的组件样式丢了，找了好久问题，最后在CLI的文档中找到了问题所在，他有个css.extract属性，它使用来配置打包时是否将css样式提取到独立的文件中，Default: 生产环境下是 true，开发环境下是 false，我们打包时他默认是true，用户需要单独引入这个样式文件文件。

我们可以通过手动将其设置为false，让其在打包时使用内联样式，这样就能解决样式失效的问题了，我们在vue.config.js中加入下述代码。

module.exports = {
  // 强制css内联
  css: { extract: false }
}

添加库描述

做完上述操作，我们跟打包有关的相关的配置就弄好了，接下来我们在package.json中添加库的相关描述，让npm可以正确识别我们的插件。

name 插件名称
version 版本号
description 插件简述
private 是否私有
main 库的入口文件位置(打包后的入口文件)
types 库的声明文件位置
publisher 库发布者
repository 仓库信息
keywords 关键词，在npm找包时所匹配的关键词
author 库作者
license 库遵守的开源协议
bugs bug反馈地址
homepage 库主页

{
  "name": "vue-right-click-menu-next",
  "version": "1.0.0",
  "description": "支持vue3的右键菜单插件",
  "private": false,
  "main": "dist/vueRightMenuPlugin.common.js",
  "types": "dist/lib/main.d.ts",
  "publisher": "magicalprogrammer@qq.com",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/likaia/vue-right-click-menu-next.git"
  },
  "keywords": [
    "vuejs",
    "vue3",
    "vue",
    "rightMenu",
    "右键菜单",
    "vueRightMenu"
  ],
  "author": "likaia",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/likaia/vue-right-click-menu-next/issues"
  },
  "homepage": "https://github.com/likaia/vue-right-click-menu-next#readme",
}

完整的配置文件请移步：package.json

实现思路

上篇文章我们的实现思路是需要vuex来做全局状态管理，控制右键菜单的显隐，这次我们要把它做成插件，再使用vuex的话，使用我们插件的人就需要必须引入vuex才行，那就有点不合适了。

展示组件

经过一番思考后，我有了下述思路：

将右键菜单做成组件，通过props向组件传值。
使用createApp来加载组件，向组件内部传值，创建一个组件容器
创建一个div元素，将刚才的组件容器挂载到这个div元素上

销毁组件

完成上述操作后，我们就实现了让右键菜单显示到指定位置，但是要怎么隐藏它呢，经过一番思考后，我又想到了下述思路：

将上述加载组件的实现封装成一个函数，将创建的div元素作为返回值。
在插件全局声明一个变量menuVM，默认声明为null
指令内部触发右键事件时，调用我们封装的函数，用menuVM去接收其返回值
此时我们创建一个全局点击事件的监听，如果menuVM不为null，我们就把这个元素移除
触发右键事件时，如果menuVM不为null，表示它上次点开的右键菜单没关，这样就会出问题，因此我们也需要将其从body中移除

实现过程

分析出实现思路后，接下来我们就着手将其实现吧。

创建右键菜单组件

在项目的src下创建components文件夹，在文件夹下创建right-menu.vue文件，样式和组件内容此处我们就不贴了，这里贴一下组件需要传的参数，完整代码请移步：right-menu.vue)

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "right-menu",
  props: {
    rightMenuStatus: String,
    rightMenuTop: String,
    rightMenuLeft: String,
    rightMenuList: Array
  }
});
</script>

封装挂载组件函数

我们可以通过vue3的createApp方法来加载一个组件，并给他传值，然后挂载到某个dom节点上，代码如下：

/**
 * 将组件挂在到节点上
 * @param comp 需要挂载的组件
 * @param prop 向组件传的参数
 */
const creatComp = function(comp: Component, prop: rightMenuAttribute) {
  // 创建组件
  const app = createApp(comp, {
    ...prop
  });
  // 创建一个div元素
  const divEle = document.createElement("div");
  // 将创建的div元素挂载追加至body里
  document.body.appendChild(divEle);
  // 将组件挂载至刚才创建的div中
  app.mount(divEle);
  // 返回挂载的元素，便于操作
  return divEle;
};

在install中注册指令并显示菜单

接下来，我们在插件的install方法中，注册一个vue指令rightClick，拦截它的右键事件，获取组件传过来来的参数，挂载组件，渲染右键菜单。代码如下：

install(app: App): void {
    // 创建指令
    app.directive("rightClick", (el, binding): boolean | void => {
      // 指令绑定元素元素是否存在判断
      if (el == null) {
        throw "右键指令错误：元素未绑定";
      }
      el.oncontextmenu = function(e: MouseEvent) {
        if (menuVM != null) {
          // 销毁上次触发的右键菜单DOM
          document.body.removeChild(menuVM);
          menuVM = null;
        }
        const textArray = binding.value.text;
        const handlerObj = binding.value.handler;
        // 菜单选项与事件处理函数是否存在
        if (textArray == null || handlerObj == null) {
          throw "右键菜单内容与事件处理函数为必传项";
        }
        // 事件处理数组
        const handlerArray = [];
        // 处理好的右键菜单
        const menuList = [];
        // 将事件处理函数放入数组中
        for (const key in handlerObj) {
          handlerArray.push(handlerObj[key]);
        }
        if (textArray.length !== handlerArray.length) {
          // 文本数量与事件处理不对等
          throw "右键菜单的每个选项，都必须有它的事件处理函数";
        }
        // 追加右键菜单数据
        for (let i = 0; i < textArray.length; i++) {
          // 右键菜单对象, 添加名称
          const menuObj: rightMenuObjType = {
            text: textArray[i],
            handler: handlerArray[i],
            id: i + 1
          };
          menuList.push(menuObj);
        }
        // 鼠标点的坐标
        const oX = e.clientX;
        const oY = e.clientY;
        // 动态挂载组件，显示右键菜单
        menuVM = creatComp(rightMenu, {
          rightMenuStatus: "block",
          rightMenuTop: oY + "px",
          rightMenuLeft: oX + "px",
          rightMenuList: menuList
        });
        return false;
      };
    });
}

创建监听销毁组件

当用户点击完右键菜单后，我们需要对组件进行销毁，让其隐藏，因此我们在插件的install创建一个对body的点击监听，然后移除我们挂载的组件，代码如下：

  install(app: App): void {
    // 监听全局点击，销毁右键菜单dom
    document.body.addEventListener("click", () => {
      if (menuVM != null) {
        // 销毁右键菜单DOM
        document.body.removeChild(menuVM);
        menuVM = null;
      }
    });
  }

完整代码请移步：main.ts)

发布插件

做完上述操作后，我们的插件就开发完成了，可以打包然后发布到npm仓库了。

终端执行下述命令：

npm publish --access public

插件发布成功：vue-right-click-menu-next

兼容Vue2.x

插件是不兼容Vue2.x的，因为creatApp时Vue3新增的语法，一开始我本来想用Vue2.x的extend来实现组件挂载的，发现Vue3把这个语法舍弃了。

这就造成了我需要写两套插件，维护两个插件。

插件的逻辑层面没有啥区别，只有挂载组件写法的不同，Vue2.x中需要使用下述写法：

/**
 * 将组件挂在到节点上
 * @param comp 需要挂载的组件
 * @param prop 向组件传的参数
 */
const creatComp = function(comp, prop) {
  // 创建组件
  const app = Vue.extend(comp);
  // 创建一个div元素
  const divEle = document.createElement("div");
  // 将创建的div元素挂载追加至body里
  document.body.appendChild(divEle);
  // 将组件挂载至刚才创建的div中, 使用propsData进行传参
  new app({
    propsData: {
      ...prop
    }
  }).$mount(divEle);
  // 返回挂载的元素，便于操作
  return divEle;
};

插件地址：vue-right-click-menu

项目地址

本文中开发的插件代码地址：vue-right-click-menu | vue-right-click-menu-next)

在线体验地址：chat-system

写在最后

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注?
本文首发于掘金，未经许可禁止转载?

使用vue封装右键菜单插件

前言

环境搭建

创建项目

配置依赖项

配置打包命令

强制css内联

添加库描述

实现思路

展示组件

销毁组件

实现过程

创建右键菜单组件

封装挂载组件函数

在install中注册指令并显示菜单

创建监听销毁组件

发布插件

兼容Vue2.x

项目地址

写在最后

常见问题FAQ

掘金(神奇的程序员) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

前言

环境搭建

创建项目

配置依赖项

配置打包命令

强制css内联

添加库描述

实现思路

展示组件

销毁组件

实现过程

创建右键菜单组件

封装挂载组件函数

在install中注册指令并显示菜单

创建监听销毁组件

发布插件

兼容Vue2.x

项目地址

写在最后

常见问题FAQ

掘金(神奇的程序员) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式