阅读 2977

使用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默认是把vuecore-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才行,那就有点不合适了。

展示组件

经过一番思考后,我有了下述思路:

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

销毁组件

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

  1. 将上述加载组件的实现封装成一个函数,将创建的div元素作为返回值。
  2. 在插件全局声明一个变量menuVM,默认声明为null
  3. 指令内部触发右键事件时,调用我们封装的函数,用menuVM去接收其返回值
  4. 此时我们创建一个全局点击事件的监听,如果menuVM不为null,我们就把这个元素移除
  5. 触发右键事件时,如果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

写在最后

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊

  • 本文首发于掘金,未经许可禁止转载💌

文章分类
前端
文章标签