feat: 新增 @pureadmin/table 右键菜单示例

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@ctrl/tinycolor": "^3.4.1",
+    "@howdyjs/mouse-menu": "^2.0.5",
     "@logicflow/core": "^1.1.30",
     "@logicflow/extension": "^1.1.30",
     "@pureadmin/components": "^1.1.0",

pnpm-lock.yaml

@@ -6,6 +6,7 @@ specifiers:
   "@commitlint/config-conventional": 13.1.0
   "@ctrl/tinycolor": ^3.4.1
   "@faker-js/faker": ^7.5.0
+  "@howdyjs/mouse-menu": ^2.0.5
   "@iconify-icons/carbon": ^1.2.8
   "@iconify-icons/ep": ^1.2.7
   "@iconify-icons/fa": ^1.2.3
@@ -128,6 +129,7 @@ specifiers:
 dependencies:
   "@amap/amap-jsapi-loader": 1.0.1
   "@ctrl/tinycolor": 3.4.1
+  "@howdyjs/mouse-menu": 2.0.5_vue@3.2.45
   "@logicflow/core": 1.1.31
   "@logicflow/extension": 1.1.31
   "@pureadmin/components": 1.1.0_vue@3.2.45
@@ -995,6 +997,18 @@ packages:
       "@floating-ui/core": 1.0.2
     dev: false
 
+  /@howdyjs/mouse-menu/2.0.5_vue@3.2.45:
+    resolution:
+      {
+        integrity: sha512-20e7mmmFOOLNOHC/38zEWnLgZaNTrZ2GSYhUf4XpaE99ehn4Gq0vf5K/DlALliFQ1zsrfdhIrC13+HNQHyBZKQ==
+      }
+    peerDependencies:
+      vue: ">=3.0.0"
+    dependencies:
+      tslib: 1.14.1
+      vue: 3.2.45
+    dev: false
+
   /@humanwhocodes/config-array/0.11.7:
     resolution:
       {
@@ -8531,7 +8545,6 @@ packages:
       {
         integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
       }
-    dev: true
 
   /tslib/2.3.0:
     resolution:

src/views/pure-table/high/contextmenu/columns.tsx

@@ -0,0 +1,70 @@
+import { ref } from "vue";
+import { tableDataDrag } from "../data";
+import { clone } from "@pureadmin/utils";
+import { message } from "@pureadmin/components";
+import { CustomMouseMenu } from "@howdyjs/mouse-menu";
+
+export function useColumns() {
+  const dataList = ref(clone(tableDataDrag, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    }
+  ];
+
+  // 配置参考：https://kongfandong.cn/howdy/mouse-menu/readme
+  const menuOptions = {
+    menuList: [
+      {
+        label: ({ id }) => `ID为：${id}`,
+        disabled: true
+      },
+      {
+        label: "编辑",
+        tips: "Edit",
+        fn: row =>
+          message.success(
+            `您编辑了第 ${
+              dataList.value.findIndex(v => v.id === row.id) + 1
+            } 行，数据为：${JSON.stringify(row)}`
+          )
+      }
+    ]
+  };
+
+  function showMouseMenu(row, column, event) {
+    event.preventDefault();
+    const { x, y } = event;
+    const ctx = CustomMouseMenu({
+      el: event.currentTarget,
+      params: row,
+      // 菜单容器的CSS设置
+      menuWrapperCss: {
+        background: "var(--el-bg-color)"
+      },
+      menuItemCss: {
+        labelColor: "var(--el-text-color)",
+        hoverLabelColor: "var(--el-color-primary)",
+        hoverTipsColor: "var(--el-color-primary)"
+      },
+      ...menuOptions
+    });
+    ctx.show(x, y);
+  }
+
+  return {
+    columns,
+    dataList,
+    showMouseMenu
+  };
+}

src/views/pure-table/high/contextmenu/index.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList, showMouseMenu } = useColumns();
+</script>
+
+<template>
+  <pure-table
+    row-key="id"
+    border
+    :data="dataList"
+    :columns="columns"
+    @row-contextmenu="showMouseMenu"
+  />
+</template>

src/views/pure-table/high/drag/column/columns.tsx

@@ -1,10 +1,11 @@
 import Sortable from "sortablejs";
+import { clone } from "@pureadmin/utils";
 import { tableDataDrag } from "../../data";
 import { ref, nextTick, onMounted } from "vue";
 
-// 行拖拽演示
+// 列拖拽演示
 export function useColumns() {
-  const dataList = ref(tableDataDrag);
+  const dataList = ref(clone(tableDataDrag, true));
 
   const columnsDrag = ref<TableColumnList>([
     {

src/views/pure-table/high/drag/row/columns.tsx

@@ -1,10 +1,11 @@
 import Sortable from "sortablejs";
 import { ref, nextTick } from "vue";
+import { clone } from "@pureadmin/utils";
 import { tableDataDrag } from "../../data";
 
 // 行拖拽演示
 export function useColumns() {
-  const dataList = ref(tableDataDrag);
+  const dataList = ref(clone(tableDataDrag, true));
 
   const rowDrop = (event: { preventDefault: () => void }) => {
     event.preventDefault();

src/views/pure-table/high/list.tsx

@@ -1,5 +1,6 @@
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
+import Contextmenu from "./contextmenu/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
@@ -16,5 +17,11 @@ export const list = [
     content: rendContent("drag/column"),
     title: "拖拽表格（列拖拽）",
     component: ColumnDrag
+  },
+  {
+    key: "contextmenu",
+    content: rendContent("contextmenu"),
+    title: "右键菜单",
+    component: Contextmenu
   }
 ];