使用Vux WechatEmotion组件引发的一系列血案

最近公司在做手机端项目，我也有荣幸使用了Vue做SPA项目，然后找相关WeUI相关的框架，然后发现了Vux，感觉Vux非常优秀(不包括作者把我禁言一事，反正我也跑到她主页骂了她不过她还不知道)，于是开始使用Vue+Vux整合SPA项目，做的过程中遇到一个表情包问题，就是使用Vux的WechatEmotion组件的时候，发现这个组件只是简单的提供了一系列的图片展示，并没有和他的X-Textarea组件结合到一起，于是我自己把他们俩个结合到一起的例子，做得过程中遇到好多坑。

WechatEmotion.vue

<template>
  <section class="wechatEmotion-container">
    <ul class="emotion-list">
      <li v-for="item in list" class="vux-center-h emotion-list-item" @click.stop="addEmotion(item)">
        <emotion is-gif>{{item}}</emotion>
      </li>
    </ul>
  </section>
</template>
<script>
  import { WechatEmotion as Emotion } from 'vux'
  export default{
    components: {
      Emotion
    },
    methods:{
      addEmotion(emotion){
          this.$emit('emotion-click',emotion)
      }
    },
    data () {
      return {
        list: ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
      }
    }
  }
</script>
<style lang="less">
  .wechatEmotion-container{
    background: rgba(238, 238, 238, 0.5);
    .emotion-list{
      width: 100%;
      padding: 10px 5px;
      display: flex;
      flex-wrap: wrap;
      height: 175px;
      overflow-y: auto;
      box-sizing: border-box;
      .emotion-list-item{
        list-style: none;
        float: left;
        width: 14.285714%;
        padding: 5px 0;
        text-align: center;
      }
    }
  }

</style>

父组件代码：

 <popup v-model="popup.comment.show">
      <div class="comment-popup">
        <group>
          <x-textarea class="textarea"
                      v-model.trim="textarea.value"
                      rows="4"
                      :max="200"
                      :placeholder="textarea.placeholder"
                      :show-counter="false"
                      @on-focus="hideEmotion"
                      @on-blur="textareaPosition"></x-textarea>
          <div class="face-outer">
            <img src="../assets/imgs/qzzb_bq.png" alt="" @click.stop="showEmotion">
            <x-button mini plain type="primary" class="noborder" @click.native="publishComment">发表评论</x-button>
          </div>
          <wechat-emotion v-if="emotion.show" @emotion-click="addEmotionToTextArea"></wechat-emotion>
        </group>
      </div>
    </popup>

把emotion表情添加到textarea过程中，因为不能在textarea中添加图片，所以选择使用[文本]这样代替原本的表情图片，这样保存到数据库中，显示的时候从数据库中取出这个文本，然后替换 成表情图片，这里会用到正则表达式，如下：

content = content.replace(/\[[\u4E00-\u9FA5]{1,3}\]/gi,function(word){
                let newWord = word.replace(/\[|\]/gi,'');
                let index = that.emotion.list.indexOf(newWord);
                return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
              });

替换成功后，在vue的template展示的时候不成功，因为显示成"<img>"这样的文本字符串了，那么如何解决这个问题呢，可以使用v-html这个命令，如下：

<p v-html="comment.content">{{comment.content}}</p>

这样就可以正常显示了，如图：

总结：

1. 把图片转换成[文本]形式保存到数据库中
2. 从数据库取出[文本]数据，通过正则表达式替换成表情图片
3. 通过使用Vue v-html指令显示emotion图片，否则显示的是文本数据
4. 图片要通过设置img{vertical-align:middle;}才能对齐

引用

使用vertical-align实现input和img对齐
Vue展示纯Html
Html之Img_图片和文本对齐_图像链接方法_实例
Array MDN

issuse 有问题可以在我建的群里问我：464696550