vue.js表情文本输入框组件
文章目录
-
- 参考链接
- 效果图
- 代码
-
- emoji.json
- EmojiText.vue
- 使用
参考链接
JS操作文本域获取光标/指定位置插入
vue.js支持表情输入
ttkwsd博客
效果图
代码
emoji.json
-
表情图片放在public的emoji文件夹下面
-
emoji.json放在src/components/EmojiText文件夹下，文件内容如下：
{ "[酸了]" : "/emoji/suanle.png", "[捂脸]" : "/emoji/wulian.png", "[支持]" : "/emoji/zhichi.png", "[生气]" : "/emoji/shengqi.png", "[捂眼]" : "/emoji/wuyan.png", "[难过]" : "/emoji/nanguo.png", "[无语]" : "/emoji/wuyu.png", "[偷笑]" : "/emoji/touxiao.png", "[tv_微笑]" : "/emoji/tvwx.png", "[嗑瓜子]" : "/emoji/kgz.png", "[原神_喝茶]" : "/emoji/hecha.png", "[笑]" : "/emoji/xiao.png", "[撇嘴]" : "/emoji/piezui.png", "[点赞]" : "/emoji/dianzan.png", "[干杯]" : "/emoji/ganbei.png", "[tv_斜眼笑]" : "/emoji/tvxyx.png", "[大笑]" : "/emoji/daxiao.png", "[拥抱]" : "/emoji/yongbao.png", "[歪嘴]" : "/emoji/waizui.png", "[星星眼]" : "/emoji/xxy.png", "[脱单doge]" : "/emoji/doge.png", "[再见]" : "/emoji/zaijian.png", "[热]" : "/emoji/re.png", "[翻白眼]" : "/emoji/fanby.png", "[尴尬]" : "/emoji/ganga.png", "[笑哭]" : "/emoji/xiaoku.png", "[doge]" : "/emoji/doge.png", "[抱拳]" : "/emoji/baoquan.png", "[冷]" : "/emoji/leng.png", "[喜欢]" : "/emoji/xihuan.png", "[委屈]" : "/emoji/weiqu.png", "[疑惑]" : "/emoji/yihuo.png", "[原神_嗯]" : "/emoji/en.png", "[呲牙]" : "/emoji/ciya.png", "[调皮]" : "/emoji/tiaopi.png", "[疼]" : "/emoji/teng.png", "[生病]" : "/emoji/shengbing.png", "[嘟嘟]" : "/emoji/dudu.png", "[灵魂出窍]" : "/emoji/lhcq.png", "[嘘声]" : "/emoji/xusheng.png", "[哈欠]" : "/emoji/hqian.png", "[大哭]" : "/emoji/daku.png", "[原神_生气]" : "/emoji/kqsq.png", "[微笑]" : "/emoji/simle.png", "[给心心]" : "/emoji/geixx.png", "[喜极而泣]" : "/emoji/xjeq.png", "[嫌弃]" : "/emoji/xianqi.png", "[原神_欸嘿]" : "/emoji/aihei.png", "[原神_哇]" : "/emoji/wa.png", "[加油]" : "/emoji/jiayou.png", "[抠鼻]" : "/emoji/koubi.png", "[滑稽]" : "/emoji/guaji.png", "[傲娇]" : "/emoji/aojiao.png", "[吓]" : "/emoji/xia.png", "[惊喜]" : "/emoji/jingxi.png", "[保佑]" : "/emoji/baoyou.png", "[爱心]" : "/emoji/aixin.png", "[惊讶]" : "/emoji/jingya.png", "[原神_哼]" : "/emoji/heng.png", "[抓狂]" : "/emoji/zhuakuang.png", "[打call]" : "/emoji/dacall.png", "[阴险]" : "/emoji/yinxian.png", "[胜利]" : "/emoji/shengli.png", "[吐]" : "/emoji/tu.png", "[鼓掌]" : "/emoji/guzhang.png", "[脸红]" : "/emoji/lianhong.png", "[墨镜]" : "/emoji/mojing.png", "[OK]" : "/emoji/ok.png", "[辣眼睛]" : "/emoji/lyj.png", "[奋斗]" : "/emoji/fendou.png", "[妙啊]" : "/emoji/miaoa.png", "[呆]" : "/emoji/dai.png", "[囧]" : "/emoji/jiong.png", "[吃瓜]" : "/emoji/chigua.png", "[思考]" : "/emoji/sikao.png", "[哦呼]" : "/emoji/ohu.png" }
EmojiText.vue
里面默认用了iconfont的字体，需要自行引入。
<style lang="scss" scoped>
textarea {
outline: none;
border: none;
background: #f1f2f3;
resize: none;
border-radius: 8px;
padding: 10px 10px;
font-size: 16px;
color: #333333;
border: 1px solid transparent;
}
img {
-webkit-user-drag: none;
}
.avatar {
width: 40px;
height: 40px;
object-fit: cover;
}
.height80 {
height: 80px !important;
}
.height80 textarea {
border: 1px solid #49b1f5;
}
@keyframes scaleUp {
0% {
opacity: 0;
transform: scale(0)
}
100% {
opacity: 1;
transform: scale(1)
}
}
.scaleUp {
animation: scaleUp 0.3s;
transform-origin: 0 0;
}
.comment-area {
display: flex;
align-items: flex-start;
color: #90949e;
.comment-avatar {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
i {
font-size: 40px;
border: 1px solid #c4c4c4;
border-radius: 50%;
}
}
.comment-right {
flex: 1;
display: flex;
height: 60px;
transition: height 0.5s;
position: relative;
.edit-area {
flex: 1;
}
.comment-btn {
background-color: #49b1f5;
cursor: pointer;
width: 64px;
border-radius: 8px;
margin-left: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.comment-tips {
position: absolute;
bottom: -28px;
height: 24px;
width: calc(100% - 72px);
margin-right: 72px;
display: flex;
align-items: center;
&>span:first-child {
width: 20px;
height: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
&.active {
color: #49b1f5;
}
}
.emoji-wrapper {
user-select: none;
position: absolute;
bottom: 0;
top: 28px;
left: 0;
display: flex;
flex-wrap: wrap;
width: 294px;
height: 146px;
overflow-y: auto;
background-color: #fff;
padding: 5px;
border-radius: 6px;
border-radius: 6px;
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 12%);
border: 1px solid rgba(0, 0, 0, .06);
&::before {
content: '';
position: absolute;
}
span.emoji {
width: 30px;
height: 30px;
display: block;
margin: 2px;
cursor: pointer;
padding: 3px;
border-radius: 6px;
img {
width: 100%;
height: 100%;
}
transition: all 0.28s;
&:hover {
background-color: #dddddd;
}
}
}
.triangle {
content: '';
position: absolute;
width: 8px;
height: 8px;
top: 25px;
left: 8px;
background-color: white;
border: 1px solid #f0f0f0;
transform: rotate(45deg);
border-right-color: transparent;
border-bottom-color: transparent;
}
}
}
}
style>
<template>
<div class="comment-area">
<div class="comment-avatar">
<img v-if="avatarUrl" :src="avatarUrl" alt="">
<i v-else class="iconfont icon-touxiang">i>
div>
<div :class="['comment-right', { height80: height80 }]">
<textarea ref="textarea" v-model="textareaContent" @focus="height80 = true" @blur="doBlur"
:placeholder="placeholder" class="edit-area">
textarea>
<div class="comment-btn" @click="postComment">评论div>
<div class="comment-tips">
<span @click="activeEmojiPanel($event, true)"
:class="['iconfont icon-biaoqing', { active: emojiPanelActive }]">
span>
<div v-show="emojiPanelActive">
<div class="emoji-wrapper scaleUp" @click="activeEmojiPanel">
<span @click="addEmoji(emoji)" class="emoji" v-for="emoji, idx in emojiList" :key="idx">
<img :src="emoji.link" alt="">
span>
div>
div>
<div v-show="emojiPanelActive" class="triangle">div>
div>
div>
div>
template>
<script>
/* 表情配置数据 转为 数组 */
import emojiConfig from './emoji.json'
let emojiList = []
for (let key in emojiConfig) {
emojiList.push({
title: key,
link: emojiConfig[key]
})
}
export default {
name: 'EmojiText',
props: {
imgPrefix: { /* 图片路径前缀 */
type:String,
default:''
},
placeholder: { /* 默认占位符 */
type:String,
default: '快快来发表你的观点吧~~'
},
avatarUrl: { /* 头像 */
type:String
},
emojiSize:{
type:Number,
default: null
},
afterComment: { /* 发表评论之后，需要执行的函数 */
type: Function
}
},
data() {
return {
/* 文本框中有文字 或 无文字但是处于焦点状态时 为true */
height80: false,
/* 表情配置数据 */
emojiList,
/* 是否打开表情面板 */
emojiPanelActive: false,
/* 文本框的内容 */
textareaContent: '',
}
},
mounted() {
let _this = this
document.addEventListener('click', function (e) { /* 点击其它地方, 关闭表情面板 */
_this.emojiPanelActive = false
})
},
methods: {
/* 添加表情 */
addEmoji(emoji) {
let textarea = this.$refs['textarea'];
console.log(textarea.selectionStart, textarea.selectionEnd, 'start,end');
// 最开始的位置要记录下，后面要根据它来设置插入文本后，设置光标的位置
let selectionStart1 = textarea.selectionStart
let txtArr = this.textareaContent.split('')
txtArr.splice(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart, emoji.title)
this.textareaContent = txtArr.join('')
/* 一定要放在$nextTick去执行, 上面修改完值后, 还要等vue把修改的数据渲染出来之后, 再去定位光标 */
this.$nextTick(() => {
// 替换文本后, 需要把光标，再次定位到替换后的那个位置，否则，它会回到最前面
textarea.focus()
textarea.setSelectionRange(selectionStart1 + emoji.title.length, selectionStart1 + emoji.title.length)
})
},
/* 激活表情面板, 第二个参数: 是否切换 */
activeEmojiPanel(e, isToggle) {
if (isToggle) {
this.emojiPanelActive = !this.emojiPanelActive
} else {
this.emojiPanelActive = true
}
e.stopPropagation() /* 阻止事件冒泡 */
},
/* 文本域失去焦点时 */
doBlur() {
if (this.textareaContent.length > 0) {
this.height80 = true
} else {
this.height80 = false
}
},
/* 发表评论 */
postComment() {
if(!this.textareaContent) {
return
}
let _this = this
/* 处理表情 */
/* 这个replace函数, 第一个参数是正则表达式, 他回去匹配文本；第二个参数是将匹配的文本传入进行处理的函数，函数的返回值将会替换匹配的文本 */
let result = this.textareaContent.replace(/\[.*?]/g, function (str) {
if(_this.emojiSize) {
return `
${_this.imgPrefix}${emojiConfig[str]}" style="width:${_this.emojiSize}px;height:${_this.emojiSize}"/>`;
} else {
return `${_this.imgPrefix}${emojiConfig[str]}" />`;
}
})
this.$emit('comment',result)
this.textareaContent = ''
this.doBlur()
this.afterComment && this.afterComment
}
},
}
script>
使用
<emoji-text @comment="comment" :emojiSize="20">emoji-text>