Demo:修复开启输入自动进入文本编辑模式和其他输入框冲突的问题

simple-mind-map/src/constants/defaultOptions.js

@@ -128,7 +128,8 @@ export const defaultOpt = {
   // 拖拽元素时，指示元素新位置的块的最大高度
   nodeDragPlaceholderMaxSize: 20,
   // 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式
-  enableAutoEnterTextEditWhenKeydown: true,
+  // 开启该特性后，需要给你的输入框绑定keydown事件，并禁止冒泡
+  enableAutoEnterTextEditWhenKeydown: false,
   // 设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果
   // 需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果
   richTextEditFakeInPlace: false

web/src/pages/Edit/components/BaseStyle.vue

@@ -277,7 +277,9 @@
       </div>
       <div class="row">
         <div class="rowItem">
-          <span class="name">{{ $t('baseStyle.associativeLineActiveColor') }}</span>
+          <span class="name">{{
+            $t('baseStyle.associativeLineActiveColor')
+          }}</span>
           <span
             class="block"
             v-popover:popover5
@@ -295,7 +297,9 @@
           </el-popover>
         </div>
         <div class="rowItem">
-          <span class="name">{{ $t('baseStyle.associativeLineActiveWidth') }}</span>
+          <span class="name">{{
+            $t('baseStyle.associativeLineActiveWidth')
+          }}</span>
           <el-select
             size="mini"
             style="width: 80px"
@@ -382,11 +386,15 @@
       <div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
       <div class="row">
         <div class="rowItem">
-          <el-checkbox v-model="style.nodeUseLineStyle" @change="
+          <el-checkbox
+            v-model="style.nodeUseLineStyle"
+            @change="
               value => {
                 update('nodeUseLineStyle', value)
               }
-            ">{{ $t('baseStyle.nodeUseLineStyle') }}</el-checkbox>
+            "
+            >{{ $t('baseStyle.nodeUseLineStyle') }}</el-checkbox
+          >
         </div>
       </div>
       <!-- 内边距 -->
@@ -520,7 +528,11 @@
       <div class="row">
         <!-- 是否显示水印 -->
         <div class="rowItem">
-          <el-checkbox v-model="watermarkConfig.show" @change="watermarkShowChange">{{ $t('baseStyle.showWatermark') }}</el-checkbox>
+          <el-checkbox
+            v-model="watermarkConfig.show"
+            @change="watermarkShowChange"
+            >{{ $t('baseStyle.showWatermark') }}</el-checkbox
+          >
         </div>
       </div>
       <template v-if="watermarkConfig.show">
@@ -528,7 +540,12 @@
         <div class="row">
           <div class="rowItem">
             <span class="name">{{ $t('baseStyle.watermarkText') }}</span>
-            <el-input v-model="watermarkConfig.text" size="small" @change="updateWatermarkConfig"></el-input>
+            <el-input
+              v-model="watermarkConfig.text"
+              size="small"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input>
           </div>
         </div>
         <!-- 水印文字颜色 -->
@@ -543,10 +560,12 @@
             <el-popover ref="popover3" placement="bottom" trigger="click">
               <Color
                 :color="watermarkConfig.textStyle.color"
-                @change="(value) => {
+                @change="
-                  watermarkConfig.textStyle.color = value
+                  value => {
-                  updateWatermarkConfig()
+                    watermarkConfig.textStyle.color = value
-                }"
+                    updateWatermarkConfig()
+                  }
+                "
               ></Color>
             </el-popover>
           </div>
@@ -555,35 +574,72 @@
         <div class="row">
           <div class="rowItem">
             <span class="name">{{ $t('baseStyle.watermarkTextOpacity') }}</span>
-            <el-slider v-model="watermarkConfig.textStyle.opacity" style="width: 170px" :min="0" :max="1" :step="0.1" @change="updateWatermarkConfig"></el-slider>
+            <el-slider
+              v-model="watermarkConfig.textStyle.opacity"
+              style="width: 170px"
+              :min="0"
+              :max="1"
+              :step="0.1"
+              @change="updateWatermarkConfig"
+            ></el-slider>
           </div>
         </div>
         <!-- 水印文字字号 -->
         <div class="row">
           <div class="rowItem">
