feat:添加@弹窗

dist/index.html

@@ -9,6 +9,7 @@
       .md_container {
         /* width: 600px !important; */
         margin: 40px auto;
+        margin-top: 600px;
       }
       body {
         /* background-color: #222226; */
@@ -85,7 +86,6 @@ void main()
           "## edswgdfgdfgdfg\n**dfgdfgdfg**\n_ergdfgdfg_\n> ergergdfg\n```\nwefgdfsfdgdf\n```\n- efwefsdfsdf\n\n\nsdgfdfgdfgdfg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg",
         value:
           "![img](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)",
-        value: "http://www.baidu.com",
         disabled: false,
         themeOptions: {
           dark: false,
@@ -94,9 +94,9 @@ void main()
           // textColorActive: "#000",
           codeTheme: "atom-one-dark"
         },
-        // height: 400,
-        rows: 6,
-        height: 40,
+        height: 300,
+        // rows: 'auto',
+        // height: 40,
         toolsOptions: {
           format: true,
           bold: true,
@@ -115,7 +115,6 @@ void main()
         zIndex: 7000,
         // maxLength: 20000,
         showWordLimit: true,
-        rows: "10",
         // height: "600",
 
         filePathRule: /^https:\/\/ss2\.bdstatic\.com/,
@@ -156,7 +155,10 @@ void main()
         },
         renderLinks: function(val, callback) {
           const newLinks = val.map(item => {
-            item.title = "接口返回的标题";
+            item.title =
+              "接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题";
+            item.img =
+              "https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg";
             item.desc =
               "接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述";
             return item;

src/assets/js/eventBus.js

-import Vue from "vue";
-let eventBus = new Vue();
-export default eventBus;

src/assets/style/global.less

@@ -44,10 +44,18 @@ textarea {
   opacity: 0;
 }
 
-// img {
-//   display: block;
-//   margin: 0;
-// }
+.slideup-fade-enter-active {
+  transition: all 0.3s ease;
+}
+.slideup-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slideup-fade-enter, .slideup-fade-leave-to
+/* .slide-fade-leave-active for below version 2.1.8 */ {
+  transform: translateY(40px);
+  opacity: 0;
+}
+
 
 .md_flex_card {
   display: flex;

src/components/content/components/link-card.vue

-<template>
-  <div class="md_link_card">
-    <div class="title">图像识别从入门到放弃</div>
-    <div class="desc">此文章来自</div>
-    <div class="link"></div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {};
-  }
-};
-</script>
-<style lang="less" scoped>
-.md_link_card {
-}
-</style>

src/components/content/components/select-user.vue

+<template>
+  <div
+    class="md_select_user"
+    :style="{ left: this.left + 'px', top: this.top + 'px' }"
+  >
+    选择用户弹窗
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    position: {
+      type: Object,
+      default: () => {
+        return {
+          left: 0,
+          top: 0
+        };
+      }
+    }
+  },
+  watch: {
+    position: {
+      immediate: true,
+      handler: function({ left, top }) {
+        this.left = left + 14;
+        this.top = top + 14;
+      }
+    }
+  },
+  data() {
+    return {
+      left: 0,
+      top: 0
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.md_select_user {
+  position: fixed;
+  width: 100px;
+  height: 200px;
+  background: #fff;
+  border: 1px solid red;
+}
+</style>

src/components/content/md-textarea.vue

@@ -12,6 +12,7 @@
       @keydown.meta.enter.exact="submit"
       @keydown.ctrl.enter.exact="submit"
       @keydown.tab.prevent="$emit('tab')"
+      @keyup="keyup"
       v-model="textContent"
       :placeholder="placeholder"
       :maxlength="maxLength"
@@ -35,6 +36,9 @@
         :showHelp.sync="showHelp"
       />
     </transition>
+    <transition name="slideup-fade">
+      <selectUser v-show="showSelectUser" :position="selectUserPosition" />
+    </transition>
   </div>
 </template>
 <script>
@@ -43,15 +47,16 @@ import {
   getPosition,
   getFilteredTags,
   getLinkTags,
+  formatText,
   addLanguageClass,
   throttle as throttleFn
 } from "@/assets/js/utils";
-import eventBus from "@/assets/js/eventBus";
 import marked from "marked";
+import selectUser from "./components/select-user";
 import helpDoc from "./components/help-doc";
 import DOMPurify from "dompurify";
 export default {
-  components: { helpDoc },
+  components: { helpDoc, selectUser },
   props: {
     id: {
       type: String,
@@ -121,7 +126,9 @@ export default {
     return {
       textContent: "",
       editorHeight: "auto",
-      editorOverFlow: "auto"
+      editorOverFlow: "auto",
+      showSelectUser: false,
+      selectUserPosition: { left: 0, top: 0 }
     };
   },
   created() {
@@ -213,26 +220,70 @@ export default {
 
       this.$emit("getFilteredTags", filteredTags);
       this.$emit("update:html", cleanHtml);
-      this.$emit("renderLinksHtml", { vDom, links });
+      if (links.length) this.$emit("renderLinksHtml", { vDom, links });
     },
     input() {
       this.$emit("update:textLength", this.textContent.length);
       this.emitText();
+      this.showSelectUser = false;
     },
-    reSizeTextareaHeight() {
+    keyup(e) {
+      if (e.key === "@") {
+        this.createSelectUserDialog();
+      }
+    },
+    createSelectUserDialog() {
+      const textEl = document.getElementById(this.id);
+      if (!textEl) return;
+      const height = getComputedStyle(textEl).getPropertyValue("height");
+      const width = getComputedStyle(textEl).getPropertyValue("width");
+      const scrollTop = textEl.scrollTop;
+      const originalText = this.textContent;
+      const cursorPoint = getPosition(this.id);
+      const selectionInfo = {
+        selectionStart: cursorPoint - 1,
+        selectionEnd: cursorPoint
+      };
+      const newText = formatText(
+        originalText,
+        selectionInfo,
+        "<span id='call_position'>",
+        "</span>"
+      );
+
+      const hideEl = this.createHideEl("clac_position_El_");
+      hideEl.style.position = "absolute";
+      hideEl.style.width = width;
+      hideEl.style.height = height;
+      hideEl.style.overflowY = "auto";
+      hideEl.style.wordBreak = "break-all";
+      hideEl.style.top = "14px";
+      hideEl.style.left = 0;
+      hideEl.style.whiteSpace = "pre-wrap";
+      hideEl.innerHTML = newText;
+      this.$nextTick(() => {
+        hideEl.scrollTop = scrollTop;
+        const pEl = document.getElementById("call_position");
+        this.selectUserPosition = {
+          left: pEl.getBoundingClientRect().left,
+          top: pEl.getBoundingClientRect().top
+        };
+        textEl.parentNode.removeChild(hideEl);
+        this.showSelectUser = true;
+      });
+    },
+    createHideEl(type) {
       const textEl = document.getElementById(this.id);
       if (!textEl) return;
       const fontSize = getComputedStyle(textEl).getPropertyValue("font-size");
       const lineHeight = getComputedStyle(textEl).getPropertyValue(
         "line-height"
       );
-
       const fontFamily = getComputedStyle(textEl).getPropertyValue(
         "font-family"
       );
-      const hideElId = "hdieEl" + this.id;
+      const hideElId = type + this.id;
       let hideEl = document.getElementById(hideElId);
-
       if (!hideEl) {
         hideEl = document.createElement("div");
         textEl.parentNode.appendChild(hideEl);
@@ -241,6 +292,14 @@ export default {
       hideEl.style.fontSize = fontSize;
       hideEl.style.lineHeight = lineHeight;
       hideEl.style.fontFamily = fontFamily;
+      return hideEl;
+    },
+    reSizeTextareaHeight() {
+      const textEl = document.getElementById(this.id);
+      if (!textEl) return;
+      const fontSize = getComputedStyle(textEl).getPropertyValue("font-size");
+
+      const hideEl = this.createHideEl("clac_height_El_");
       hideEl.innerText = this.textContent;
       const contentHeight = hideEl.offsetHeight;
       this.editorHeight = this.fullScreen
@@ -324,6 +383,8 @@ export default {
     color: var(--md-editor-text-color-active);
     height: var(--md-editor-height);
     resize: none;
+    font-size: 14px;
+    word-break: break-all;
     font-family: "Menlo", -apple-system, SF UI Text, Arial, PingFang SC,
       Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei,
       SimSun;

src/components/header/md-header.vue

@@ -360,12 +360,10 @@ export default {
         selectionEnd: ""
       });
       this.$nextTick(() => {
-        // setTimeout(() => {
         textEl.focus();
         textEl.setSelectionRange(cursorPoint + len, cursorPoint + len);
         textEl.scrollTop = scrollTop;
       });
-      // }, 0);
     }
   }
 };