这节课来实现 点击 底部 【笑脸】弹出选择表情包界面的静态页面布局，如下图
- 找到【笑脸】，给他的父级元素绑定一个点击事件
@click="showEmo"
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>
.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%;
}
}
}
daa:{
return{
show:false
}
}
- 然后在点击方法
showEmo里，点击将show这个变量设置为true
methods:{
showEmo() {
this.show = true
}
}
-
最终实现该静态页面，但是要记得，使用到的vant组件要在plugins/vant.js内注册
-
下面在实现把 【所有表情包】引入过来
- 新建组件
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>
<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里映射自定义事件
handleEmotion(i) {
this.value += i
},
- 再给
send方法里，设置this.show = false，在发送表情包后，隐藏弹窗
- 可以看到，发送出去的是表情包的标识，我们可以使用 正则表达式 来匹配 标识 映射 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">`
},
}
<div class="content">
<p v-html="item.message.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p>
</div>
.content{
p{
display: flex;
align-items: center;
}
::v-deep img{
width: 120px;
height: 120px;
object-fit: contain;
}
}
