【组件】VueEmojiBox表情包组件

【组件】VueEmojiBox表情包组件

2020-04-26 18:38:20 评论 2 阅读 236 喜欢 0

Vue-Emoji-Box


npm npm bundle size vue2 npm type definitions


image




示例


codesandbox


Edit vue-emoji-box


本地运行


git clone https://github.com/ZhanPhty/vue-emoji-box.git

cd vue-emoji-box

yarn 或 npm install

yarn serve 或 npm run serve

插件安装


yarn add vue-emoji-box

使用说明


1.默认使用emoji字符表情,可自定义表情数据
第三方表情包,表情包资源建议存放在cdn或本地静态资源目录‘/public’


2.组件提供renewHtml()方法,用于将表情字符渲染成对应的表情图片富文本


组件注册



局部注册



<template>
<div id="app">
<div v-html="renewHtml()"></div>
<VueEmojiBox />
</div>
</template>

<script>
import VueEmojiBox, { renewHtml } from 'vue-emoji-box'

export default {
components: {
VueEmojiBox
}
}
</script>


全局注册



import Vue from "vue"
import App from "./App.vue"

import VueEmojiBox from 'vue-emoji-box'

Vue.use(VueEmojiBox)

new Vue({
render: h => h(App)
}).$mount("#app")

renewHtml


表情有'emoticon'与'image'两种类型,emoticon用于字符表情(emoji或颜文字),image则是图片包表情。(数据格式查看:$Props.customEmojis$Props.customCategories


图片表情包在选择时会使用特定的字符串标识,提交的数据实际是字符串而非图片,所以在返回数据的时候得到的也是特定的字符串。


提供renewHtml方法用于将这些特定的字符串恢复成<img>富文本表情的形式展示表情包


renewHtml有4个参数



  • html: string 需要转化的html数据

  • category: string[] 项目中使用到的表情包分类数据

  • emojis: string[] 项目中使用到的表情包数据

  • baseUrl: string 表情包存放的初始url


<template>
<div id="app">
<div class="html" v-html="renewHtml(html: string, category: string[], emojis: string[], baseUrl: string)"></div>
</div>
</template>

<script>
import { renewHtml } from 'vue-emoji-box'

export default {
methods: {
renewHtml
}
}
</script>

Props




























































PropTypeDefault
targetIdString
value / v-modelString
baseUrlString‘/'
customEmojisString[]emojisDefault[]
customCategoriesString[]categoriesDefault[]
classNameString
visibleBooleanfalse
labelString or Boolean or slot'表情'
widthString'380px'
heightString'200px'

targetId


类型:string


用于直接绑定input、textarea、div的Id属性,将选择的表情数据直接插入到光标位置
注:设置targetId同时可使用v-model方式获取插入表情后的完整数据


<textarea id="demoText" />
<VueEmojiBox targetId="demoText" />

value


类型:string


双向绑定,返回插入表情后的完整数据,必须设置targetId


<div>{{ textareaVal }}</div>
<textarea id="demoText" />
<VueEmojiBox targetId="demoText" v-model="textareaVal" />

baseUrl


类型:string
默认值: /


使用第三方表情包时,设置初始url,支持本地资源或网络资源


<VueEmojiBox baseUrl="https://www.xxx.com/" />

customEmojis


类型:string[]
默认值: emoji[]


自定义表情包数据,配合baseUrl


// 资源最后路径(${baseUrl}${customEmoji.data})
// https://www.xxx.com/paopao/啊@2x.png
[{
data: 'paopao/啊@2x.png', // 文件存放目录
text: '啊', // 对应的显示文字
category: 'paopao' // 类别
}]

customCategories


类型:string[]
默认值: category[]


自定义表情分类数据


[{
id: 'paopao', // 类别id
name: '泡泡', // 类别名称
icon: '', // 类别icon,显示优先级高于name
textPattern: '@(${value})', // 表情字符串标识,定义是必须存在'${value}',如:$[${value}]、$<${value}>
type: 'image' // 类别类型, 可选值 'emoticon' | 'image'
}]

className


类型:string


设置class


<VueEmojiBox className="demoClass" />

visible


类型:boolean
默认值: false


控制组件显示


<VueEmojiBox :visible="true" />

label


类型:string | boolean | slot
默认值: 表情


表情名称,可用于触发显示,设置false则隐藏。可用slot定制样式


<VueEmojiBox label="🙂表情" />

or

// slot
<VueEmojiBox>
<button #label>label="🙂表情"</button>
</VueEmojiBox>

width


类型:string
默认值: 380px


宽度


<VueEmojiBox width="300px" />

height


类型:string
默认值: 200px


高度


<VueEmojiBox height="200px" />

Events













EventIntroduction
change选择表情时触发

change


<VueEmojiBox @change="onChange"  />

onChange(item) {
console.log(item)
}

联系


QQ:461632311


个人博客:https//www.uizph.com


编辑于: 2020-04-28 12:00:59
分享