2019-10-29 Vue-简单的表情组件

开发一个简单的表情插件组件，其包含三个部分：表情图像的json格式对象、表情面板组成样式和点击表情插入文本内容中

首先，定义表情对象包括src和title的JSON格式

表情对象为一个对象数组集合文件face.json

[
   {
     "src": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png",
     "title": "[微笑]"
   },
   {
     "src": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/09/2018new_keai_org.png",
     "title": "[可爱]"
   },
   {
     "src": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/1e/2018new_taikaixin_org.png",
     "title": "[太开心]"
   },
   {
     "src": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/2018new_guzhang_org.png",
     "title": "[鼓掌]"
   }
   ......
]

然后，定义表情组件样式文件index.vue，与face.json在同一目录下

定义表情图片的样式

<div class="scroll-wrapper" @touchmove.prevent ref="faceContent">
  <ul>
    <li v-for="(item, index) in faces" :key="index">
      <img
        @click="onFaceClick(`[${item.title}]`)"
        :title="item.title"
        :src="item.src"
        width="25"
        height="25"
      />
    </li>
  </ul>
</div>

import faceJSON from "./face.json";
export default {
  data: () => ({
    faceData: faceJSON
  }),
  computed: {
    faces: function() {
      const list = this.faceData.faceList;
      return list;
    }
  },
  methods: {
    onFaceClick(face) {
      this.$emit("onFaceChoose", face);
    }
  }
};

ul li {
  padding: 2px;
  list-style-type: none;
  display: inline-block;
  img {
    cursor: pointer;
  }
}

最后，在需要的文本框中插入选中的表情

 <el-input
   id="emojiInput"
   type="textarea"
   :autosize="{ minRows: 6, maxRows: 10}"
   v-model="formData.content"
   placeholder="请输入内容..."
 ></el-input>
 <div class="emoji-input">
   <div>
     <span
       class="emotionOpenner"
       v-if="!showFacePanel"
       @click="showFacePanel = true"
     >展开表情</span>
     <span class="emotionOpenner" v-else @click="handleKeyboardClick">收起表情</span>
   </div>
   <!--表情控件-->
   <emoji-input-method @onFaceChoose="handleFaceChoose" v-if="showFacePanel"></emoji-input-method>
 </div>

选中插入文本框

// 表情组件方法
handleFaceChoose(face) {
  var elInput = document.getElementById("emojiInput");
  var startPos = elInput.selectionStart;
  var endPos = elInput.selectionEnd;
  if (startPos === undefined || endPos === undefined) return;
  var txt = elInput.value;
  var result = txt.substring(0, startPos) + face + txt.substring(endPos);
  elInput.value = result;
  // 重新定义光标位置
  elInput.focus();
  elInput.selectionStart = startPos + face.length;
  elInput.selectionEnd = startPos + face.length;
  this.formData.content = result;
},
handleKeyboardClick() {
  this.showFacePanel = false;
}

至此，一个简单的表情组件宣告完成