-            <span class="name">{{ $t('baseStyle.watermarkTextFontSize') }}</span>
+            <span class="name">{{
-            <el-input-number v-model="watermarkConfig.textStyle.fontSize" size="small" :min="0" :max="50" :step="1" @change="updateWatermarkConfig"></el-input-number>
+              $t('baseStyle.watermarkTextFontSize')
+            }}</span>
+            <el-input-number
+              v-model="watermarkConfig.textStyle.fontSize"
+              size="small"
+              :min="0"
+              :max="50"
+              :step="1"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input-number>
           </div>
         </div>
         <!-- 旋转角度 -->
         <div class="row">
           <div class="rowItem">
             <span class="name">{{ $t('baseStyle.watermarkAngle') }}</span>
-            <el-input-number v-model="watermarkConfig.angle" size="small" :min="0" :max="90" :step="10" @change="updateWatermarkConfig"></el-input-number>
+            <el-input-number
+              v-model="watermarkConfig.angle"
+              size="small"
+              :min="0"
+              :max="90"
+              :step="10"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input-number>
           </div>
         </div>
         <!-- 水印行间距 -->
         <div class="row">
           <div class="rowItem">
             <span class="name">{{ $t('baseStyle.watermarkLineSpacing') }}</span>
-            <el-input-number v-model="watermarkConfig.lineSpacing" size="small" :step="10" @change="updateWatermarkConfig"></el-input-number>
+            <el-input-number
+              v-model="watermarkConfig.lineSpacing"
+              size="small"
+              :step="10"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input-number>
           </div>
         </div>
         <!-- 水印文字间距 -->
         <div class="row">
           <div class="rowItem">
             <span class="name">{{ $t('baseStyle.watermarkTextSpacing') }}</span>
-            <el-input-number v-model="watermarkConfig.textSpacing" size="small" :step="10" @change="updateWatermarkConfig"></el-input-number>
+            <el-input-number
+              v-model="watermarkConfig.textSpacing"
+              size="small"
+              :step="10"
+              @change="updateWatermarkConfig"
+              @keydown.native.stop
+            ></el-input-number>
           </div>
         </div>
       </template>
@@ -592,17 +648,25 @@
       <!-- 配置开启自由拖拽 -->
       <div class="row">
         <div class="rowItem">
-          <el-checkbox v-model="config.enableFreeDrag" @change="
+          <el-checkbox
+            v-model="config.enableFreeDrag"
+            @change="
               value => {
                 updateOtherConfig('enableFreeDrag', value)
               }
-            ">{{ $t('baseStyle.enableFreeDrag') }}</el-checkbox>
+            "
+            >{{ $t('baseStyle.enableFreeDrag') }}</el-checkbox
+          >
         </div>
       </div>
       <!-- 配置是否启用富文本编辑 -->
       <div class="row">
         <div class="rowItem">
-          <el-checkbox v-model="enableNodeRichText" @change="enableNodeRichTextChange">{{ $t('baseStyle.isEnableNodeRichText') }}</el-checkbox>
+          <el-checkbox
+            v-model="enableNodeRichText"
+            @change="enableNodeRichTextChange"
+            >{{ $t('baseStyle.isEnableNodeRichText') }}</el-checkbox
+          >
         </div>
       </div>
       <!-- 配置鼠标滚轮行为 -->
@@ -620,15 +684,23 @@
               }
             "
           >
-            <el-option :label="$t('baseStyle.zoomView') " value="zoom"></el-option>
+            <el-option
-            <el-option :label="$t('baseStyle.moveViewUpDown') " value="move"></el-option>
+              :label="$t('baseStyle.zoomView')"
+              value="zoom"
+            ></el-option>
+            <el-option
+              :label="$t('baseStyle.moveViewUpDown')"
+              value="move"
+            ></el-option>
           </el-select>
         </div>
       </div>
       <!-- 配置鼠标缩放行为 -->
       <div class="row" v-if="config.mousewheelAction === 'zoom'">
         <div class="rowItem">
-          <span class="name">{{ $t('baseStyle.mousewheelZoomActionReverse') }}</span>
+          <span class="name">{{
+            $t('baseStyle.mousewheelZoomActionReverse')
+          }}</span>
           <el-select
             size="mini"
             style="width: 120px"
@@ -640,8 +712,14 @@
               }
             "
           >
