這節(jié)課來(lái)實(shí)現(xiàn) 點(diǎn)擊 底部 【笑臉】彈出選擇表情包界面的靜態(tài)頁(yè)面布局屈留，如下圖
- 找到【笑臉】兼砖，給他的父級(jí)元素綁定一個(gè)點(diǎn)擊事件
@click="showEmo"
methods:{
showEmo() {
}
}
- 利用vant組件庫(kù)的
popup組件來(lái)實(shí)現(xiàn)，下面是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="請(qǐng)輸入要發(fā)送的消息">
<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>
<!-- 發(fā)送按鈕 -->
<div class="sendBtn">
<van-button icon="arrow-left" style="margin-right: 15px;" type="primary" size="small">清空</van-button>
<van-button type="primary" size="small">發(fā)送</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%;
}
}
}
- 記得在data中定義
show默認(rèn)為false
daa:{
return{
show:false
}
}
- 然后在點(diǎn)擊方法
showEmo里纽甘，點(diǎn)擊將show這個(gè)變量設(shè)置為true
methods:{
showEmo() {
this.show = true
}
}
-
最終實(shí)現(xiàn)該靜態(tài)頁(yè)面良蛮，但是要記得，使用到的vant組件要在plugins/vant.js內(nèi)注冊(cè)
-
下面在實(shí)現(xiàn)把 【所有表情包】引入過(guò)來(lái)
- 新建組件
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 = [
'大笑',
'炫耀',
'倒霉',
'跳舞',
'釘釘子',
'委屈',
'失落',
'得意',
'沖',
'烏鴉',
'石化了',
'忙死了',
'愛(ài)你',
'啊喂',
'熱化了',
'蝸牛',
'冷',
'凄涼',
'有點(diǎn)熱',
'吃飽了',
'哼',
'打一架',
'飛吻',
'冷汗',
'豬頭',
'拜拜',
'烏鴉',
'再見(jiàn)',
'瀟灑',
'酷',
'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: [
['大笑', '炫耀', '倒霉', '跳舞'],
['釘釘子', '委屈', '失落', '得意'],
['沖', '烏鴉', '石化了', '忙死了'],
['愛(ài)你', '啊喂', '熱化了', '蝸牛'],
['冷', '凄涼', '有點(diǎn)熱', '吃飽了'],
['哼', '打一架', '飛吻', '冷汗'],
['豬頭', '拜拜', '烏鴉', '再見(jiàn)'],
['瀟灑', '酷', '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聊天頁(yè)面引入Emotion組件
import Emotion from '@/components/Emotion';
components: {Emotion },
- 然后使用這個(gè)組件 决瞳，并在methods里映射自定義事件
handleEmotion(i) {
this.value += i
},
- 下面給發(fā)送按鈕直接調(diào)用
send方法
- 再給
send方法里，設(shè)置this.show = false左权，在發(fā)送表情包后皮胡，隱藏彈窗
- 可以看到，發(fā)送出去的是表情包的標(biāo)識(shí)赏迟，我們可以使用 正則表達(dá)式 來(lái)匹配 標(biāo)識(shí) 映射 img圖片
- 現(xiàn)在methods里定義一個(gè)方法
methods:{
// 將匹配結(jié)果替換表情圖片
emotion(res) {
let word = res.replace(/\#|\;/gi, '')
const list = [
'大笑',
'炫耀',
'倒霉',
'跳舞',
'釘釘子',
'委屈',
'失落',
'得意',
'沖',
'烏鴉',
'石化了',
'忙死了',
'愛(ài)你',
'啊喂',
'熱化了',
'蝸牛',
'冷',
'凄涼',
'有點(diǎn)熱',
'吃飽了',
'哼',
'打一架',
'飛吻',
'冷汗',
'豬頭',
'拜拜',
'烏鴉',
'再見(jiàn)',
'瀟灑',
'酷',
'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;
}
}
