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>