简要描述：
- 表情插件
版本 v1.0.0
qq表情
基于colorui 通过 vue 实现
表情放在static下的 bkhumor-emoji 目录下。
使用方法请参考下方的 【模板示例】。
注意：手机上运行需要将表情图片放到自己服务器。
[
]
[
]
【模板示例】：
<view class="flex">
<view class="flex-sub padding-left-xs" style="align-self: center;">
<input type="text" @focus="InputFocus" @blur="InputBlur" :value="inputValue" placeholder-style="font-size:24rpx;color:#aaaaaa;" placeholder="请输入您要发送的内容" maxlength="300"></input>
</view>
<view class="text-center" style="width: 80rpx; font-size: 50rpx;">
<text :class="emojiIcon" @tap="showEmj"></text>
</view>
<button class="cu-btn bg-gradual-blue shadow-blur">发送</button>
</view>
<emotion @emotion="handleEmj" :height="200" v-if="isShowEmj"></emotion>
</view>
JS部分：
import emotion from '@/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
export default {
data() {
return {
title: 'Hello',
isShowEmj: false,
emojiIcon:'cuIcon-emoji',
inputValue:''
}
},
onLoad() {
},
components:{
emotion
},
methods: {
handleEmj(i) {
if(i == '[em_98]') {
//匹配最后一个表情符号并删除。
this.inputValue = this.inputValue.replace(/(\[[^\]]+\]|[\s\S])$/, '');
} else {
this.inputValue += i;
}
},
showEmj() {
let bool = !this.isShowEmj;
if(bool) {
this.emojiIcon = 'cuIcon-keyboard';
} else {
this.emojiIcon = 'cuIcon-emoji';
}
this.isShowEmj = bool;
this.$emit('show')
},
InputBlur(e){
},
InputFocus(e){
this.isShowEmj = false;
this.$emit('foc')
},
}
}
注意事项 【1】请在入口页面根目录下的App.vue引入以下css:
/*每个页面公共css */
@import "bkhumor-emojiplus/components/colorui/main.css";
@import "bkhumor-emojiplus/components/colorui/icon.css"
【2】为了保证图片生效可控，建议将components/bkhumor-emoji/index.vue中的图片路径替换为自己服务器的图片路径。
- 更多详细内容请参看demo！有疑问可留言
欢迎使用ShowDoc！