基于vue2.x实现的即时通讯程序仿微信聊天8开发聊天页面表情包

这节课来实现 点击 底部 【笑脸】弹出选择表情包界面的静态页面布局，如下图

image.png

• 找到【笑脸】，给他的父级元素绑定一个点击事件@click="showEmo"

image.png

• 然后在methods里映射这个方法

methods:{
  showEmo() {
      
    }
}

• 利用vant组件库的popup组件来实现，下面是dom元素

 <!-- popup 表情包 -->
      <van-popup v-model="show" position="bottom" style="height: 30%">
        <div class="Emoinput">
          <div class="left">
            <van-icon name="http://erkong.ybc365.com/5f28d202201141346467740.png" size="25"></van-icon>
          </div>
          <div class="right">
            <van-search v-model="value" placeholder="请输入要发送的消息">
            <template #left-icon>
              <van-icon name=""></van-icon>
            </template>
          </van-search>
          </div>
        </div>
        <div class="emobox">
          <ul>
            <li v-for="(item, index) in 28" :key="index">
              <img src="http://yyds.it98k.cn/images/1.gif" alt="" />
            </li>
          </ul>
          <!-- 发送按钮 -->
          <div class="sendBtn">
            <van-button icon="arrow-left" style="margin-right: 15px;" type="primary" size="small">清空</van-button>
            <van-button type="primary" size="small">发送</van-button>
          </div>
        </div>
      </van-popup>

• 下面是css

.emobox {
    height: calc(100% - 100px);
    padding: 12px;
    box-sizing: border-box;
    overflow: auto;
    ul {
      display: flex;
      flex-wrap: wrap;

      li {
        width: 90px;
        height: 90px;
        margin-right: 50px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .sendBtn {
      position: fixed;
      right: 20px;
      bottom: 0px;
      background: white;
      display: flex;
      align-items: center;
      padding: 20px 0px 20px 65px;
      border-radius: 10px;
    }
  }
  .Emoinput {
    display: flex;
    align-items: center;
    padding: 0 20px;
    .right{
      flex: 1;
      ::v-deep .van-search{
       width: 100%;
      }
    }
  }

• 记得在data中定义show默认为false

daa:{
  return{
    show:false
  }
}

• 然后在点击方法showEmo里，点击将show这个变量设置为true

methods:{
  showEmo() {
      this.show = true
    }
}

• 最终实现该静态页面，但是要记得，使用到的vant组件要在plugins/vant.js内注册

image.png

• 下面在实现把 【所有表情包】引入过来

• 新建组件Emotion
• 在components文件夹下新建 Emotion文件夹，里面新建Emotion.vue和index.vue

• Emotion.vue

<template>
  <div class="ly-emotion">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ly-emotion',
  mounted() {
    const name = this.$el.innerHTML
    const list = [
      '大笑',
      '炫耀',
      '倒霉',
      '跳舞',
      '钉钉子',
      '委屈',
      '失落',
      '得意',
      '冲',
      '乌鸦',
      '石化了',
      '忙死了',
      '爱你',
      '啊喂',
      '热化了',
      '蜗牛',
      '冷',
      '凄凉',
      '有点热',
      '吃饱了',
      '哼',
      '打一架',
      '飞吻',
      '冷汗',
      '猪头',
      '拜拜',
      '乌鸦',
      '再见',
      '潇洒',
      '酷',
      'emo',
      '干杯',
      '跳舞',
      '委屈',
      '酷',
      '大笑'
    ]
    // console.log(name);
    let index = list.indexOf(name)
    // let imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">`
    let imgHTML = `<img src="https://qiniu.it98k.cn/mhxy/${index+1}.gif">`
    this.$nextTick(() => {
      this.$el.innerHTML = imgHTML
    })
  }
}
</script>
<style scoped>

</style>

• index.vue

<template>
    <div class="emotion-box" :style="{ height: height  }">
      <div class="emotion-box-line" v-for="(line, i) in list" :key="i">
        <emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)">{{
          item
        }}</emotion>
      </div>
    </div>
</template>

<script>
import Emotion from './Emotion'
export default {
  props: {
    height: {
      
    }
  },
  data() {
    return {
      list: [
        ['大笑', '炫耀', '倒霉', '跳舞'],
        ['钉钉子', '委屈', '失落', '得意'],
        ['冲', '乌鸦', '石化了', '忙死了'],
        ['爱你', '啊喂', '热化了', '蜗牛'],
        ['冷', '凄凉', '有点热', '吃饱了'],
        ['哼', '打一架', '飞吻', '冷汗'],
        ['猪头', '拜拜', '乌鸦', '再见'],
        ['潇洒', '酷', 'emo', '干杯'],
        ['跳舞', '委屈', '酷','大笑']
      ]
    }
  },
  methods: {
    clickHandler(i) {
      let emotion = `#${i};`
      this.$emit('emotion', emotion)
    }
  },
  components: {
    Emotion
  }
}
</script>
<style scoped lang="scss">
.emotion-box {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
}
.emotion-box-line {
  display: flex;
  justify-content: space-around;
  ::v-deep img {
    width: 100px;
    height: 100px;
    object-fit: contain;
  }
}
</style>

• 然后在chatDetail聊天页面引入Emotion组件

import Emotion from '@/components/Emotion';

• 注册一下

 components: {Emotion },

• 然后使用这个组件 ，并在methods里映射自定义事件

image.png

• methods

handleEmotion(i) {
      this.value += i
 },

• 这样就实现了表情包的引入

image.png

• 下面给发送按钮直接调用send方法

image.png

• 再给send方法里，设置this.show = false，在发送表情包后，隐藏弹窗

image.png

• 可以看到，发送出去的是表情包的标识，我们可以使用 正则表达式 来匹配 标识 映射 img图片
• 现在methods里定义一个方法

methods:{
   // 将匹配结果替换表情图片
    emotion(res) {
      let word = res.replace(/\#|\;/gi, '')
      const list = [
       '大笑',
      '炫耀',
      '倒霉',
      '跳舞',
      '钉钉子',
      '委屈',
      '失落',
      '得意',
      '冲',
      '乌鸦',
      '石化了',
      '忙死了',
      '爱你',
      '啊喂',
      '热化了',
      '蜗牛',
      '冷',
      '凄凉',
      '有点热',
      '吃饱了',
      '哼',
      '打一架',
      '飞吻',
      '冷汗',
      '猪头',
      '拜拜',
      '乌鸦',
      '再见',
      '潇洒',
      '酷',
      'emo',
      '干杯',
      '跳舞',
      '委屈',
      '酷',
      '大笑'
      ]
      let index = list.indexOf(word)
      return `<img src="https://qiniu.it98k.cn/mhxy/${index + 1}.gif" align="middle">`
    },
}

• 然后修改模版渲染方式

image.png

 <div class="content">
            <p v-html="item.message.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p>
          </div>

• 这样就实现了

image.png

• 最后修改下 样式

.content{
      p{
        display: flex;
        align-items: center;
      }
      ::v-deep   img{
         width: 120px;
         height: 120px;
          object-fit: contain;
        }
    }