fix: use tag-i instead of tag-img to show expressions as tag-img with…

…out src will show a default border
hello-astar · Apr 1, 2021 · e0b4253 · e0b4253
1 parent 340d516
commit e0b4253
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -19,9 +19,9 @@
 - [x] 同端登录互踢
 - [x] 表情包功能
 - [ ] change log
-- [ ] 抽出layout，使用qiankun重构，以支持不同应用展示
 - [x] 开发webpack loader-将内联样式的px转换为rem
 - [ ] 艾特@功能
+- [ ] 抽出下拉上拉逻辑，重构pullRefresh组件
 
 # 安装运行
 1. 拉取项目

diff --git a/src/views/chat/components/expression/expressionItem.vue b/src/views/chat/components/expression/expressionItem.vue
@@ -2,15 +2,17 @@
  * @Author: astar
  * @Date: 2021-03-04 10:11:57
  * @LastEditors: astar
- * @LastEditTime: 2021-03-04 10:30:35
+ * @LastEditTime: 2021-04-01 14:48:05
  * @Description: 单个表情渲染
  * @FilePath: \vue-chat\src\views\chat\components\expression\expressionItem.vue
 -->
 <template>
-  <span
+  <i
+    contenteditable="false"
     class="emoji-icon"
+    :data-name="iconName"
     :style="{ 'background-position': `0 ${-30 * index}px` }"
-  ></span>
+  ></i>
 </template>
 <script>
 import expressions from './config.js';
@@ -24,6 +26,9 @@ export default {
   computed: {
     index () {
       return expressions.findIndex(item => item === this.value)
+    },
+    iconName () {
+      return `emoji-${this.value}`
     }
   }
 }

diff --git a/src/views/chat/components/expression/index.vue b/src/views/chat/components/expression/index.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: astar
  * @Date: 2021-01-30 14:59:41
- * @LastEditors: astar
- * @LastEditTime: 2021-03-04 10:28:21
+ * @LastEditors: cmx
+ * @LastEditTime: 2021-04-01 14:52:30
  * @Description: 表情包popup
  * @FilePath: \vue-chat\src\views\chat\components\expression\index.vue
 -->
@@ -12,7 +12,6 @@
     v-for="(item, index) in expressions"
     :key="index"
     :value="item"
-    :data-index="index"
   ></expression-item>
 </div>
 </template>
@@ -34,11 +33,8 @@ export default {
   },
   methods: {
     selectExpression ({ target }) {
-      if (target.nodeName.toLowerCase() === 'span') {
-        const index = target.dataset.index
-        if (this.expressions[index]) {
-          this.onSelectExpression(`<img name="emoji-${this.expressions[index]}" class="emoji-icon" style="background-position: 0 ${-30 * index}px"/>`)
-        }
+      if (target.nodeName.toLowerCase() === 'i' && target.dataset.name) {
+        this.onSelectExpression(target.outerHTML)
       }
     }
   },

diff --git a/src/views/chat/components/inputBox.vue b/src/views/chat/components/inputBox.vue
@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2021-01-30 15:21:05
  * @LastEditors: astar
- * @LastEditTime: 2021-03-27 23:01:41
+ * @LastEditTime: 2021-04-01 14:50:21
  * @Description: 聊天输入框
  * @FilePath: \vue-chat\src\views\chat\components\inputBox.vue
 -->
@@ -159,12 +159,12 @@ export default {
           })
           console.log(child.textContent)
         } else if (nodeType === 1) { // 元素节点, 目前只有emoji类型，后期考虑其他
-          if ((new RegExp(/^emoji-.*/)).test(child.name)) {
+          if ((new RegExp(/^emoji-.*/)).test(child.dataset.name)) {
             result.push({
               kind: 'emoji',
-              value: child.name.replace(/^emoji-/, '')
+              value: child.dataset.name.replace(/^emoji-/, '')
             })
-            console.log(child.name)
+            console.log(child.dataset.name)
           }
         }
       })