通过div去模仿textarea文本 我们可以通过contenteditable属性去改变div,将其改为一个可编辑div
<template>
<div>
<el-form :model="dataform">
<el-form-item label="内容" :label-width="formLabelWidth">
<!-- <el-input type="textarea" :rows="2" v-model="broadcastTemplate"> -->
<div
class="textarea"
ref="textArea"
:contenteditable="true"
v-html="dataform.broadcastTemplate"
></div>
<!-- </el-input> -->
</el-form-item>
<div class="chooseText">
<span
class="item"
v-for="(item, index) in formArray"
:key="index"
@click="insertStr(index, item)"
>插入{{ item }}</span
>
</div>
</el-form>
</div>
</template>
js主要处理数据以及对可编辑div进行数据赋值,我这里是通过使用v-html方法对span标签解析,
这里v-html无法对第三方组件库(例如:饿了吗)中的el-tag标签进行解析,这里大家可以去查询一下资料或者有好的解决办法,可以和我私聊,其他的数据匹配是后端的同事对#xxx#进行匹配,我这里有个bug就是对标签进行删除时发生的bug,希望有大神可以帮忙完善下。
<script>
export default {
data() {
return {
dataform: {
broadcastTemplate: '', // 播报模板
},
VoiceStr: '',
formLabelWidth: '120px',
formArray: [
'姓名',
'手机号',
'住址',
'学校',
],
tempStr: '',
}
},
props: {
voiceData: {
type: Object
},
},
computed: {},
methods: {
cancelVoice() {
this.dataform.voiceBroadcastTime = 3
this.dataform.broadcastTemplate = ''
},
sureVoiceGet() {
this.dataform.broadcastTemplate = this.$refs.textArea.innerText
this.$emit('sureVoice', { flag: false, dataform: this.dataform })
this.updataVoice()
},
insertStr(index, value) {
// this.VoiceStr = this.$refs.textArea.innerHTML + `<span class="itemText" style="color:#1989fa;">#${value}#</span>` + `<span style="color:black;">,</span>`
this.VoiceStr =
this.$refs.textArea.innerHTML +
`<span style="color:black;"> </span>` +
`<span class="itemText" style="color:#1989fa;">#${value}#</span>` +
`<span style="color:black;"> </span>`
this.tempStr = this.VoiceStr.replace('[object HTMLDivElement]', '')
this.dataform.broadcastTemplate = this.tempStr
},
updataVoice() {
this.dataform = {
voiceBroadcastTime: 3,
broadcastTemplate: '',
}
},
},
created() {
console.log(this.voiceData)
this.dataform.voiceBroadcastTime = this.voiceData.voiceBroadcastTime
this.dataform.broadcastTemplate = this.voiceData.broadcastTemplate
},
}
</script>
下面就是简单的对样式的一些处理,我使用的scss,大家可以改为其他的预处理语言 。第一次发不喜勿喷。谢谢大家
<!-- 可使用less为预处理语言 -->
<style scoped lang="scss">
.textarea {
width: 300px;
height: 60px;
border: 1px solid #cbd8e8;
border-radius: 5px;
line-height: 25px;
resize: both;
overflow: auto;
}
.chooseText {
margin-left: 81px;
width: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.item {
width: 130px;
text-align: center;
margin: 5px 0px;
color: #1989fa;
display: flex;
}
</style>