114 lines
2.5 KiB
Vue
114 lines
2.5 KiB
Vue
<template>
|
|
<view class="emotion-box" style="display: flex; flex-direction: row; flex-wrap: wrap; height: 35vh; overflow-y: scroll;" >
|
|
<block v-for="(list,index) in emojilist">
|
|
<image @click="clickEmoji(list)" :src="'../../static/emojis/qq/'+list.url+''" style="width: 35px; height: 35px; margin-top: 15px; margin-left: 18px;"></image>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 1.先引入表情库，（完全手撸，十分繁琐）（这个是 QQ 的表情库）
|
|
import emojiList1 from '../../emoji/biaoqin.js'
|
|
export default {
|
|
props: {
|
|
windowWidth:{
|
|
type:Number,
|
|
default:320
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
emojilist:emojiList1,
|
|
list1: [
|
|
[1,2,3],[4,5,6],
|
|
[7,8,9],[10,11,12],
|
|
[13,14,15],[16,17,18],
|
|
[19,20,21],[22,23,98]
|
|
],
|
|
list2:[
|
|
[25,26,27],[28,29,30],
|
|
[31,32,33],[34,35,36],
|
|
[37,38,39],[40,41,42],
|
|
[43,44,45],[46,47,98]
|
|
],
|
|
list3:[
|
|
[49,50,51],[52,53,54],
|
|
[55,56,57],[58,59,60],
|
|
[61,62,63],[64,65,66],
|
|
[67,68,69],[70,71,98]
|
|
],
|
|
list4:[
|
|
[73,74,75],[76,77,78],
|
|
[79,80,81],[82,83,84],
|
|
[85,86,87],[88,89,90],
|
|
[91,92,93],[94,95,98]
|
|
],
|
|
list5:[
|
|
[24],[48],[72],[96],[97],[98]
|
|
],
|
|
item: [],
|
|
img_width:0
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
mounted() {
|
|
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.emotion-box').boundingClientRect(data => {
|
|
console.log(this.windowWidth / 10);
|
|
this.img_width = this.windowWidth / 10;
|
|
}).exec();
|
|
},
|
|
methods: {
|
|
clickEmoji(val){
|
|
console.log(val)
|
|
let emotioni = val.alt
|
|
let emotion = this.emotion(val.url)
|
|
this.$emit('emotion', {emotion,emotioni});
|
|
},
|
|
clickHandler(i) {
|
|
let emotioni = `[em_${i}]`
|
|
let emotion = this.emotion(i)
|
|
this.$emit('emotion', {emotion,emotioni});
|
|
},
|
|
emotion(res) {
|
|
|
|
const list = Array.from({length:100}, (v,k) => k)
|
|
let index = list.indexOf(res)
|
|
// return `<img src="https://maishijie.com.cn/view/img/bkhumor-emoji/${index}.gif" align="middle">`
|
|
// return `<img src="https://www.nuttyreading.com/emojis/emojis/qq/${res}" width="24px" align="middle">`
|
|
return "https://www.nuttyreading.com/emojis/emojis/qq/"+res
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.emotion-box {
|
|
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 8upx;
|
|
overflow: hidden;
|
|
background: white;
|
|
}
|
|
|
|
.emotion-box-line {
|
|
display: flex;
|
|
}
|
|
|
|
.emotion-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
padding:10upx;
|
|
}
|
|
</style>
|