79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<template>
|
|
<view class="emoji_blur" @click="emoji_blur" v-if="show">
|
|
<view class="emoji_box">
|
|
<scroll-view class="scrool" scroll-y="true">
|
|
<view class="emojis">
|
|
<text
|
|
@click.stop="tap(item)"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
show: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
list: [
|
|
'😃', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '☺️', '😚', '😙',
|
|
'😋', '😛', '😜', '🤪', '😝', '🤑', '😩', '😖', '😨', '😭', '😞', '🤓', '🤠', '😎', '🥳', '😵', '🤧', '🤕',
|
|
'🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '🤥', '😶🌫️', '😮🌫️', '😴',
|
|
'🤮', '❤️', '💯', '💔', '💩', '🤡', '🤖', '👻', '🙈', '🙉', '🙊', '💣', '💋', '😡', '🤬', '😠'
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
tap(item) {
|
|
this.$emit('emoji', item); // 触发 emoji 事件，将选择的 emoji 传给父组件
|
|
},
|
|
emoji_blur() {
|
|
this.$emit('emojiblur'); // 触发 emojiblur 事件，告诉父组件关闭 emoji 选择器
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.emoji_blur {
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.emoji_box {
|
|
height: 430rpx;
|
|
background: #f6f6f6;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.scrool {
|
|
height: 400rpx;
|
|
width: 100%;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.emojis {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
font-size: 40rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10rpx 25rpx;
|
|
flex-shrink: 3;
|
|
padding-bottom: 50rpx;
|
|
}
|
|
</style>
|
|
|