feat: contextmenu support whitelist !#zh: 右键菜单支持元素黑白名单

ly525 · 小小鲁班
1 parent 7bd33cb7
Showing 3 changed files with 74 additions and 9 deletions
front-end/h5/src/components/core/support/contexmenu.js
front-end/h5/src/locales/lang/en-US.js
front-end/h5/src/locales/lang/zh-CN.js
@@ -12,8 +12,13 @@
  *
  */
+import { mapState } from 'vuex'
 import './contexmenu.scss'
+function isRegExp (value) {
+  return value instanceof RegExp
+}
+
 // 垂直菜单
 const contextmenuOptions = [
   {
@@ -25,6 +30,30 @@ const contextmenuOptions = [
     i18nLabel: 'editor.centerPanel.contextMenu.delete',
     label: '删除',
     value: 'delete'
+  },
+  /**
+   * contextMenu 白名单，只有匹配白名单列表里的元素，才会显示该选项
+   * 支持正则、数组
+   * 数组：[ElementName]
+   * 正则：RegExp
+   */
+  {
+    i18nLabel: 'editor.centerPanel.contextMenu.showOnlyButton',
+    label: 'showOnlyButton',
+    value: 'showOnlyButton',
+    elementWhiteList: ['lbp-button']
+  },
+  /**
+   * contextMenu 黑名单，在黑名单列表里的元素，不会显示该选项
+   * 支持正则、数组
+   * 数组：[ElementName]
+   * 正则：RegExp
+   */
+  {
+    i18nLabel: 'editor.centerPanel.contextMenu.showExcludePicture',
+    label: 'showExcludePicture',
+    value: 'showExcludePicture',
+    elementBlackList: /^lbp-picture/
   }
 ]
@@ -53,6 +82,37 @@ const zindexContextMenu = [
 ]
 export default {
+  computed: {
+    ...mapState('editor', ['editingElement', 'work']),
+    /**
+     * 做一下扩展，提供：黑白名单，来针对某些特定组件，展示特定右键菜单
+     * TODO：后期提供如下方式，来扩展右键菜单
+        window.GlobalLuban.contextmenu.registerMenu({
+          label: '复制',
+          value: 'copy',
+          elementWhiteList: Array || RegExp
+          elementBlackList: Array || RegExp
+        })
+     */
+    filteredOptions () {
+      const elementName = this.editingElement.name
+      const filteredOptions = contextmenuOptions.filter(option => {
+        const wl = option.elementWhiteList
+        const bl = option.elementBlackList
+        if (wl) {
+          if (Array.isArray(wl)) return wl.includes(elementName)
+          if (isRegExp(wl)) return wl.test(elementName)
+        }
+        if (bl) {
+          if (Array.isArray(bl)) return !bl.includes(elementName)
+          debugger
+          if (isRegExp(bl)) return !bl.test(elementName)
+        }
+        return true
+      })
+      return filteredOptions
+    }
+  },
   props: {
     position: {
       type: Array,
@@ -76,13 +136,14 @@ export default {
           onSelect={this.handleSelectMenu}
           class="contextmenu__vertical-menus"
         >
-          { contextmenuOptions.map(option => (
-            <a-menu-item
-              key={option.value}
-              data-command={option.value}
-              class="contextmenu__vertical-menus__item"
-            >{this.$t(option.i18nLabel)}</a-menu-item>
-          ))
+          {
+            this.filteredOptions.map(option => (
+              <a-menu-item
+                key={option.value}
+                data-command={option.value}
+                class="contextmenu__vertical-menus__item"
+              >{this.$t(option.i18nLabel)}</a-menu-item>
+            ))
           }
         </a-menu>
         <a-menu
@@ -60,7 +60,9 @@ export default {
         moveToTop: 'Move To Top',
         moveToBottom: 'Move To Bottom',
         moveUp: 'Move Up',
-        moveDown: 'Move Down'
+        moveDown: 'Move Down',
+        showOnlyButton: 'showOnlyButton',
+        showExcludePicture: 'showExcludePicture'
       }
     },
     fixedTool: {
@@ -69,7 +69,9 @@ export default {
         moveToTop: '置顶',
         moveToBottom: '置底',
         moveUp: '上移',
-        moveDown: '下移'
+        moveDown: '下移',
+        showOnlyButton: '只有按钮才显示该选项',
+        showExcludePicture: '除了图片都显示该选项'
       }
     },
     fixedTool: {