65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
<template>
|
|
<view class="emoji" :style="{height:height+'px'}">
|
|
<view class="emoji-line" v-for="(line,i) in emoji" :key="i">
|
|
<view class="emoji-line-item" v-for="(item,index) in line" :key="index" @tap="clickEmoji(item)">{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:{
|
|
height:{
|
|
type:Number,
|
|
default:260
|
|
}
|
|
},
|
|
name: "emoji",
|
|
data() {
|
|
return {
|
|
emoji: [
|
|
['😀', '😁', '😂', '🤣', '😃', '😃', '😅'],
|
|
['😄', '😆', '😉', '😊', '😋', '😎', '😍'],
|
|
['😎', '😘', '😗', '😙', '🙂', '🤗', '😑'],
|
|
['😏', '😣', '😥', '😮', '🤐', '😯', '😶'],
|
|
['😪', '😫', '😴', '😌', '😛', '🤤', '🙄'],
|
|
['😒', '😓', '😕', '🙃', '🤑', '🙁', '😚'],
|
|
['😖', '😤', '😭', '😨', '😰', '😬', '😵'],
|
|
['😱', '😡', '😷', '💀', '👻', '💍', '💄'],
|
|
['💩', '👑', '🎓', '👀', '💪🏻', '☝🏻', '✌🏼'],
|
|
['🤘🏻', '🤙🏼', '👌🏻', '✊🏻', '👍🏼', '👎🏻', '👏🏻'],
|
|
['🙏🏻', '🤝', '🍖', '🍲', '🍦', '🍰'] //'🍔',
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
clickEmoji(e) {
|
|
this.$emit('emotion', e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.emoji {
|
|
width: 100%;
|
|
// height: 460rpx;
|
|
padding: 16rpx 10rpx 130rpx 10rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
|
|
.emoji-line{
|
|
display: flex;
|
|
|
|
.emoji-line-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 44rpx;
|
|
line-height: 140rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|