<template>
|
<div class="emojiInput">
|
<div class="chatIcon">
|
<el-popover placement="top-start" width="400" trigger="click" class="emoBox">
|
<div class="emotionList">
|
<span @click="getEmo(index)" v-for="(item,index) in faceList" :key="index"
|
class="emotionItem">{{item}}</span>
|
</div>
|
<img class="emotionSelect" slot="reference" src="../../assets/img/biaoqing.png" />
|
</el-popover>
|
</div>
|
<el-input v-model="textarea" class="chatText" resize="none" type="textarea" id='textarea'
|
:autosize="{minRows:4,maxRows:8}" @keyup.enter.native="sendInfo"
|
:maxlength="maxlength" show-word-limit></el-input>
|
</div>
|
</template>
|
|
<script>
|
import emoji from '@/utils/emoji.js'
|
export default {
|
props: {
|
// 设置输入框字体
|
maxlength: {
|
type: Number,
|
default: 1000
|
},
|
content: {
|
type: String,
|
default: null
|
}
|
},
|
data() {
|
return {
|
faceList: [],
|
textarea: null
|
}
|
},
|
mounted() {
|
for (const i in emoji) {
|
this.faceList.push(emoji[i].char)
|
}
|
},
|
watch: {
|
content(newValue, oldValue) {
|
this.textarea = newValue
|
},
|
textarea(newValue, oldValue) {
|
this.$emit('update:content', newValue)
|
}
|
},
|
methods: {
|
getEmo(index) {
|
var textArea = document.getElementById('textarea')
|
function changeSelectedText(obj, str) {
|
if (window.getSelection) {
|
// 非IE浏览器
|
textArea.setRangeText(str)
|
// 在未选中文本的情况下，重新设置光标位置
|
textArea.selectionStart += str.length
|
textArea.focus()
|
} else if (document.selection) {
|
// IE浏览器
|
obj.focus()
|
var sel = document.selection.createRange()
|
sel.text = str
|
}
|
}
|
changeSelectedText(textArea, this.faceList[index])
|
this.textarea = textArea.value// 要同步data中的数据
|
},
|
// 回车健事件
|
sendInfo() {
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.emojiInput {
|
.el-popover {
|
height: 200px;
|
width: 400px;
|
overflow: scroll;
|
overflow-x: auto;
|
}
|
.chatIcon {
|
font-size: 25px;
|
.emotionSelect {
|
cursor: pointer;
|
}
|
}
|
.el-textarea {
|
.el-input__count {
|
bottom: -30px;
|
}
|
}
|
}
|
.emotionList {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 5px;
|
}
|
.emotionItem {
|
width: 10%;
|
font-size: 20px;
|
text-align: center;
|
cursor: pointer !important;
|
&:hover {
|
background: #f56c6c;
|
}
|
}
|
</style>
|