-            <el-option :label="$t('baseStyle.mousewheelZoomActionReverse1') " :value="false"></el-option>
+            <el-option
-            <el-option :label="$t('baseStyle.mousewheelZoomActionReverse2') " :value="true"></el-option>
+              :label="$t('baseStyle.mousewheelZoomActionReverse1')"
+              :value="false"
+            ></el-option>
+            <el-option
+              :label="$t('baseStyle.mousewheelZoomActionReverse2')"
+              :value="true"
+            ></el-option>
           </el-select>
         </div>
       </div>
@@ -652,7 +730,16 @@
 <script>
 import Sidebar from './Sidebar'
 import Color from './Color'
-import { lineWidthList, lineStyleList, backgroundRepeatList, backgroundPositionList, backgroundSizeList, fontFamilyList, fontSizeList, rootLineKeepSameInCurveList } from '@/config'
+import {
+  lineWidthList,
+  lineStyleList,
+  backgroundRepeatList,
+  backgroundPositionList,
+  backgroundSizeList,
+  fontFamilyList,
+  fontSizeList,
+  rootLineKeepSameInCurveList
+} from '@/config'
 import ImgUpload from '@/components/ImgUpload'
 import { storeConfig } from '@/api'
 import { mapState, mapMutations } from 'vuex'
@@ -740,20 +827,25 @@ export default {
       return lineStyleList[this.$i18n.locale] || lineStyleList.zh
     },
     rootLineKeepSameInCurveList() {
-      return rootLineKeepSameInCurveList[this.$i18n.locale] || rootLineKeepSameInCurveList.zh
+      return (
+        rootLineKeepSameInCurveList[this.$i18n.locale] ||
+        rootLineKeepSameInCurveList.zh
+      )
     },
     backgroundRepeatList() {
       return backgroundRepeatList[this.$i18n.locale] || backgroundRepeatList.zh
     },
     backgroundPositionList() {
-      return backgroundPositionList[this.$i18n.locale] || backgroundPositionList.zh
+      return (
+        backgroundPositionList[this.$i18n.locale] || backgroundPositionList.zh
+      )
     },
     backgroundSizeList() {
       return backgroundSizeList[this.$i18n.locale] || backgroundSizeList.zh
     },
     fontFamilyList() {
       return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
-    },
+    }
   },
   watch: {
     activeSidebar(val) {
@@ -767,7 +859,7 @@ export default {
       }
     }
   },
