uni-app 表情、键盘切换输入组件

组件内容

<template><view v-if="showInputEmoji" class="icon-img-emoji"><view class="pop_pinglun" :style="{bottom: keyHeight + 'px'}"><view class="mask"  @click="showInputEmoji = false"></view><view class="warp" @tap.stop><textarea placeholder="请输入内容" :maxlength="maxContent":focus="focusKey"v-model="content":cursor="cursorIndex"@input="inputChange"@focus="focusChange"@blur="blurChange":show-confirm-bar="false" /><view class="btn-bottom"><text class="left">{{numberContent}}/{{maxContent}}</text><view class="right"><text v-if="showEmoji" class="iconfont biaoqing" @click="openEmoji"></text><text v-else class="iconfont jianpan" @click="openInput"></text><button class="btn" @click="handleSubmit" :disabled="numberContent <= 0">发表</button></view></view><swiper v-show="!showEmoji" class="swiper-list" :indicator-dots="true"><swiper-item  v-for="(parentItem, parentIndex) in dataList" :key="parentIndex"><view class="swiper-item"><image v-for="item in parentItem":src="item.value | textOrEmoji":key="item.value"@click="clickEmoji(item)"mode="aspectFit"></image></view></swiper-item></swiper></view></view></view>
</template><script>import config from '@/config/index.js'export default {data() {return {keyHeight: 0,startIndex: -1,cursorIndex: 0,content: '',showEmoji: true,showInputEmoji: false,focusKey: false,numberContent: 0,dataList: [[{lable: '[爱你]', value: 'aini'},{lable: '[奥特曼]', value: 'aoteman'},{lable: '[拜拜]', value: 'baibai'},{lable: '[抱抱]', value: 'baobao'},{lable: '[悲伤]', value: 'beishang'},{lable: '[并不简单]', value: 'bingbujiandan'},{lable: '[鄙视]', value: 'bishi'},{lable: '[闭嘴]', value: 'bizui'},{lable: '[馋嘴]', value: 'chanzui'},{lable: '[吃惊]', value: 'chijing'},{lable: '[打哈欠]', value: 'dahaqi'},{lable: '[打脸]', value: 'dalian'},{lable: '[敲头]', value: 'ding'},{lable: '[狗头]', value: 'doge'},{lable: '[二哈]', value: 'erha'},{lable: '[费解]', value: 'feijie'},{lable: '[肥皂]', value: 'feizao'},{lable: '[感冒]', value: 'ganmao'},{lable: '[鼓掌]', value: 'guzhang'},{lable: '[哈哈]', value: 'haha'},{lable: '[害羞]', value: 'haixiu'},{lable: '[汗]', value: 'han'},{lable: '[呵呵]', value: 'hehe'},{lable: '[嘿嘿嘿]', value: 'heiheihei'}],[{lable: '[黑线]', value: 'heixian'},{lable: '[哼]', value: 'heng'},{lable: '[坏笑]', value: 'huaixiao'},{lable: '[花心]', value: 'huaxin'},{lable: '[急眼]', value: 'jiyan'},{lable: '[可爱]', value: 'keai'},{lable: '[可怜]', value: 'kelian'},{lable: '[酷]', value: 'ku'},{lable: '[骷髅]', value: 'kulou'},{lable: '[困]', value: 'kun'},{lable: '[懒得理你]', value: 'landelini'},{lable: '[泪]', value: 'lei'},{lable: '[怒]', value: 'nu'},{lable: '[怒骂]', value: 'numa'},{lable: '[钱]', value: 'qian'},{lable: '[亲亲]', value: 'qinqin'},{lable: '[傻眼]', value: 'shayan'},{lable: '[生病]', value: 'shengbing'},{lable: '[失望]', value: 'shiwang'},{lable: '[衰]', value: 'shuai'},{lable: '[睡觉]', value: 'shuijiao'},{lable: '[思考]', value: 'sikao'},{lable: '[太开心]', value: 'taikaixin'},{lable: '[摊手]', value: 'tanshou'}],[{lable: '[舔]', value: 'tian'},{lable: '[偷笑]', value: 'touxiao'},{lable: '[吐]', value: 'tu'},{lable: '[挖鼻孔]', value: 'wabishi'},{lable: '[委屈]', value: 'weiqu'},{lable: '[污]', value: 'wu'},{lable: '[笑哭]', value: 'xiaoku'},{lable: '[星星眼]', value: 'xingxingyan'},{lable: '[嘻嘻]', value: 'xixi'},{lable: '[嘘]', value: 'xu'},{lable: '[阴险]', value: 'yinxian'},{lable: '[疑问]', value: 'yiwen'},{lable: '[右哼哼]', value: 'youhengheng'},{lable: '[晕]', value: 'yun'},{lable: '[允悲]', value: 'yunbei'},{lable: '[抓狂]', value: 'zhuakuang'}]]}},watch: {content(newValue, oldValue) {this.numberContent = newValue.length}},props: {// 按钮文字btnText: {type: String,default: () => {return '发表'}},// 字数限制maxContent: {type: Number,default: 100}},filters:{textOrEmoji(value) {return  `${config.imgUrl}/emoji/d_${value}.gif`}},methods: {// 打开关闭输入openOrOut() {this.showInputEmoji = !this.showInputEmojithis.$nextTick(() => {this.focusKey = true})},// 打开键盘openInput() {this.showEmoji = truethis.focusKey = true},// 打开表情openEmoji() {let _this = this_this.showEmoji = false},// 弹出键盘focusChange(event) {this.openInput()this.keyHeight = event.detail.height},// 失去光标blurChange(event) {this.keyHeight = 0this.startIndex = event.detail.cursorthis.focusKey = false},// 输入时光标的位置inputChange(event) {this.startIndex = event.detail.cursor},// 选中表情clickEmoji(item) {if (this.startIndex > 0) {const start = this.content.substring(0, this.startIndex)const end = this.content.substring(this.startIndex, this.content.length)this.content =  start + item.lable + end} else {this.content += item.lable}this.startIndex += item.lable.length },// 发表内容handleSubmit() {const content = JSON.parse(JSON.stringify(this.content))this.content = ''this.$emit('inputEmojiSubmit', content)}}}
</script><style scoped lang="scss">
.icon-img-emoji{overflow: auto;.pop_pinglun{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 99;.mask{background-color: rgba($color: #000000, $alpha: 0.2);width: 100%;height: 100%;}.warp{background-color: #fff;position: absolute;bottom: 0;left: 0;width: 100%;z-index: 9;.btn-bottom{display: flex;justify-content: space-between;align-items: center;margin-top: 10px;padding: 20upx;border-top: 1upx solid $c_02;height: 90upx;.left{font-size: 22upx;color: #999999;}.right{display: flex;align-items: center;.iconfont{font-size: 45upx;color: $c_03;margin-right: 30upx;}.biaoqing{font-size: 40upx;}}.btn{@include btn-reset;color: $c_01;padding-left: 20upx;border-left: 1upx solid $c_02;margin: 0;font-size: 30upx;line-height: 40upx;}.btn[disabled]{color: rgba($color: $c_01, $alpha: 0.6);}}textarea{border: 1px solid $c_02;background-color: $c_02;border-radius: 4upx;margin: auto;text-align: left;padding: 10upx;margin: 20upx;display: block;width: auto;height: 140upx;}}}.swiper-list{padding-top: 20upx;background-color: $c_02;.swiper-item{display: flex;align-items: center;flex-wrap: wrap;image{width: 12.5%;height: 60upx;margin-bottom: 20upx;}}}
}
</style>

使用方式

<view class="input-list"><view class="input-item" type="text" @click="focusInput('input01')">{{input01}}</view><view class="input-item" type="text" @click="focusInput('input02')">{{input02}}</view><input-emojibtnText="发表"@inputEmojiSubmit="inputEmojiSubmit"ref="inputEmoji"></input-emoji>
</view>

focusInput(data) {this.$refs.inputEmoji.openOrOut()this.$refs.inputEmoji.content = this[data]this.curContent = data
},
inputEmojiSubmit(data) {console.log(this.curContent)this[this.curContent] = datathis.$refs.inputEmoji.openOrOut()
}

效果

表情包下载

链接：https://pan.baidu.com/s/1ryGWo7xTTo9CGTzpnnjpqQ
提取码：b4f6

怎么显示表情

定义好一个组件匹配 [ ] 这样就可以回显代码了

<template><view class="rich-view"><rich-text :nodes="nodes" class="rich-text" :class="['omit' + isOmit]"><span style="color:#ccc;" v-if="placeholder">{{placeholder}}</span></rich-text></view>
</template>
<script>import config from '@/config/index.js'export default {data() {return{dataList: {爱你: 'aini',奥特曼: 'aoteman',拜拜: 'baibai',抱抱: 'baobao',悲伤: 'beishang',并不简单: 'bingbujiandan',鄙视: 'bishi',闭嘴: 'bizui',馋嘴: 'chanzui',吃惊: 'chijing',打哈欠: 'dahaqi',打脸: 'dalian',敲头: 'ding',狗头: 'doge',二哈: 'erha',费解: 'feijie',肥皂: 'feizao',感冒: 'ganmao',鼓掌: 'guzhang',哈哈: 'haha',害羞: 'haixiu',汗: 'han',呵呵: 'hehe',嘿嘿嘿: 'heiheihei',黑线: 'heixian',哼: 'heng',坏笑: 'huaixiao',花心: 'huaxin',急眼: 'jiyan',可爱: 'keai',可怜: 'kelian',酷: 'ku',骷髅: 'kulou',困: 'kun',懒得理你: 'landelini',泪: 'lei',怒: 'nu',怒骂: 'numa',钱: 'qian',亲亲: 'qinqin',傻眼: 'shayan',生病: 'shengbing',失望: 'shiwang',衰: 'shuai',睡觉: 'shuijiao',思考: 'sikao',太开心: 'taikaixin',摊手: 'tanshou',舔: 'tian',偷笑: 'touxiao',吐: 'tu',挖鼻孔: 'wabishi',委屈: 'weiqu',污: 'wu',笑哭: 'xiaoku',星星眼: 'xingxingyan',嘻嘻: 'xixi',嘘: 'xu',阴险: 'yinxian',疑问: 'yiwen',右哼哼: 'youhengheng',晕: 'yun',允悲: 'yunbei',抓狂: 'zhuakuang'},nodes:''}},props:{richString:{type:String,default: () => {return ''}},placeholder:{type:String,default: null},// 是否限制显示行数isOmit:{type: String,default: 'n'}},watch:{richString(newValue,oldValue) {this.nodes = newValueif(this.nodes){this.replace()}else{this.nodes = `<span style="color:#ccc;">${this.placeholder}</span>`}}},methods:{replace() {// 处理富文本图片无法显示问题this.nodes = this.nodes.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')// 处理表情let temp = []let reg = /\[.*?\]/gwhile((temp = reg.exec(this.nodes))){let str = temp[0].substring(1,temp[0].length-1)if(this.dataList[str]){let value = this.dataList[str]let html = `<img src='${config.imgUrl}/emoji/d_${value}.gif' style='width:18px;height:18px;vertical-align: middle;'></img>`this.nodes = this.nodes.replace(temp[0],html)}}}},created() {this.nodes = this.richStringthis.replace()}}
</script>
<style scoped lang="scss">
.rich-view{// display: inline-block;.rich-text{word-break: break-all;white-space: pre-line;}
}
.omit4{@include p-n(4);max-height: 400upx;
}
.omit3{@include p-n(3)
}
</style>

uni-app 表情、键盘切换输入组件相关推荐

android 表情键盘切换,Android仿微信键盘切换效果
Android 仿微信的键盘切换(录音,表情,文字,其他),IM通讯,类似朋友圈只要涉及到文字等相关的app都会要涉及到键盘的处理,今天就给大家分享一下Android 仿微信的键盘切换. 效果图如下: ...
android 表情键盘切换,如何在键盘之间切换（从表情符号到qwerty，反之亦然）
我想让用户在键盘之间切换,例如从Qwerty切换到笑脸键盘.我无法理解用户如何通过使用Shift或iPhone全球按钮从Qwerty切换到表情图标的概念.我很困惑如何编写实际的"开关&quo ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
android 输入法更换_详解安卓手机输入法和键盘切换方式的教程
说道键盘也许大家都非常的熟悉,键盘有软键盘和硬键盘,如今大部分智能机上的就是软键盘,还有个别好几年前的手机呢使用的硬键盘,现在我们简单介绍一下键盘,键盘是用于操作设备运行的一种指令和数据输入装置,也指 ...
谷歌拼音输入法PinyinIME源码修改----随着Setting中中英文的切换对应改变软键盘中英文输入且字符变换
项目中使用的是Google的输入法:谷歌拼音输入法,即PinyinIME. 客户提出需求:需要在Setting中切换中英文的时候,输入法对应成中英文输入,并且字符也对应成中英文,即Setting中设置 ...
ios 表情符号键盘_iOS输入框过滤表情，处理自带键盘无法输入
本片分两部分 1.使用正则表达式过滤表情 2.处理苹果自带键盘无法输入汉字问题先记录下,后面完善: override func viewDidAppear(_ animated: Bool) { s ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
判断字符串是否含有emoji表情或者颜文字（非键盘可输入的特殊字符）
这里写自定义目录标题判断字符串是否含有emoji表情或者颜文字(非键盘可输入的特殊字符) 判断字符串是否含有emoji表情或者颜文字(非键盘可输入的特殊字符) 最近遇到一个特别有意思的自动化测试小姐 ...
flutter聊天界面-自定义表情键盘实现
flutter聊天界面-自定义表情键盘实现 flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,一套代码同时运行在 iO ...

uni-app 表情、键盘切换输入组件

组件内容

使用方式

效果

表情包下载

怎么显示表情

uni-app 表情、键盘切换输入组件相关推荐

最新文章

热门文章