文本编辑时按enter键换行,保存后请求数据可换行显示
<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>