update

packages/qjkankan-editor/public/static/template/customTooltip.xml

@@ -337,7 +337,8 @@
             pos == 'top',
             add(all,lheight,hheight);
             div(dpy,all,2); 
-            add(lastPy,dpy,10);
+            add(lastPy,dpy,5);
+            trace('dpy::',dpy);
             mul(lastPy, -1);
             set(layer[get(posName)].align,center);
             set(layer[get(posName)].y,get(lastPy));
@@ -347,7 +348,7 @@
             pos == 'bottom',
             add(all,lheight,hheight);
             div(dpy,all,2); 
-            add(lastPy,dpy,10);
+            add(lastPy,dpy,5);
             mul(lastPy, 1);
             set(layer[get(posName)].align,center);
             set(layer[get(posName)].y,get(lastPy));

packages/qjkankan-editor/src/views/hotspot/hotspotIconType/personalized_tag.vue

@@ -11,14 +11,17 @@
     <div class="svg-wrapper"></div>
 
     <div class="remark-highlight">{{ $i18n.t("hotspot.hotspot_title") }}</div>
-    <div class="title-input-wrapper">
-      <input
-        v-model.trim="hotspot.hotspotTitle"
-        type="text"
-        maxlength="15"
+    <div class="title-input-wrapper has-textarea">
+      <Input
+        ref="titleTextarea"
+        class="titleTextarea"
+        v-model="hotspot.hotspotTitle"
+        type="textarea"
+        maxlength="50"
+        :autosize="{ minRows: 3}"
         :placeholder="$i18n.t('hotspot.title_placeholder')"
       />
-      <span class="count">{{ hotspot.hotspotTitle.length }}/15</span>
+      <span class="count">{{ hotspot.hotspotTitle.length }}/50</span>
     </div>
 
     <div class="remark">{{ $i18n.t("hotspot.hotspot_title") }}</div>
@@ -117,7 +120,7 @@
 <script>
 import { mapGetters } from "vuex";
 import * as d3 from "d3";
-import { ColorPicker } from "element-ui";
+import { ColorPicker, Input } from "element-ui";
 import Switcher from "@/components/shared/Switcher.vue";
 import TabbarSwitcherIcon from "@/components/shared/TabbarSwitcherIcon.vue";
 
@@ -126,6 +129,7 @@ export default {
     Switcher,
     ColorPicker,
     TabbarSwitcherIcon,
+    Input,
   },
   data() {
     return {
@@ -316,7 +320,7 @@ export default {
     selectLineClick(id) {
       setTimeout(() => {
         if (this.svgNode) {
-          console.log("id",  id);
+          console.log("id", id);
           const selectNode = this.svgNode
             .selectAll("rect.endpoint-for-click")
             .filter((d) => {
@@ -327,7 +331,13 @@ export default {
         }
       }, 300);
     },
+    handleTextareaHeight() {
+      let element = this.$refs["titleTextarea"];
+      element.style.height = "18px";
+      element.style.height = element.scrollHeight + "px";
+    },
   },
+
   mounted() {
     this.svgNode = d3
       .select(".svg-wrapper")
@@ -488,7 +498,7 @@ export default {
   > .title-input-wrapper {
     position: relative;
     border: 1px solid rgba(151, 151, 151, 0.2);
-    padding: 0 16px;
+    padding: 5px 0;
     background: #1a1b1d;
     border-radius: 2px;
     height: 36px;
@@ -497,7 +507,8 @@ export default {
     &:focus-within {
       border-color: #0076f6;
     }
-    > input {
+    > input,
+    textarea {
       border: none;
       background: transparent;
       outline: none;
@@ -508,11 +519,16 @@ export default {
       letter-spacing: 1px;
       font-size: 14px;
     }
+    &.has-textarea {
+      min-height: 72px;
+      height: auto;
+      position: relative;
+    }
     > .count {
       position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 16px;
+      bottom: 10px;
+      // transform: translateY(-50%);
+      right: 10px;
       font-size: 14px;
       color: rgba(255, 255, 255, 0.2);
     }
@@ -586,3 +602,12 @@ export default {
   }
 }
 </style>
+<style lang="less">
+.title-input-wrapper {
+  .el-textarea__inner {
+    background-color: transparent;
+    color: white;
+    border: none;
+  }
+}
+</style>