Vue表情包输入组件
地址http://npm.taobao.org/package/emoji-mart-vue;安装npm install --save emoji-mart-vue组件import { Picker } from "emoji-mart-vue"; //引入组件<template><div class="container">...
·
地址
安装
npm install --save emoji-mart-vue
组件
import { Picker } from "emoji-mart-vue"; //引入组件
<template>
<div class="container">
<!--
search: 'Search Results',
recent: 'Frequently Used',
people: 'Smileys & People',
nature: 'Animals & Nature',
foods: 'Food & Drink',
activity: 'Activity',
places: 'Travel & Places',
objects: 'Objects',
symbols: 'Symbols',
flags: 'Flags',
custom: 'Custom',-->
<textarea name="emoji" v-model="content" cols="30" rows="10"></textarea>
<picker
:include="['people']" //添加自己需要的表情类型
:showSearch="false" //搜索框显示
:showPreview="false"
:showCategories="false"
@select="addEmoji"
/>
</div>
</template>
<script>
import { Picker } from "emoji-mart-vue";
export default {
data() {
return {
content: ""
};
},
methods: {
addEmoji(e) {
this.content += e.native;
}
},
created() {},
mounted() {},
components: {
Picker
}
};
</script>
<style scoped>
.emoji-mart[data-v-7bc71df8] {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 420px;
color: #ffffff !important;
border: 1px solid #d9d9d9;
border-radius: 5px;
background: #fff;
}
.text {
display: block;
margin: 0 auto;
margin-bottom: 10px;
width: 400px;
resize: none;
box-sizing: border-box;
padding: 5px 10px;
border-radius: 8px;
}
.text-place {
height: 80px;
box-sizing: border-box;
padding: 5px 10px;
border-radius: 8px;
background: #ddd5d5;
}
.text-place p {
display: flex;
align-items: center;
margin: 0;
}
</style>
以上就可以实现表情包功能拉
喜欢上方小程序,需要源码的,添加博主微信私信小编.
更多推荐
已为社区贡献4条内容
所有评论(0)