65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="emojiRoot">
|
||
|
|
<div v-for="(img, key) in emojis" v-html="img" :key="key" @click="onSendEmoticon(1, key, img)"
|
||
|
|
class="option pointer flex-center" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive, defineProps } from "vue"
|
||
|
|
import dayjs from "dayjs";
|
||
|
|
import { beautifyTime } from '@/utils/datetime'
|
||
|
|
import { useTalkStore } from '@/store'
|
||
|
|
import { useSessionMenu } from '@/hooks'
|
||
|
|
import { emojis } from '@/utils/emojis'
|
||
|
|
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default: {},
|
||
|
|
required: false,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const onSendEmoticon = (type, value, img = '') => {
|
||
|
|
if (img) {
|
||
|
|
const imgSrcReg = /<img.*?src='(.*?)'/g
|
||
|
|
let match = imgSrcReg.exec(img)
|
||
|
|
if (match) {
|
||
|
|
emit('on-select', { type, value, img: match[1] })
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
emit('on-select', { type, value, img })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.emojiRoot {
|
||
|
|
width: 100%;
|
||
|
|
height: 420rpx;
|
||
|
|
padding: 5rpx 32rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.option {
|
||
|
|
width: 14.28%;
|
||
|
|
height: 42rpx;
|
||
|
|
margin: 20rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.emoji) {
|
||
|
|
vertical-align: text-bottom;
|
||
|
|
margin: 0 10rpx;
|
||
|
|
width: 52rpx;
|
||
|
|
height: 52rpx;
|
||
|
|
}
|
||
|
|
</style>
|