vue 引入 emoji 表情包
npm install --save emoji-mart-vue
template 应用
import { Picker } from "emoji-mart-vue";
components: {
Picker
}
直接丢在输入框上边就行
<input type="text" v-model="content" />
<picker
:include="['people', 'Smileys']"
:showSearch="false"
:showPreview="false"
:showCategories="false"
@select="addEmoji"
/>
完整代码
<template>
<div>
<input type="text" v-model="content" />
<picker
:include="['people', 'Smileys']"
:showSearch="false"
:showPreview="false"
:showCategories="false"
@select="addEmoji"
/>
</div>
</template>
<script>
import { Picker } from "emoji-mart-vue";
export default {
name: "HelloWorld",
components: {
Picker,
},
data() {
return {
content: "",
};
},
methods: {
addEmoji(e) {
this.content += e.native;
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<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;
}
</style>
效果图
![在这里插入图片描述](/image/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2RpcmVjdC85MDBhYmFkMzc0NTk0YTJjYjM4ZTdiZDE0YmI4MGU5YS5wbmc%3D)