-  created () {
+  created() {
     this.enableNodeRichText = this.localConfig.openNodeRichText
     this.mousewheelAction = this.localConfig.mousewheelAction
     this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
@@ -817,7 +909,11 @@ export default {
 
     // 初始化其他配置
     initConfig() {
-      ;['enableFreeDrag', 'mousewheelAction', 'mousewheelZoomActionReverse'].forEach(key => {
+      ;[
+        'enableFreeDrag',
+        'mousewheelAction',
+        'mousewheelZoomActionReverse'
+      ].forEach(key => {
         this.config[key] = this.mindMap.getConfig(key)
       })
     },
@@ -825,7 +921,7 @@ export default {
     // 初始化水印配置
     initWatermark() {
       let config = this.mindMap.getConfig('watermarkConfig')
-      ;['text', 'lineSpacing', 'textSpacing', 'angle'].forEach((key) => {
+      ;['text', 'lineSpacing', 'textSpacing', 'angle'].forEach(key => {
         this.watermarkConfig[key] = config[key]
       })
       this.watermarkConfig.show = !!config.text
@@ -883,16 +979,18 @@ export default {
     updateWatermarkConfig() {
       clearTimeout(this.updateWatermarkTimer)
       this.updateWatermarkTimer = setTimeout(() => {
-        let {show, ...config} = this.watermarkConfig
+        let { show, ...config } = this.watermarkConfig
         this.mindMap.watermark.updateWatermark({
           ...config
         })
         this.data.config = this.data.config || {}
-        this.data.config.watermarkConfig = this.mindMap.getConfig('watermarkConfig')
+        this.data.config.watermarkConfig = this.mindMap.getConfig(
+          'watermarkConfig'
+        )
         storeConfig({
           config: this.data.config
         })
-      }, 300);
+      }, 300)
     },
 
     /**
@@ -918,7 +1016,8 @@ export default {
     // 切换显示水印与否
     watermarkShowChange(value) {
       if (value) {
-        let text = this.watermarkConfig.text || this.$t('baseStyle.watermarkDefaultText')
+        let text =
+          this.watermarkConfig.text || this.$t('baseStyle.watermarkDefaultText')
         this.watermarkConfig.text = text
       } else {
         this.watermarkConfig.text = ''
@@ -940,7 +1039,7 @@ export default {
         mousewheelAction: e
       })
       this.mindMap.updateConfig
-    },
+    }
   }
 }
 </script>
@@ -958,7 +1057,7 @@ export default {
     .row {
       .rowItem {
         .name {
-          color: hsla(0,0%,100%,.6);
+          color: hsla(0, 0%, 100%, 0.6);
         }
       }
     }

web/src/pages/Edit/components/Edit.vue

@@ -275,7 +275,8 @@ export default {
         ...(config || {}),
         iconList: icon,
         useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag,
-        customInnerElsAppendTo: null
+        customInnerElsAppendTo: null,
+        enableAutoEnterTextEditWhenKeydown: true,
         // isUseCustomNodeContent: true,
         // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西
         // customCreateNodeContent: (node) => {

web/src/pages/Edit/components/Export.vue

@@ -16,6 +16,7 @@
           style="width: 300px"
           v-model="fileName"
           size="mini"
+          @keydown.native.stop
         ></el-input>
         <el-checkbox
           v-show="['smm', 'json'].includes(exportType)"
@@ -34,6 +35,7 @@
           v-model="paddingX"
           size="mini"
           @change="onPaddingChange"
+          @keydown.native.stop
         ></el-input>
         <span class="name" style="margin-left: 10px;">{{
           $t('export.paddingY')
@@ -43,6 +45,7 @@
           v-model="paddingY"
           size="mini"
           @change="onPaddingChange"
+          @keydown.native.stop
         ></el-input>
         <el-checkbox
           v-show="['png'].includes(exportType)"

web/src/pages/Edit/components/NodeHyperlink.vue

@@ -12,11 +12,17 @@
         size="mini"
         placeholder="http://xxxx.com/"
         @keyup.native.stop
+        @keydown.native.stop
       ></el-input>
     </div>
     <div class="item">
       <span class="name">{{ $t('nodeHyperlink.name') }}</span>
-      <el-input v-model="linkTitle" size="mini" @keyup.native.stop></el-input>
+      <el-input
+        v-model="linkTitle"
+        size="mini"
+        @keyup.native.stop
+        @keydown.native.stop
+      ></el-input>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>

web/src/pages/Edit/components/NodeImage.vue

@@ -18,12 +18,13 @@
         v-model="imgUrl"
         size="mini"
         placeholder="http://xxx.com/xx.jpg"
+        @keydown.native.stop
       ></el-input>
     </div>
     <div class="title">可选</div>
     <div class="inputBox">
       <span class="label">{{ $t('nodeImage.imgTitle') }}</span>
-      <el-input v-model="imgTitle" size="mini"></el-input>
+      <el-input v-model="imgTitle" size="mini" @keydown.native.stop></el-input>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>

web/src/pages/Edit/components/NodeNote.vue

@@ -12,7 +12,7 @@
       v-model="note"
     >
     </el-input> -->
-    <div class="noteEditor" ref="noteEditor" @keyup.stop></div>
+    <div class="noteEditor" ref="noteEditor" @keyup.stop @keydown.stop></div>
     <!-- <div class="tip">换行请使用：Enter+Shift</div> -->
     <span slot="footer" class="dialog-footer">
       <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>

web/src/pages/Edit/components/NodeTag.vue

@@ -9,6 +9,7 @@
       v-model="tag"
       @keyup.native.enter="add"
       @keyup.native.stop
+      @keydown.native.stop
       :disabled="tagArr.length >= max"
       :placeholder="$t('nodeTag.addTip')"
     >

web/src/pages/Edit/components/Search.vue

@@ -14,6 +14,7 @@
         size="small"
         v-model="searchText"
         @keyup.native.enter.stop="onSearchNext"
+        @keydown.native.stop
       >
         <i slot="prefix" class="el-input__icon el-icon-search"></i>
         <el-button
@@ -35,6 +36,7 @@
       size="small"
       v-model="replaceText"
       style="margin: 12px 0;"
+      @keydown.native.stop
     >
       <i slot="prefix" class="el-input__icon el-icon-edit"></i>
       <el-button size="small" slot="append" @click="hideReplaceInput">{{