Vue+element完成带表情评论功能
想实现一个带表情评论的功能，但是一搜索都是JQ的一些插件，使用emojiVue这个组件（https://github.com/shershen08/emoji-vue），出现了光标老是跑到第一个的情况，搜了一圈也没找到好的解决办法，于是自己进行了编写，新手入门请多谅解。
- html部分采用了el-input+el-popover+el-tabs
<template>
<div class="emoji-chat">
<el-input
class="chatText"
id="textarea"
autofocus
v-model="textarea"
type="textarea"
autosize
:placeholder="placeholder"
:maxlength="maxlength"
:show-word-limit="wordLimit"
></el-input>
<div class="chat-emoji">
<el-popover
:placement="placement"
:width="width"
:trigger="trigger"
popper-class="emoji-popover"
>
<div class="emoji-list">
<el-tabs v-model="activeName">
<el-tab-pane label="默认表情" name="first">
<a
href="javascript:void(0);"
@click="getEmoji(index)"
v-for="(item,index) in faceList"
:key="index"
class="emoji-item"
>{{item}}</a>
</el-tab-pane>
</el-tabs>
</div>
<i class="iconfont icon-biaoqing-xue" slot="reference"></i>
</el-popover>
</div>
</div>
</template>
- css部分
<style lang="less" scoped>
.emoji-chat {
display: flex;
.chatText {
width: 100%;
}
.chat-emoji {
padding: 0 10px;
font-size: 25px;
i {
cursor: pointer;
font-size: 20px;
}
}
}
.emoji-list {
display: flex;
flex-wrap: wrap;
padding: 5px;
}
.emoji-item {
width: 10%;
font-size: 20px;
text-align: center;
}
/*包含以下四种的链接*/
.emoji-item {
text-decoration: none;
}
/*正常的未被访问过的链接*/
.emoji-item:link {
text-decoration: none;
}
/*已经访问过的链接*/
.emoji-item:visited {
text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emoji-item:hover {
text-decoration: none;
}
/* 正在点击的链接*/
.emoji-item:active {
text-decoration: none;
}
</style>
- js部分
<script>
export default {
props: {
// 输入框默认文字
placeholder: {
type: String,
default: "请输入评论内容"
},
// 传过来的表情库
faceList: {
type: Array
},
// 想要回显的值
inputValue: {
type: String
},
// 限制输入框的最大长度
maxlength: {
type: Number,
default: 200
},
// 是否显示限制字数
wordLimit: {
type: Boolean,
default: true
},
// 表情框的宽度
width: {
type: Number,
default: 400
},
// 表情框显示位置
placement: {
type: String,
default: "bottom"
},
// 表情框触发方式
trigger: {
type: String,
default: "click"
}
},
data() {
return {
textarea: ""
};
},
watch: {
inputValue(newVal, oldVal) {
this.textarea = newVal;
},
textarea(newVal, oldVal) {
this.valueChange(newVal);
}
},
methods: {
// 获取用户点击之后的标签 ，存放到输入框内
getEmoji(index) {
var textElement = document.getElementById("textarea");
this.changeSelectEmoji(this.faceList[index]);
this.textarea = textElement.value; // 要同步data中的数据
return;
},
changeSelectEmoji(str) {
var textElement = document.getElementById("textarea");
// 非IE浏览器
if (window.getSelection) {
textElement.setRangeText(str);
textElement.selectionStart += str.length;
textElement.focus();
} else if (document.selection) {
// IE浏览器
textElement.focus();
var sel = document.selection.createRange();
sel.text = str;
}
},
valueChange(e) {
this.$emit("input", e);
}
}
};
</script>
- 使用
import emoticons from "./emoticons.vue";
components: {
emoticons
},
<div class="my-reply">
<el-avatar class="header-img" :size="35" :src="'http://172.22.14.119:83'+myHeader"></el-avatar>
<emoticons
class="reply-info"
@input="onInput($event)"
:faceList="faceList"
:inputValue="input"
:maxlength="200"
:placeholder="'请输入评论内容'"
:wordLimit="true"
:placement="'top-start'"
:width="400"
:trigger="'click'"
></emoticons>
<div class="reply-btn-box">
<el-button class="reply-btn" size="medium" @click="sendComment" type="primary">发表评论</el-button>
</div>
</div>
如有不足之处请指出，感谢大家！