文本编辑时按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>

 

posted @ 2020-03-20 16:54  日升月恒  阅读(260)  评论(0)    收藏  举报