基于vue2.x实现的即时通讯程序仿微信聊天8开发聊天页面表情包静态页面以及引入表情包实现表情包信息发送

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

image.png

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

image.png

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

methods:{
  showEmo() {
      
    }
}

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

 
      
        

          

            
          
          

            
            
          
          
        
        

          

            

              
            
          
          
          

            清空
            发送
          
        
      

• 下面是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

• index.vue

• 然后在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 ``
    },
}

• 然后修改模版渲染方式

image.png

• 这样就实现了

image.png

• 最后修改下 样式

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