feat: add @Someone function

README.md

@@ -22,6 +22,7 @@
 - [x] 开发webpack loader-将内联样式的px转换为rem
 - [ ] 艾特@功能
 - [ ] 抽出下拉上拉逻辑，重构pullRefresh组件
+- [ ] 目前暂时用v-html展示，考虑转义还是拆组件
 
 # 安装运行
 1. 拉取项目

src/assets/styles/common.scss

@@ -17,4 +17,13 @@
 
 .iconfont {
   font-size: 20px;
+}
+
+.emoji-icon {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  background: url('~@/assets/images/biaoqing.png');
+  background-size: 30px auto;
+  background-repeat: no-repeat;
 }

src/components/avatar/index.vue

@@ -2,11 +2,11 @@
  * @Description: 头像组件
  * @Author: astar
  * @Date: 2020-09-08 21:10:10
- * @LastEditTime: 2021-02-04 14:28:05
+ * @LastEditTime: 2021-04-01 17:07:53
  * @LastEditors: astar
 -->
 <template>
-  <span class="avatar-wrapper" :class="classes" :style="styles">
+  <span class="avatar-wrapper" :class="classes" :style="styles" v-press="press">
     <slot>
       <img :style="imgStyles" :src="src" :alt="alt" @error="error">
     </slot>
@@ -46,6 +46,9 @@ export default {
   methods: {
     error(e) {
       this.$emit('error', e)
+    },
+    press () {
+      this.$emit('press')
     }
   },
   computed: {

src/directives/index.js

@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2021-01-28 18:26:05
  * @LastEditors: astar
- * @LastEditTime: 2021-04-01 11:32:29
+ * @LastEditTime: 2021-04-01 14:31:49
  * @Description: 文件描述
  * @FilePath: \vue-chat\src\directives\index.js
  */
@@ -48,8 +48,8 @@ export const debounceDirective = (Vue) => {
 export const press = (Vue) => {
   Vue.directive('press', {
     bind: function (el, binding) {
-      if (!Array.isArray(binding.value)) return;
-      let [callback, delay = 650] = binding.value;
+      let delay = 650;
+      let callback = binding.value;
       let startTime = null;
       let timer = null;
       let startP = null;
@@ -66,7 +66,6 @@ export const press = (Vue) => {
       }
       if ('ontouchstart' in window) {
         el.addEventListener('touchstart', (event) => {
-          console.time()
           start(event);
           startP = event.touches[0];
         });

src/utils/editor.js

@@ -0,0 +1,65 @@
+/*
+ * @Author: astar
+ * @Date: 2021-04-01 16:02:08
+ * @LastEditors: astar
+ * @LastEditTime: 2021-04-01 18:37:07
+ * @Description: 文件描述
+ * @FilePath: \vue-chat\src\utils\editor.js
+ */
+export const KINDS = {
+  TEXT: 'TEXT',
+  AT: 'AT',
+  EMOJI: 'EMOJI'
+}
+export const EMOJIS = [
+  '呵呵', '哈哈', '吐舌', '啊', '酷', '怒', '开心', '汗', '泪', '黑线',
+  '鄙视', '不高兴', '真棒', '钱', '疑问', '阴险', '吐', '咦', '委屈', '花心',
+  '呼', '笑眼', '冷', '太开心', '滑稽', '勉强', '狂汗', '乖', '睡觉', '惊哭',
+  '升起', '惊讶', '喷', '爱心', '心碎', '玫瑰', '礼物', '星星月亮', '太阳', '音乐',
+  '灯泡', '蛋糕', '彩虹', '钱币', '咖啡', 'haha', '胜利', '大拇指', '弱', 'ok',
+]
+/**
+ * 将json解析为html
+ * @author astar
+ * @date 2021-04-01 16:02
+ * @param {Object} data - 包含kind和value属性值
+ * @returns {DOM String}
+ */
+export function getHTMLFromJSON (data) {
+  switch (data.kind) {
+    // case KINDS.TEXT:
+    //   return `<span contenteditable="false">${data.value}</span>`;
+    case KINDS.AT:
+      return `<span data-kind="${KINDS.AT}" data-value="${data.value}" contenteditable="false">@${data.value} </span>`;
+    case KINDS.EMOJI:
+      return `<i class="emoji-icon" data-kind="${KINDS.EMOJI}" data-value="${data.value}" contenteditable="false" style="background-position: left 0 top ${EMOJIS.indexOf(data.value) * 100 / (EMOJIS.length - 1)}%"></i>`;
+    default:
+      return null;
+  }
+}
+
+/**
+ * 将HTML转换为JSON格式数据
+ * @author astar
+ * @date 2021-02-02 18:02
+ */
+export function getJSONFromInput ($ele) {
+  const $children = $ele.childNodes
+  let result = []
+  $children.forEach(child => {
+    let nodeType = child.nodeType
+    if (nodeType === 3 && child.textContent) { // 普通文本
+      result.push({
+        kind: KINDS.TEXT,
+        value: child.textContent // 还需转义,到时候再说吧
+      })
+    } else if (nodeType === 1) { // 元素节点, 目前只有emoji类型，后期考虑其他
+      let options = child.dataset
+      result.push({
+        kind: options.kind,
+        value: options.value
+      })
+    }
+  })
+  return result
+}

src/views/chat/components/emojiPopup/index.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Author: astar
+ * @Date: 2021-01-30 14:59:41
+ * @LastEditors: astar
+ * @LastEditTime: 2021-04-01 18:07:26
+ * @Description: 表情包popup
+ * @FilePath: \vue-chat\src\views\chat\components\emojiPopup\index.vue
+-->
+<template>
+<div class="expression" @click="selectExpression" v-html="renderEMOJIS()">
+</div>
+</template>
+<script>
+import { EMOJIS, getHTMLFromJSON, KINDS } from '@/utils/editor.js'
+
+export default {
+  data () {
+    return {
+      EMOJIS
+    }
+  },
+  props: {
+    onSelectExpression: {
+      required: true,
+      type: Function
+    }
+  },
+  methods: {
+    getHTMLFromJSON,
+    renderEMOJIS () {
+      return this.EMOJIS.map(item => {
+        return getHTMLFromJSON({ kind: KINDS.EMOJI, value: item })
+      }).join('')
+    },
+    selectExpression ({ target }) {
+      if (target.dataset.kind === KINDS.EMOJI) {
+        this.onSelectExpression({ kind: KINDS.EMOJI, value: target.dataset.value })
+      }
+    }
+  }
+}
+</script>