fix: 素材库表情添加问题修复

src/components/set/text-edit.vue

@@ -3,8 +3,8 @@
  * @version: 1.0.0
  * @Author: 无尘
  * @Date: 2020-04-14 09:50:16
- * @LastEditors: 无尘
- * @LastEditTime: 2020-05-21 09:42:57
+ * @LastEditors: Drama
+ * @LastEditTime: 2022-10-13 16:01:29
  -->
 <!--
   <text-edit :categoryId="categoryId" @closeText="closeText" @submitText="submitText"></text-edit>
@@ -19,11 +19,11 @@
         </el-form-item>
         <el-form-item label="内容" prop="materialContent">
           <div class="material-content">
-            <el-input show-word-limit placeholder="请输入内容" type="textarea" v-model="ruleForm.materialContent" maxlength="1000" class="w-440 welcomeContent"></el-input>
-            <el-popover placement="top" width="388" trigger="click">
+            <el-input id="inputContent" show-word-limit placeholder="请输入内容" type="textarea" v-model="ruleForm.materialContent" maxlength="1000" class="w-440 welcomeContent"></el-input>
+            <el-popover placement="top" width="388" trigger="click" @show="showPopover('inputContent')">
               <ul class="flex flex-wrap">
                 <li v-for="(item, index) in emojiList" :key="index + 'emoji'">
-                  <img :src="item.gifUrl" alt="" @click="selectEmoji(item)" />
+                  <img :src="item.gifUrl" alt="" @click.stop="selectEmoji(item)" />
                 </li>
               </ul>
               <img class="emoji-img cursor-pointer" slot="reference" src="https://pic01-10001430.image.myqcloud.com/b0d3c14f-69e7-4753-8fbc-3bffcff9f8ce" alt="" />
@@ -76,11 +76,18 @@ export default {
         materialTitle: [{ required: true, message: '请输入文本标题', trigger: 'blur' }],
         materialContent: [{ required: true, message: '请输入文本内容', trigger: 'blur' }]
       },
-      emojiList: emojiArr
+      emojiList: emojiArr,
+      ele: '' // dom元素id
     };
   },
   methods: {
     /**
+     * 获取dom
+     */
+    showPopover(id) {
+      this.ele = id;
+    },
+    /**
      * 输入内容
      **/
     handleInput($event) {
@@ -92,7 +99,22 @@ export default {
      **/
     selectEmoji(item) {
       const that = this;
-      const str = that.ruleForm.materialContent + item.key;
+      // const str = that.ruleForm.materialContent + item.key;
+
+      let textArea = document.getElementById(this.ele);
+      let startPos = textArea.selectionStart;
+      let endPos = textArea.selectionEnd;
+      if (startPos === undefined || endPos === undefined) return;
+      let currentTxt = textArea.value;
+      const str = currentTxt.substring(0, startPos) + item.key + currentTxt.substring(endPos);
+      // const str = that.ruleForm.materialContent + item.key;
+      textArea.value = str;
+      textArea.focus();
+      this.$nextTick(() => {
+        textArea.selectionStart = startPos + item.key.length;
+        textArea.selectionEnd = endPos + item.key.length;
+      });
+
       if (str.length > 1000) {
         this.$message('添加该表情后文本内容将超过字数限制，无法添加！');
       } else {