z-emoji

安装

npm i -S z-emoji

ZEmoji 组件

参数说明

参数	描述	类型	可选值	默认值
placement	表情列表悬浮框的位置	String	"top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"	"top-start"
trigger	触发表情列表悬浮框显示隐藏条件	String	"hover"	"hover","click"

事件

事件名称	描述	回调参数
select	选中表情时触发	(code: string, el: string)， code为表情对应的标识字符串，如"[微笑]"， el为表情的 img 表情对应的字符串

slot

名称	说明
——	自定义触发按钮，默认为[微笑]表情

使用示例

• 全局使用

// 在项目入口文件引入，如'main.js'
...
import ZEmoji from 'z-emoji'
...
Vue.use(ZEmoji)
...
 
// 在需要使用的组件中直接使用
<z-emoji @select="onSelect" />

• 局部使用

// 在需要使用的组件中引入使用
import { ZEmoji } from 'z-emoji'
...
components: {
  ZEmoji
}
...
<z-emoji @select="onSelect" />
...

效果

ZEmojiList 组件

参数说明

参数	描述	类型	可选值	默认值
text	表情对应的文本表示	string	——	"275px"
height	表情列表悬浮框的高度	string,number	——	"200px"

事件

事件名称	描述	回调参数
select	选中表情时触发	(code: string, el: string)， code为表情对应的标识字符串，如"[微笑]"， el为表情的 img 表情对应的字符串

使用示例

• 只支持局部使用

// 在需要使用的组件中引入使用
import { ZEmojiList } from 'z-emoji'
...
components: {
  ZEmojiList
}
...
<z-emoji-list @select="onSelect" />
...

效果

ZEmojiItem 组件

参数	描述	类型	可选值	默认值
text	表情对应的文本标识	string	支持的表情文本标识	——

事件

事件名称	描述	回调参数
select	选中表情时触发	(code: string, el: string)， code为表情对应的标识字符串，如"[微笑]"， el为表情的 img 表情对应的字符串

使用示例

• 只支持局部使用

// 在需要使用的组件中引入使用
import { ZEmojiItem } from 'z-emoji'
...
components: {
  ZEmojiItem
}
...
<z-emoji-item text="[大哭]" @select="onSelect" />
<z-emoji-item text="[微笑]" @select="onSelect" />
<z-emoji-item text="[调皮]" @select="onSelect" />
<z-emoji-item text="[哭]" @select="onSelect" />
...

效果