94 lines
2.3 KiB
Markdown
94 lines
2.3 KiB
Markdown
|
||
|
||
|
||
**简要描述：**
|
||
|
||
- 表情插件
|
||
版本 v1.0.0
|
||
qq表情
|
||
基于colorui 通过 vue 实现
|
||
表情放在static下的 bkhumor-emoji 目录下。
|
||
使用方法请参考下方的 【模板示例】。
|
||
**注意：手机上运行需要将表情图片放到自己服务器。**
|
||
[]
|
||
[]
|
||
```javascript
|
||
|
||
【模板示例】：
|
||
<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！ |