# zy-xcx

**Repository Path**: Acker_hei/zy-xcx

## Basic Information

- **Project Name**: zy-xcx
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-11-17
- **Last Updated**: 2024-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



    
**简要描述：** 

- 表情插件
版本 v1.0.0
qq表情
基于colorui 通过 vue 实现
表情放在static下的 bkhumor-emoji 目录下。
使用方法请参考下方的 【模板示例】。
**注意：手机上运行需要将表情图片放到自己服务器。**
[![示例图](http://xinghuo.webdog.club/o_1gti10ds01515kqi1vip1can1cvfl.png)]
[![示例图2](http://xinghuo.webdog.club/o_1gti120uh15lm1bod1n38ejldsmq.png)]
```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！