feat: add contextmenu components

package-lock.json

@@ -26,6 +26,7 @@
         "path": "^0.12.7",
         "path-to-regexp": "^6.2.0",
         "resize-observer-polyfill": "^1.5.1",
+        "v-contextmenu": "^3.0.0",
         "vue": "^3.0.11",
         "vue-i18n": "^9.1.6",
         "vue-json-pretty": "^2.0.2",
@@ -2549,6 +2550,17 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/v-contextmenu": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/v-contextmenu/-/v-contextmenu-3.0.0.tgz",
+      "integrity": "sha512-zi38JxmTt66TmljgV1JbfEa9WvoQkpzRuEwZK7Tjb2XoRejbWLozQtkyTWXJa6x6Y3FrVDfgT36w01gpTpo41A==",
+      "engines": {
+        "node": ">=10.16.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.2.3.tgz",
@@ -4946,6 +4958,12 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "v-contextmenu": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/v-contextmenu/-/v-contextmenu-3.0.0.tgz",
+      "integrity": "sha512-zi38JxmTt66TmljgV1JbfEa9WvoQkpzRuEwZK7Tjb2XoRejbWLozQtkyTWXJa6x6Y3FrVDfgT36w01gpTpo41A==",
+      "requires": {}
+    },
     "vite": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.2.3.tgz",

package.json

@@ -29,6 +29,7 @@
     "path": "^0.12.7",
     "path-to-regexp": "^6.2.0",
     "resize-observer-polyfill": "^1.5.1",
+    "v-contextmenu": "^3.0.0",
     "vue": "^3.0.11",
     "vue-i18n": "^9.1.6",
     "vue-json-pretty": "^2.0.2",

src/main.ts

@@ -13,6 +13,8 @@ import "./style/index.scss";
 import "./assets/iconfont/iconfont.js";
 import "./assets/iconfont/iconfont.css";
 
+import "v-contextmenu/dist/themes/default.css";
+
 import { setConfig, getConfig } from "./config";
 import axios from "axios";
 

src/plugins/i18n/config.ts

@@ -31,6 +31,7 @@ export const menusConfig = {
       hsselector: "选择器组件",
       hsflowChart: "流程图",
       hsseamless: "无缝滚动",
+      hscontextmenu: "右键菜单",
     },
   },
   en: {
@@ -54,6 +55,7 @@ export const menusConfig = {
       hsselector: "Selector Components",
       hsflowChart: "Flow Chart",
       hsseamless: "Seamless Scroll",
+      hscontextmenu: "Context Menu",
     },
   },
 };

src/router/index.ts

@@ -145,15 +145,18 @@ const routes: Array<RouteRecordRaw> = [
           savedPosition: true,
         },
       },
