0.0.2 • Published 3 years ago
vue-emoji-panel v0.0.2
vue-emoji-panel
一个基于Vue编写的表情选择面板组件
安装
npm i --save vue-emoji-panel使用
// main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 引入样式
import 'emoji-panel/dist/emoji-panel.css'
import EmojiPanel from 'vue-emoji-panel'
// 注册
Vue.use(EmojiPanel)
new Vue({
render: (h) => h(App)
}).$mount('#app')更细粒度使用请查看examples
组件属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 指定表情弹出框的宽度 | Number | 410 |
| size | 指定单个表情的大小（正方形） | Number | 28 |
| emojis | 表情图片数组，单个对象需具有src、name属性 | Array | |
| col-limit | 单行表情最大数量 | Number | 9 |
| spacing | 行间距 | Number | 8 |
| recently-used | 是否开启记录最近使用的表情 | Boolean | true |
| panel-class | 为emoji-panel（容器）指定类名 | String | |
| emoji-class | 为emoji（单个表情）指定类名 | String | |
| unit | 用于width、size等具有长度性质的单位 | String | px |
组件事件
| 参数 | 说明 | 回调参数 |
|---|---|---|
| emoji-click | 表情被选中时触发 | item, index |