55 lines
922 B
Vue
55 lines
922 B
Vue
<template>
|
|
<view class="emoji-picker">
|
|
<view class="emoji-list">
|
|
<text
|
|
v-for="(emoji, idx) in emojis"
|
|
:key="idx"
|
|
class="emoji-item"
|
|
@click="selectEmoji(emoji)"
|
|
>{{ emoji }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import emojis from '@/common/emojis.js';
|
|
export default {
|
|
name: 'EmojiPicker',
|
|
data() {
|
|
return {
|
|
emojis
|
|
};
|
|
},
|
|
methods: {
|
|
selectEmoji(emoji) {
|
|
this.$emit('select', emoji);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.emoji-picker {
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
padding: 16rpx;
|
|
width: 100%;
|
|
}
|
|
.emoji-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
}
|
|
.emoji-item {
|
|
font-size: 48rpx;
|
|
padding: 12rpx;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background 0.2s;
|
|
border-radius: 6rpx;
|
|
}
|
|
.emoji-item:active {
|
|
background: #f0f2f6;
|
|
}
|
|
</style> |