-      // {
+      {
-      //   path: '/components/flowChart',
+        path: "/components/contextmenu",
-      //   component: () => import(/* webpackChunkName: "components" */ '../views/components/flow-chart/index.vue'),
+        component: () =>
-      //   meta: {
+          import(
-      //     title: 'message.hsflowChart',
+            /* webpackChunkName: "components" */ "../views/components/contextmenu/index.vue"
-      //     showLink: false,
+          ),
-      //     savedPosition: true
+        meta: {
-      //   }
+          title: "message.hscontextmenu",
-      // }
+          showLink: false,
+          savedPosition: true,
+        },
+      },
     ],
     meta: {
       icon: "el-icon-menu",
@@ -355,7 +358,7 @@ router.beforeEach((to, _from, next) => {
   NProgress.start();
   const { t } = i18n.global;
   // @ts-ignore
-  document.title = t(to.meta.title); // 动态title
+  to.meta.title ? (document.title = t(to.meta.title)) : ""; // 动态title
   whiteList.indexOf(to.path) !== -1 || storageSession.getItem("info")
     ? next()
     : next("/login"); // 全部重定向到登录页

src/views/components/contextmenu/basic.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <h1>基本使用</h1>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item>GitHub</v-contextmenu-item>
+      <v-contextmenu-item>GitLab</v-contextmenu-item>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-submenu title="蔬菜菜">
+        <v-contextmenu-item>土豆</v-contextmenu-item>
+
+        <v-contextmenu-submenu title="青菜">
+          <v-contextmenu-item>小油菜</v-contextmenu-item>
+          <v-contextmenu-item>空心菜</v-contextmenu-item>
+        </v-contextmenu-submenu>
+
+        <v-contextmenu-item>黄瓜</v-contextmenu-item>
+      </v-contextmenu-submenu>
+
+      <v-contextmenu-item disabled>菠萝蜜</v-contextmenu-item>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-item>哈密瓜</v-contextmenu-item>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  directive,
+  version,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from "v-contextmenu";
+
+export default defineComponent({
+  name: "ExampleSimple",
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  }
+});
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  height: 200px;
+  border: 3px dashed rgba(90, 167, 164, 0.9);
+  border-radius: 8px;
+  background-color: rgba(90, 167, 164, 0.2);
+}
+</style>

src/views/components/contextmenu/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="margin:10px">
+    <el-row :gutter="24">
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 基本使用 -->
+        <basic />
+      </el-col>
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 按钮组 -->
+        <menuGroup />
+      </el-col>
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 动态菜单 -->
+        <menuDynamic />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts">
+import basic from "./basic.vue";
+import menuGroup from "./menuGroup.vue";
+import menuDynamic from "./menuDynamic.vue";
+export default {
+  components: {
+    basic,
+    menuGroup,
+    menuDynamic
+  },
+  setup() {
+    return {};
+  }
+};
+</script>

src/views/components/contextmenu/menuDynamic.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <h1>动态菜单</h1>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-group title="操作">
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('item')">添加菜单</v-contextmenu-item>
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('group')">添加菜单组</v-contextmenu-item>
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('submenu')">添加子菜单</v-contextmenu-item>
+        <v-contextmenu-item :hide-on-click="false" @click="extra.pop()">删除</v-contextmenu-item>
+      </v-contextmenu-group>
+
+      <template v-for="(item, index) of extra">
+        <v-contextmenu-divider />
+
+        <v-contextmenu-group v-if="item === 'group'" :title="`菜单组 ${index + 1}`">
+          <v-contextmenu-item>菜单1</v-contextmenu-item>
+          <v-contextmenu-item>菜单2</v-contextmenu-item>
+          <v-contextmenu-item>菜单3</v-contextmenu-item>
+        </v-contextmenu-group>
+
+        <v-contextmenu-submenu v-else-if="item === 'submenu'" :title="`子菜单 ${index + 1}`">
+          <v-contextmenu-item>菜单1</v-contextmenu-item>
+          <v-contextmenu-item>菜单2</v-contextmenu-item>
+          <v-contextmenu-item>菜单3</v-contextmenu-item>
+        </v-contextmenu-submenu>
+
+        <v-contextmenu-item v-else>菜单 {{ index + 1 }}</v-contextmenu-item>
+      </template>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  directive,
+  version,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from "v-contextmenu";
+
+export default defineComponent({
+  name: "ExampleDynamic",
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  },
+
+  data() {
+    return {
+      extra: []
+    };
+  },
+
+  methods: {
+    addItem(type = "item") {
+      this.extra.push(type);
+    },
+    removeItem() {
+      this.extra.pop();
+    }
+  }
+});
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  height: 200px;
+  margin-bottom: 30px;
+  border: 3px dashed rgba(90, 167, 164, 0.9);
+  border-radius: 8px;
+  background-color: rgba(90, 167, 164, 0.2);
+}
+</style>

src/views/components/contextmenu/menuGroup.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <h1>按钮组</h1>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item>菜单</v-contextmenu-item>
+
+      <v-contextmenu-group>
+        <v-contextmenu-item>Github</v-contextmenu-item>
+        <v-contextmenu-item>Codepen</v-contextmenu-item>
+        <v-contextmenu-item disabled>Alipay</v-contextmenu-item>
+        <v-contextmenu-item>Wechat</v-contextmenu-item>
+      </v-contextmenu-group>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-group title="按钮组">
+        <v-contextmenu-item>菜单1</v-contextmenu-item>
+        <v-contextmenu-item>菜单2</v-contextmenu-item>
+        <v-contextmenu-item disabled>菜单3</v-contextmenu-item>
+      </v-contextmenu-group>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  directive,
+  version,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from "v-contextmenu";
+
+const ExampleSFC = defineComponent({
+  name: "ExampleSFC",
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  }
+});
+
+export default ExampleSFC;
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  height: 200px;
+  border: 3px dashed rgba(90, 167, 164, 0.9);
+  border-radius: 8px;
+  background-color: rgba(90, 167, 164, 0.2);
+}
+</style>

src/views/components/count-to/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="margin:10px">
-    <el-row :gutter="10">
+    <el-row :gutter="24">
-      <el-col :span="10">
+      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
         <el-card shadow="always">
           <CountTo
             prefix="$"
@@ -13,7 +13,7 @@
           />
         </el-card>
       </el-col>
-      <el-col :span="10">
+      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
         <el-card shadow="always">
           <CountTo
             prefix="$"
@@ -44,5 +44,6 @@ export default {
 <style lang="scss" scoped>
 :deep(.el-card) {
   text-align: center;
+  margin-bottom: 10px;
 }
 </style>