优化评论组件

src/components/AutoInput.vue

@@ -3,7 +3,8 @@
        :placeholder="placeholder"
        class="auto-input"
        contenteditable
-       @input="changeText">{{ innerText }}
+       @input="changeText">
+    {{ modelValue }}
   </div>
 </template>
 
@@ -20,10 +21,9 @@ export default {
   mounted() {
     // this.$refs.input.setAttribute("placeholder", "改变")
   },
+  computed: {},
   data: function () {
-    return {
-      innerText: this.modelValue,
-    }
+    return {}
   },
   methods: {
     changeText(e) {

src/components/Comment.vue

@@ -65,7 +65,7 @@
 
       <div class="input-toolbar">
         <div class="call-friend">
-          <div class="friend" v-for="item in friends" @click="item.select = !item.select">
+          <div class="friend" v-for="item in friends" @click="toggleCall(item)">
             <img :style="item.select?'opacity: .5;':''" class="avatar" :src="item.avatar" alt="">
             <span>{{ item.name }}</span>
             <img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
@@ -73,13 +73,13 @@
         </div>
         <div class="toolbar">
           <div class="input-wrapper">
-            <AutoInput v-model="commit"></AutoInput>
+            <AutoInput v-model="comment"></AutoInput>
             <div class="right">
               <img src="../assets/img/icon/message/call.png" alt="" class="camera">
               <img src="../assets/img/icon/message/emoji-black.png" alt="">
             </div>
           </div>
-          <img v-if="commit" src="../assets/img/icon/message/up.png" alt="">
+          <img v-if="comment" src="../assets/img/icon/message/up.png" alt="">
         </div>
       </div>
       <ConfirmDialog
@@ -109,7 +109,7 @@ export default {
   },
   data() {
     return {
-      commit: '',
+      comment: '123',
       comments: [
         {
           id: '1',
@@ -202,10 +202,20 @@ export default {
       ],
       selectRow: {},
       showPrivateChat: false,
-      isInput: true
+      isInput: true,
+      isCall: true,
     }
   },
   methods: {
+    toggleCall(item) {
+      item.select = !item.select
+      let name = item.name
+      if (this.comment.includes('@' + name)) {
+        this.comment = this.comment.replace(`@${name} `, '')
+      } else {
+        this.comment += `@${name} `
+      }
+    },
     loved(row) {
       if (row.isLoved) {
         row.loveNum--

src/pages/Test2.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="Test">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">申报学校信息</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div ref="input"
+           class="auto-input"
+           contenteditable
+           @input="changeText">
+        <span contenteditable="false" class="link">test</span>
+        <img src="../assets/img/icon/message/emoji/4.webp" class="emoji">
+        <img src="../assets/img/icon/message/emoji/2.webp" class="emoji">
+        {{ comment }}
+        <img src="../assets/img/icon/message/emoji/3.webp" class="emoji">
+      </div>
+
+      <b-button class="mt1r" @click="call">@</b-button>
+      <b-button class="mt1r" @click="emoji">emoji</b-button>
+      <b-button class="mt1r" @click="get">get</b-button>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "Test",
+  props: {},
+  data() {
+    return {
+      comment: '12'
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    changeText(e) {
+      console.log(e)
+      console.log(this.$el.innerText)
+
+    },
+    get() {
+     console.log( this.$refs.input)
+
+    },
+    call() {
+      let span = document.createElement('span')
+      span.setAttribute('contenteditable', false)
+      span.classList.add('link')
+      span.innerText = Date.now() + ' '
+      this.$refs.input.append(span)
+    },
+    emoji() {
+      let span = document.createElement('img')
+      span.setAttribute('src', require('../assets/img/icon/message/emoji/4.webp'))
+      span.classList.add('emoji')
+      this.$refs.input.append(span)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../assets/scss/index";
+
+.Test {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: #fff;
+  overflow: auto;
+  font-size: 2rem;
+  @emoji-width: 4rem;
+
+  .emoji {
+    width: @emoji-width;
+    height: @emoji-width;
+  }
+
+  .content {
+    padding-top: 6rem;
+
+
+    .auto-input {
+      width: 100%;
+      overflow-y: scroll;
+      padding: 0 .5rem;
+      outline: none;
+    }
+
+    .auto-input::-webkit-scrollbar {
+      width: 0 !important
+    }
+
+    .auto-input:empty::before {
+      /*content: "留下你的精彩评论吧";*/
+      content: attr(placeholder);
+      color: #999999;
+    }
+
+    .auto-input:focus::before {
+      content: none;
+    }
+  }
+}
+</style>

src/pages/Test3.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="Test">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">申报学校信息</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div ref="input"
+           class="auto-input"
+           contenteditable
+           @input="changeText">
+        <span contenteditable="false" class="link">test</span>
+        <img src="../assets/img/icon/message/emoji/4.webp" class="emoji">
+        <img src="../assets/img/icon/message/emoji/2.webp" class="emoji">
+        {{ comment }}
+        <img src="../assets/img/icon/message/emoji/3.webp" class="emoji">
+      </div>
+
+      <b-button class="mt1r" @click="call">@</b-button>
+      <b-button class="mt1r" @click="emoji">emoji</b-button>
+      <b-button class="mt1r" @click="get">get</b-button>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "Test",
+  props: {},
+  data() {
+    return {
+      comment: '12'
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    changeText(e) {
+      console.log(e)
+      console.log(this.$el.innerText)
+
+    },
+    get() {
+     console.log( this.$refs.input)
+
+    },
+    call() {
+      let span = document.createElement('span')
+      span.setAttribute('contenteditable', false)
+      span.classList.add('link')
+      span.innerText = Date.now() + ' '
+      this.$refs.input.append(span)
+    },
+    emoji() {
+      let span = document.createElement('img')
+      span.setAttribute('src', require('../assets/img/icon/message/emoji/4.webp'))
+      span.classList.add('emoji')
+      this.$refs.input.append(span)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../assets/scss/index";
+
+.Test {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: #fff;
+  overflow: auto;
+  font-size: 2rem;
+  @emoji-width: 4rem;
+
+  .emoji {
+    width: @emoji-width;
+    height: @emoji-width;
+  }
+
+  .content {
+    padding-top: 6rem;
+
+
+    .auto-input {
+      width: 100%;
+      overflow-y: scroll;
+      padding: 0 .5rem;
+      outline: none;
+    }
+
+    .auto-input::-webkit-scrollbar {
+      width: 0 !important
+    }
+
+    .auto-input:empty::before {
+      /*content: "留下你的精彩评论吧";*/
+      content: attr(placeholder);
+      color: #999999;
+    }
+
+    .auto-input:focus::before {
+      content: none;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -41,12 +41,16 @@ import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
 import Help from "../pages/login/Help";
 import Test from "../pages/Test";
+import Test2 from "../pages/Test2";
+import Test3 from "../pages/Test3";
 
 const routes = [
   // {path: '', component: Music},
   // {path: '/', component: Index},
   {path: '/', component: Index2},
   {path: '/test', component: Test},
+  {path: '/test2', component: Test2},
+  {path: '/test3', component: Test3},
   {path: '/home', component: Index},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},