更新记录

v1.0.0(2023-04-09) 下载此版本

简要描述:

  • 表情插件 版本 v1.0.0 qq表情 基于colorui 通过 vue 实现 表情放在static下的 bkhumor-emoji 目录下。 使用方法请参考下方的 【模板示例】。 注意:手机上运行需要将表情图片放到自己服务器。 [示例图] [示例图2]

【模板示例】:

<input type="text" @focus="InputFocus" @blur="InputBlur" :value="inputValue" placeholder- placeholder="请输入您要发送的内容" maxlength="300"></input> <button class="cu-btn bg-gradual-blue shadow-blur">发送</button>
    <emotion @emotion="handleEmj" :height="200" v-if="isShowEmj"></emotion>

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!

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.3.13 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

简要描述:

  • 表情插件 版本 v1.0.0 qq表情 基于colorui 通过 vue 实现 表情放在static下的 bkhumor-emoji 目录下。 使用方法请参考下方的 【模板示例】。 注意:手机上运行需要将表情图片放到自己服务器。 [示例图] [示例图2]

【模板示例】:

<input type="text" @focus="InputFocus" @blur="InputBlur" :value="inputValue" placeholder- placeholder="请输入您要发送的内容" maxlength="300"></input> <button class="cu-btn bg-gradual-blue shadow-blur">发送</button>
    <emotion @emotion="handleEmj" :height="200" v-if="isShowEmj"></emotion>

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!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问