【声明】 本repo仅可以用于学习用途
微信表情包插件,查看在线实例
npm i vue-weixin-emojis -S
// 引入安装包和样式
import WeixinEmojis from 'vue-weixin-emojis'
import 'vue-weixin-emojis/dist/vue-weixin-emojis.css'
Vue.use(WeixinEmojis)
可选项
如果你希望表情图片放在你们的服务器中,可将图片qqface.png放在项目的静态文件夹中(如: /public 或 /src/statics目录下)。并将url参数改成你放置的图片的位置。
Vue.use(WeixinEmojis, {url: 'path/to/qqface.png'})
图片素材 qqface.png
表情面板组件,展示所有微信表情,点击会自动给value赋上相应表情key值
<emoji-picker v-model="value" height="300px" button/>
在转换成表情的地方使用以下方法
// 需要在vue组件(实例)中调用
this.value = this.$string2emoji(this.value)
// 修改已发出的表情,使用以下方法
this.value = this.$emoji2string(this.value)