微信qq表情输入文本 vue

效果图：

父组件

<template><div style="padding:20px;width:90%;"><div class="textBox"><textarea :maxlength="maxNum" placeholder="请添加回复文字" v-model="shareText" ref="shareTextArea" @focus="showEmojiPanel = false"></textarea><div class="textInputBox"><div><img src="@/assets/smile.png" v-if="!showEmojiPanel" @click="showEmojiPanel = true"/><img src="@/assets/keyboard.png" v-if="showEmojiPanel" @click="handleKeyboardClick"/></div><div class="textTips">还可以输入{{getNum}}字</div></div><emoji-input @onEmojiChoose="handleEmojiChoose" v-if="showEmojiPanel"></emoji-input></div></div>
</template><script type="text/javascript">
export default {data () {return {shareText: '',showEmojiPanel: true,maxNum: 300}},computed: {getNum () {return this.maxNum - this.shareText.length}},methods: {getcurtext () {console.log(this.shareText, '提交')},handleEmojiChoose (emoji) {let value = this.shareTextlet el = this.$refs.shareTextArealet startPos = el.selectionStartlet endPos = el.selectionEndlet newValue = value.substring(0, startPos) + emoji + value.substring(endPos, value.length)this.shareText = newValueif (el.setSelectionRange) {setTimeout(() => {let index = startPos + emoji.lengthel.setSelectionRange(index, index)}, 0)}},handleKeyboardClick () {this.showEmojiPanel = falsethis.$refs.shareTextArea.focus()}}
}
</script><style type="text/scss" lang="scss" scoped>
.textBox {background: #F9F9F9;width: 100%;textarea {box-sizing: border-box;height: 92px;width: calc(100% - 16px);margin: 8px;resize: none;font-size: 14px;background: #FFFFFF;border: 1px solid #D9D9D9;border-radius: 4px;}.textTips {font-size: 12px;color: #BBBBBB;letter-spacing: 0;margin-right: 10px;}img {width: 24px;height: 24px;margin-left: 14px;}.textInputBox {display: flex;align-items: center;justify-content: space-between;color: #BBBBBB;padding-bottom: 8px;}
}
</style>

子组件

<template><div class="emojiContainer"><div class="emojiPage"><a v-for="(item, i) in emojiList" :key=i @click="onEmojiClick(`[${item.title}]`)"><img :src=item.src width="24" height="24"></a></div></div>
</template><script>
import emojiJSON from './emoji.json'
export default {name: 'EmojiInput',data () {return {emojiList: emojiJSON}},methods: {onEmojiClick (emoji) {this.$emit('onEmojiChoose', emoji)}}
}
</script><style lang="scss" scoped>
.emojiContainer {width: 100%;background: #F6F6F6;display: flex;height: 280px;flex-direction: column;.emojiPage {width: 100%;display: flex;flex-wrap: wrap;align-content: flex-start;a {width: 6.66%;height: 40px;display: flex;justify-content: center;align-items: center;}}
}
</style>
<style lang="scss">
.face-content .v-tabs__wrapper {display: none;
}
</style>

json 格式

[{"src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji","title": "微笑"}
]

微信qq表情输入文本 vue相关推荐

Android仿微信具有表情输入和拍照上传功能的键盘
因公司业务要求,需要做一款类似微信聊天的页面,最主要的是表情输入和拍照.选图上传,因此仿照大神(https://github.com/dss886/Android-EmotionInputDetect ...
Android 模仿手机QQ表情输入和表情预览框
闲来无事花了一点空暇时间写了一个模仿Android版手机QQ的表情输入框效果图如下实现步骤一:布局二:录入填充表情三:监听表情的适配器的触摸监听显示出预览框一 .布局我是自己自定一个Ex ...
解决微信小程序输入文本时候页面上移
第1个属性:adjust-position 默认开始,可以忽略,注意兼容性即可. 第2个属性:cursor-spacing.核心属性把这个值设为同input.textarea一样的高度即可,注意单 ...
微信公众帐号开发教程第9篇-QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
[033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
微信公众号最佳实践（ 10.2）回复QQ表情和Emoji表情
回复QQ表情和Emoji表情微信的的文字发送方有一个笑脸表情等表情符,单击该表情后,我们可以发送这些表情,这些表情包括QQ表情和Emoji表情(也叫符号表情) 如图示: 微信用户和微信公众号都能直接 ...
android高仿微信表情输入与键盘输入详解－解决跳闪与表情切换问题
最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个相当困扰我,不过所幸在Github(其中一个不错的开源项目是https://git ...
android高仿微信表情输入与键盘输入详解
转载请注明出处: http://blog.csdn.net/javazejian/article/details/52126391 最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还 ...
android高仿微信表情输入与键盘输入(详细实现分析)
转载请注明出处(请尊重原创!谢谢~): http://blog.csdn.net/javazejian/article/details/52126391 出自[zejian的博客] 表情与键盘的切 ...
java使用微信表情代码_iOS高仿微信表情输入功能代码分享
最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实 ...

微信qq表情输入文本 vue

微信qq表情输入文本 vue相关推荐

最新文章

热门文章