div框仿input框

1，布局

<div class="remarks white-bg">

<span>备注</span>

//contenteditable：属性规定元素内容是否可编辑。

//@input： 一般用于监听事件，只要输入的值变化了就会触发input。

//-webkit-user-select:text；解决苹果手机没有触发的@input事件

<div class="normal" style="-webkit-user-select:text;" ref="divinp" @input="handleInput" contenteditable="true" placeholder="请输入备注"></div>

</div>

2，事件

data() {

    return {divText:'' }

},

mounted（）{

        if(localStorage.getItem('dives') != null){  //跳转页面在返回后重新赋值

                this.divText = this.$refs.divinp.innerHTML = localStorage.getItem('dives')

        }

}，

methods：{

        handleInput(event){

              this.divText = event.target.innerText

              localStorage.setItem('dives',this.divText)

        },

}

3.样式

<style scoped="scoped" lang="scss">

        .remarks{

             height: 100%; padding: 10px 20px; margin-top: 15px;

            .normal{ margin: 15px 0px 0px;  font-size: 14px;  height: auto; min-height: 100px; 

                   width: 100%;  overflow:hidden;  word-break:break-all; }

             .normal:empty::before {      //默认的字体：‘请输入备注’

                 content: attr(placeholder); color: #ABABAB;

              }  

  }

</style>