<template>
<div>
<div contenteditable="true" v-html="nameTxt" @blur="nameTxt = $event.target.innerHTML.replace(reg,'')" class="inp-div">
<div></div>
<!-- 加一个空div解决IE兼容 -->
</div>
<!-- $event.target.innerHTML 可用正则表达式去掉复制文字的style,只保留标签 -->
<div @click="entEvt">按钮</div>
</div>
</template>
<script>
export default {
data () {
return {
reg: /style\s*?=\s*?(['"])[\s\S]*?\1/g, //取消复制数据的样式
nameTxt: '文本框输入换行'
}
},
methods: {
entEvt(e){
console.log('target',this.nameTxt)
},
}
}
</script>
<style>
*{
padding: 0;
margin: 0;
}
.inp-div{
height: 90px;
width: 100%;
border: 1px solid;
text-align: left;
line-height: 16px;
font-size: 14px;
}
</style>