93 lines
1.7 KiB
Vue
93 lines
1.7 KiB
Vue
<template>
|
|
<view
|
|
class="emotion-box"
|
|
:style="{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
height: props.height + 'px',
|
|
overflowY: 'scroll',
|
|
}"
|
|
>
|
|
<block v-for="(list, index) in emojilist" :key="index">
|
|
<view style="width: 10%; margin: 10px 3.3%;">
|
|
<image
|
|
@click="clickEmoji(list)"
|
|
:src="`/static/emojis/qq/${list.url}`"
|
|
style="width: 35px; height: 35px;"
|
|
/>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, defineProps, defineEmits } from 'vue'
|
|
import emojiList1 from './emoji/biaoqing.js'
|
|
|
|
const props = defineProps({
|
|
windowWidth: {
|
|
type: Number,
|
|
default: 320,
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 275,
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['emotion'])
|
|
|
|
const emojilist = ref(emojiList1)
|
|
const img_width = ref(0)
|
|
|
|
onMounted(() => {
|
|
const query = uni.createSelectorQuery().in(this)
|
|
query
|
|
.select('.emotion-box')
|
|
.boundingClientRect((data) => {
|
|
img_width.value = props.windowWidth / 10
|
|
})
|
|
.exec()
|
|
})
|
|
|
|
/**
|
|
* 点击表情事件
|
|
*/
|
|
function clickEmoji(val) {
|
|
const emotioni = val.alt
|
|
const emotion = getEmotion(val.url)
|
|
console.log(emotion)
|
|
emit('emotion', { emotion, emotioni })
|
|
}
|
|
|
|
/**
|
|
* 根据表情 url 生成完整图片路径
|
|
*/
|
|
function getEmotion(res) {
|
|
return `https://www.amazinglimited.com/emoji/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>
|