From 53050b568132dbd498d084dcb9fec9e0f5df5f9a Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Sat, 23 Jan 2021 01:10:00 +0800
Subject: [PATCH] update

---
 src/App.vue                       |  1 -
 src/components/EditableTable.vue  | 41 +++++++++++++++++++++++++------
 src/views/Editor/Canvas/index.vue |  2 +-
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 757c3f51..b8b66a9f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -51,6 +51,5 @@ export default defineComponent({
   right: 0;
   background-color: #fff;
   padding: 10px;
-  z-index: -1;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/EditableTable.vue b/src/components/EditableTable.vue
index 8dc88236..b4c96ffc 100644
--- a/src/components/EditableTable.vue
+++ b/src/components/EditableTable.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue'
 import { ContextmenuItem } from './Contextmenu/types'
 import { KEYS } from '@/configs/hotkey'
 import { createRandomCode } from '@/utils/common'
@@ -81,6 +81,11 @@ export default defineComponent({
   components: {
     EditableDiv,
   },
+  props: {
+    tableCells: {
+      type: Array as PropType<TableCells[][]>,
+    },
+  },
   setup() {
     const tableCells = ref<TableCells[][]>([
       [
@@ -195,11 +200,11 @@ export default defineComponent({
     const handleMouseup = () => isStartSelect.value = false
 
     const handleCellMousedown = (e: MouseEvent, rowIndex: number, colIndex: number) => {
-      if(e.which !== 1) return
-
-      endCell.value = []
-      isStartSelect.value = true
-      startCell.value = [rowIndex, colIndex]
+      if(e.button === 0) {
+        endCell.value = []
+        isStartSelect.value = true
+        startCell.value = [rowIndex, colIndex]
+      }
     }
 
     const handleCellMouseenter = (rowIndex: number, colIndex: number) => {
@@ -486,14 +491,23 @@ export default defineComponent({
         { divider: true },
         {
           text: '合并单元格',
-          hide: !isMultiSelected,
+          disable: !isMultiSelected,
           handler: mergeCells,
         },
         {
           text: '取消合并单元格',
-          hide: isMultiSelected || !canSplit,
+          disable: isMultiSelected || !canSplit,
           handler: () => splitCells(rowIndex, colIndex),
         },
+        { divider: true },
+        {
+          text: '选中当前列',
+          handler: () => selectCol(colIndex),
+        },
+        {
+          text: '选中当前行',
+          handler: () => selectRow(rowIndex),
+        },
         {
           text: '选中全部单元格',
           handler: selectAll,
@@ -545,6 +559,17 @@ table {
     border: 1px solid #d9d9d9;
     cursor: default;
 
+    &.active::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border: 1px solid rgba($color: $themeColor, $alpha: .5);
+      pointer-events: none;
+    }
+
     &.selected::after {
       content: '';
       width: 100%;
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index a2e910f3..7d9a9b8e 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -253,7 +253,7 @@ export default defineComponent({
 }
 .viewport-wrapper {
   position: absolute;
-  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
 }
 .viewport {
   position: absolute;