refactor: update contextmenu style

ly525
1 parent 9d9f7ec3
Showing 3 changed files with 45 additions and 35 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/support/contexmenu.js
front-end/h5/src/components/core/support/contexmenu.scss
@@ -119,19 +119,6 @@ export default {
       // 优化右击菜单的显示，去除冗余的无效逻辑
       const { x, y } = this.$el.getBoundingClientRect()
       this.contextmenuPos = [e.clientX - x, e.clientY - y]
-      // console.log(e.target)
-      // console.log(e.target.classList)
-      // // e.preventDefault() // 不显示默认的右击菜单
-      // if (
-      //   e.target.classList.contains('element-on-edit-canvas') ||
-      //   e.target.parentElement.classList.contains('element-on-edit-canvas')
-      // ) {
-      //   const { x, y } = this.$el.getBoundingClientRect()
-      //   console.log(x, y)
-      //   this.contextmenuPos = [e.clientX - x, e.clientY - y]
-      // } else {
-      //   this.hideContextMenu()
-      // }
     },
     hideContextMenu () {
       this.contextmenuPos = []
@@ -289,7 +276,13 @@ export default {
           {
             this.contextmenuPos.length
               ? <ContextMenu
-                position={this.contextmenuPos}
+                style={{
+                  left: this.contextmenuPos[0] + 'px',
+                  top: this.contextmenuPos[1] + 'px',
+                  userSelect: 'none',
+                  position: 'absolute',
+                  zIndex: 999
+                }}
                 onSelect={({ item, key, selectedKeys }) => {
                   this.elementManager({ type: key })
                   this.hideContextMenu()
  
 /**
+ * 右键菜单
+ *
+ * 效果：
+ * - 复制
+ * - 删除
+ * - 置顶、置底、上移、下移
+ *
  * jsx 相关参考链接：
  * onMouseleave: https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-trigger/Trigger.jsx#L205
  *
  */
+
+import './contexmenu.scss'
+
+// 垂直菜单
 const contextmenuOptions = [
   {
     i18nLabel: 'editor.centerPanel.contextMenu.copy',
@@ -17,6 +28,7 @@ const contextmenuOptions = [
   }
 ]
  
+// 水平菜单
 const zindexContextMenu = [
   {
     i18nLabel: 'editor.centerPanel.contextMenu.moveToTop',
@@ -40,13 +52,6 @@ const zindexContextMenu = [
   }
 ]
  
-const horizontalMenuStyle = {
-  height: '35px',
-  lineHeight: '35px',
-  border: 'none',
-  borderTop: '1px solid #eee'
-}
-
 export default {
   props: {
     position: {
@@ -60,45 +65,36 @@ export default {
     }
   },
   render (h) {
-    const contextStyle = {
-      left: this.position[0] + 'px',
-      top: this.position[1] + 'px',
-      userSelect: 'none',
-      position: 'absolute',
-      zIndex: 999
-    }
     return (
       <a-card
         bodyStyle={{ padding: '4px' }}
-        ref="contextmenu"
-        style={contextStyle}
+        class="contextmenu"
       >
         <a-menu
           inlineIndent={4}
           mode="inline"
           onSelect={this.handleSelectMenu}
-          style={{ border: 'none' }}
+          class="contextmenu__vertical-menus"
         >
           { contextmenuOptions.map(option => (
             <a-menu-item
               key={option.value}
               data-command={option.value}
-              style={{ height: '30px', lineHeight: '30px', margin: 0 }}
+              class="contextmenu__vertical-menus__item"
             >{this.$t(option.i18nLabel)}</a-menu-item>
           ))
           }
         </a-menu>
         <a-menu
           mode="horizontal"
-          ref="contextmenu"
           onSelect={this.handleSelectMenu}
-          style={horizontalMenuStyle}
+          class="contextmenu__horizontal-menus"
         >
           { zindexContextMenu.map(option => (
             <a-menu-item
               key={option.value}
               data-command={option.value}
-              style={{ height: '35px', lineHeight: '35px', padding: '0 4px 4px' }}
+              class="contextmenu__horizontal-menus__item"
             >{this.$t(option.i18nLabel)}</a-menu-item>
           ))
           }
+.contextmenu {
+  &__horizontal-menus {
+    height: 32px;
+    line-height: 32px;
+    border: none;
+    border-top: 1px solid #eee;
+
+    &__item {
+      padding: 0 4px 4px;
+    }
+  }
+
+  &__vertical-menus {
+    border: none;
+    &__item {
+      height: 22px !important;
+      line-height: 22px !important;
+      margin: 0;
+    }
+  }
+}