feat(fix): 【仪表板】文本，选中后无法取消

frontend/src/components/DeDrag/index.vue

@@ -1197,7 +1197,6 @@ export default {
 
       // 如果辅助设计 需要最后调整矩阵
       if (this.canvasStyleData.auxiliaryMatrix) {
-        debugger
         this.recordMatrixCurStyle()
       }
       this.hasMove && this.$store.commit('recordSnapshot')

frontend/src/components/canvas/components/Editor/index.vue

@@ -40,6 +40,8 @@
         :prop-value="item.propValue"
         :element="item"
         :out-style="getShapeStyleInt(item.style)"
+        :edit-mode="'edit'"
+        :active="item === curComponent"
         @input="handleInput"
       />
       <component

frontend/src/components/canvas/components/Toolbar.vue

@@ -271,6 +271,7 @@ export default {
     float: right;
     height: 35px;
     line-height: 35px;
+    min-width: 900px;
     /*background: #fff;*/
     /*border-bottom: 1px solid #ddd;*/
 

frontend/src/components/canvas/custom-component/VText.vue

@@ -1,99 +1,130 @@
 <template>
-    <div v-if="editMode == 'edit'" class="v-text" @keydown="handleKeydown" @keyup="handleKeyup">
-        <!-- tabindex >= 0 使得双击时聚集该元素 -->
-        <div :contenteditable="canEdit" :class="{ canEdit }" @dblclick="setEdit" :tabindex="element.id" @paste="clearStyle"
-            @mousedown="handleMousedown" @blur="handleBlur" ref="text" v-html="element.propValue" @input="handleInput"
-            :style="{ verticalAlign: element.style.verticalAlign }"
-        ></div>
-    </div>
-    <div v-else class="v-text">
-        <div v-html="element.propValue" :style="{ verticalAlign: element.style.verticalAlign }"></div>
-    </div>
+  <div v-if="editMode == 'edit'" class="v-text" @keydown="handleKeydown" @keyup="handleKeyup">
+    <!-- tabindex >= 0 使得双击时聚集该元素 -->
+    <div
+      ref="text"
+      :contenteditable="canEdit"
+      :class="{ canEdit }"
+      :tabindex="element.id"
+      :style="{ verticalAlign: element.style.verticalAlign }"
+      @dblclick="setEdit"
+      @paste="clearStyle"
+      @mousedown="handleMousedown"
+      @blur="handleBlur"
+      @input="handleInput"
+      v-html="element.propValue"
+    />
+  </div>
+  <div v-else class="v-text">
+    <div :style="{ verticalAlign: element.style.verticalAlign }" v-html="element.propValue" />
+  </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import { keycodes } from '@/components/canvas/utils/shortcutKey.js'
 
 export default {
-    props: {
-        propValue: {
-            type: String,
-            require: true,
-        },
-        element: {
-            type: Object,
-        },
+  props: {
+    propValue: {
+      type: String,
+      require: true
     },
-    data() {
-        return {
-            canEdit: false,
-            ctrlKey: 17,
-            isCtrlDown: false,
-        }
+    element: {
+      type: Object
     },
-    computed: {
-        ...mapState([
-            'editMode',
-        ]),
+    editMode: {
+      type: String,
+      require: false,
+      default: 'preview'
     },
-    methods: {
-        handleInput(e) {
-            this.$emit('input', this.element, e.target.innerHTML)
-        },
+    active: {
+      type: Boolean,
+      require: false,
+      default: false
+    }
 
-        handleKeydown(e) {
-            if (e.keyCode == this.ctrlKey) {
-                this.isCtrlDown = true
-            } else if (this.isCtrlDown && this.canEdit && keycodes.includes(e.keyCode)) {
-                e.stopPropagation()
-            } else if (e.keyCode == 46) { // deleteKey
-                e.stopPropagation()
-            }
-        },
+  },
+  data() {
+    return {
+      canEdit: false,
+      ctrlKey: 17,
+      isCtrlDown: false
+    }
+  },
+  computed: {
+  },
 
-        handleKeyup(e) {
-            if (e.keyCode == this.ctrlKey) {
-                this.isCtrlDown = false
-            }
-        },
-
-        handleMousedown(e) {
-            if (this.canEdit) {
-                e.stopPropagation()
-            }
-        },
-
-        clearStyle(e) {
-            e.preventDefault()
-            const clp = e.clipboardData
-            const text = clp.getData('text/plain') || ''
-            if (text !== '') {
-                document.execCommand('insertText', false, text)
-            }
-
-            this.$emit('input', this.element, e.target.innerHTML)
-        },
-
-        handleBlur(e) {
-            this.element.propValue = e.target.innerHTML || '&nbsp;'
-            this.canEdit = false
-        },
-
-        setEdit() {
-            this.canEdit = true
-            // 全选
-            this.selectText(this.$refs.text)
-        },
-
-        selectText(element) {
-            const selection = window.getSelection()
-            const range = document.createRange()
-            range.selectNodeContents(element)
-            selection.removeAllRanges()
-            selection.addRange(range)
-        },
+  watch: {
+    active: {
+      handler(newVal, oldVla) {
+        debugger
+        this.removeSelectText()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleInput(e) {
+      this.$emit('input', this.element, e.target.innerHTML)
     },
+
+    handleKeydown(e) {
+      if (e.keyCode == this.ctrlKey) {
+        this.isCtrlDown = true
+      } else if (this.isCtrlDown && this.canEdit && keycodes.includes(e.keyCode)) {
+        e.stopPropagation()
+      } else if (e.keyCode == 46) { // deleteKey
+        e.stopPropagation()
+      }
+    },
+
+    handleKeyup(e) {
+      if (e.keyCode == this.ctrlKey) {
+        this.isCtrlDown = false
+      }
+    },
+
+    handleMousedown(e) {
+      if (this.canEdit) {
+        e.stopPropagation()
+      }
+    },
+
+    clearStyle(e) {
+      e.preventDefault()
+      const clp = e.clipboardData
+      const text = clp.getData('text/plain') || ''
+      if (text !== '') {
+        document.execCommand('insertText', false, text)
+      }
+
+      this.$emit('input', this.element, e.target.innerHTML)
+    },
+
+    handleBlur(e) {
+      this.element.propValue = e.target.innerHTML || '&nbsp;'
+      this.canEdit = false
+    },
+
+    setEdit() {
+      this.canEdit = true
+      // 全选
+      this.selectText(this.$refs.text)
+    },
+
+    selectText(element) {
+      const selection = window.getSelection()
+      const range = document.createRange()
+      range.selectNodeContents(element)
+      selection.removeAllRanges()
+      selection.addRange(range)
+    },
+
+    removeSelectText() {
+      const selection = window.getSelection()
+      selection.removeAllRanges()
+    }
+  }
 }
 </script>