simple table context menu

src/components/config/globalConfig.ts

@@ -99,7 +99,7 @@ export const elementList = [
     {
         icon: 'fa fa-th',
         code: 'table',
-        name: '单元格',
+        name: '简单表格',
         component: 'YvanSimpleTable',
         propValue: {},
         style: {

src/components/elements/style.js

@@ -354,7 +354,7 @@ export const StyledSimpleTable = styled('div', simpleTableProps)`
   .yvan-simple-table__cell__corner {
     width: 8px;
     height: 8px;
-    background: var(--roy-color-primary);
+    background: var(--yvan-color-primary);
     box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
     position: absolute;
     right: 0;

src/components/elements/yvan-table/YvanSimpleTable.vue

@@ -5,9 +5,9 @@
           v-for="item in contextMenu"
           :key="item.code"
           :class="`yvan-context--${item.status}`"
-          @click="item.event"
+          @handle-click="item.event"
       >
-        <i :class="item.icon"></i>
+        <i><component :is="item.icon" /></i>
         <span>{{ item.label }}</span>
       </ContextItem>
     </Context>
@@ -97,11 +97,11 @@ const defaultTableCell = {
   simpleTextStyle: {},
   style: {
     color: '#212121',
-    borderRadius: 'inherit',
+    borderRadius: 0,
     padding: '0',
     margin: '0',
     fontFamily: 'default',
-    lineHeight: '1',
+    lineHeight: 1,
     letterSpacing: '0',
     borderWidth: 0,
     borderColor: '#212121',
@@ -115,8 +115,7 @@ const defaultTableCell = {
     alignItems: 'center',
     fontWeight: 'normal',
     fontStyle: 'normal',
-    isUnderLine: false,
-    isDelLine: false
+    textStyle: [],
   },
   groupStyle: {}
 }
@@ -192,18 +191,37 @@ export default {
       },
       contextMenu: [
         {
+          label: '插入行',
+          code: 'insertRow',
+          icon: 'InsertRowAboveOutlined',
+          status: 'default',
+          event: () => {
+            console.log(' contextMenu insert row >>> ', 'addRow')
+            this.menyItemCmd('addRow')
+          }
+        },
+        {
           label: '添加行',
           code: 'addRow',
-          icon: 'ri-insert-row-bottom',
+          icon: 'InsertRowBelowOutlined',
           status: 'default',
           event: () => {
             this.menyItemCmd('addRow')
           }
         },
         {
+          label: '插入列',
+          code: 'insertCol',
+          icon: 'InsertRowLeftOutlined',
+          status: 'default',
+          event: () => {
+            this.menyItemCmd('addCol')
+          }
+        },
+        {
           label: '添加列',
           code: 'addCol',
-          icon: 'ri-insert-column-right',
+          icon: 'InsertRowRightOutlined',
           status: 'default',
           event: () => {
             this.menyItemCmd('addCol')
@@ -212,7 +230,7 @@ export default {
         {
           label: '删除行',
           code: 'delRow',
-          icon: 'ri-delete-row',
+          icon: 'DeleteRowOutlined',
           status: 'default',
           event: () => {
             this.menyItemCmd('delRow')
@@ -221,7 +239,7 @@ export default {
         {
           label: '删除列',
           code: 'delCol',
-          icon: 'ri-delete-column',
+          icon: 'DeleteColumnOutlined',
           status: 'default',
           event: () => {
             this.menyItemCmd('delCol')
@@ -230,7 +248,7 @@ export default {
         {
           label: '合并',
           code: 'merge',
-          icon: 'ri-merge-cells-horizontal',
+          icon: 'MergeCellsOutlined',
           status: 'default',
           event: () => {
             this.menyItemCmd('merge')
@@ -239,7 +257,7 @@ export default {
         {
           label: '拆分',
           code: 'split',
-          icon: 'ri-split-cells-horizontal',
+          icon: 'SplitCellsOutlined',
           status: 'default',
           event: () => {
             this.menyItemCmd('split')
@@ -248,7 +266,7 @@ export default {
         {
           label: '清空选择',
           code: 'clearSelection',
-          icon: 'ri-eraser-line',
+          icon: 'ClearOutlined',
           status: 'default',
           event: () => {
             this.menyItemCmd('clearSelection')
@@ -384,6 +402,7 @@ export default {
       this.selectionHold = -1
     },
     handleContendMenu(e) {
+      console.log(' >>> ')
       e.preventDefault()
       e.stopPropagation()
     },

src/components/yvan-context/components/Context.vue

@@ -9,13 +9,11 @@ import eventBus from "@/utils/eventBus";
 
 export default {
   name: 'yvan-print-context',
-
   provide() {
     return {
       $$contextmenu: this
     }
   },
-
   props: {
     eventType: {
       type: String,
@@ -57,27 +55,20 @@ export default {
 
   watch: {
     visible(value) {
-      console.log("watch visible >>>> ", value)
       if (value) {
         this.$emit('show', this)
-
         document.body.addEventListener('click', this.handleBodyClick)
       } else {
         this.$emit('hide', this)
-
         document.body.removeEventListener('click', this.handleBodyClick)
       }
     }
   },
   mounted() {
-    console.log('Context menu >>> ', this.$props)
-
     document.body.appendChild(this.$el)
-
     eventBus.on("showContextMenu", (position) => {
       this.show(position)
     })
-
     if (window.$$VContextmenu) {
       window.$$VContextmenu[this.$contextmenuId] = this
     } else {
@@ -86,13 +77,10 @@ export default {
   },
   beforeDestroy() {
     document.body.removeChild(this.$el)
-
     delete window.$$VContextmenu[this.$contextmenuId]
-
     this.references.forEach((ref) => {
       ref.el.removeEventListener(this.eventType, this.handleReferenceContextmenu)
     })
-
     document.body.removeEventListener('click', this.handleBodyClick)
   },
 
@@ -100,44 +88,33 @@ export default {
     addRef(ref) {
       // FIXME: 如何处理 removeRef？
       this.references.push(ref)
-
       ref.el.addEventListener(this.eventType, this.handleReferenceContextmenu)
     },
     handleReferenceContextmenu(event) {
       event.preventDefault()
-
       if (this.disabled) {
         return
       }
-
       const reference = this.references.find((ref) => ref.el.contains(event.target))
-
       this.$emit('contextmenu', reference ? reference.vnode : null)
-
       const eventX = event.pageX
       const eventY = event.pageY
-
       this.show()
-
       this.$nextTick(() => {
         const contextmenuPosition = {
           top: eventY,
           left: eventX
         }
-
         if (this.autoPlacement) {
           const contextmenuWidth = this.$refs.contextmenu.clientWidth
           const contextmenuHeight = this.$refs.contextmenu.clientHeight
-
           if (contextmenuHeight + eventY >= window.innerHeight) {
             contextmenuPosition.top -= contextmenuHeight
           }
-
           if (contextmenuWidth + eventX >= window.innerWidth) {
             contextmenuPosition.left -= contextmenuWidth
           }
         }
-
         this.style = {
           top: `${contextmenuPosition.top}px`,
           left: `${contextmenuPosition.left}px`
@@ -159,14 +136,12 @@ export default {
           window.$$VContextmenu[key].hide()
         }
       })
-
       if (position) {
         this.style = {
           top: `${position.top}px`,
           left: `${position.left}px`
         }
       }
-      console.log("position >>>", position, this.style)
       this.visible = true
     },
     hide() {

src/components/yvan-context/components/ContextItem.vue

@@ -2,11 +2,11 @@
   <li v-if="divider" class="yvan-print-context-divider"></li>
 
   <li
-    v-else
-    :class="classname"
-    @click="handleClick"
-    @mouseenter="handleMouseenter"
-    @mouseleave="handleMouseleave"
+      v-else
+      :class="classname"
+      @click="handleClick"
+      @mouseenter="handleMouseenter"
+      @mouseleave="handleMouseleave"
   >
     <slot></slot>
   </li>
@@ -66,9 +66,7 @@ export default {
       if (this.disabled) {
         return
       }
-
-      this.$emit('click', this, event)
-
+      this.$emit('handle-click', this, event)
       this.autoHide && this.$$contextmenu.hide()
     }
   }

src/components/yvan-context/directive.js

@@ -1,11 +1,8 @@
-/* eslint-disable no-param-reassign */
 export default {
-  // 之所以用 inserted 而不是 bind，是需要确保 contentmenu mounted 后才进行 addRef 操作
-  inserted(el, binding, vnode) {
-    console.log('directive >>> ', el, binding, vnode)
-    const node = vnode.context.$refs[binding.arg] || vnode.context.$refs[binding.value]
+  mounted(el, binding, vnode) {
+    const node = vnode.ctx.refs[binding.arg] || vnode.ctx.refs[binding.value]
     const contextmenu = Object.prototype.toString.call(node) === '[object Array]' ? node[0] : node
     contextmenu.addRef({ el, vnode })
-    contextmenu.$contextmenuId = el.id || contextmenu._uid // eslint-disable-line no-underscore-dangle
+    contextmenu.$contextmenuId = el.id || contextmenu._uid
   }
 }

src/components/yvan-editor/Editor.vue

@@ -64,7 +64,7 @@
           v-for="item in contextMenu"
           :key="item.code"
           :class="`yvan-print-context--${item.status}`"
-          @click="item.event"
+          @handle-click="item.event"
       >
         <i :class="item.icon"></i>
         <span>{{ item.label }}</span>