vue中的可编辑div

可编辑div可能很简单 contenteditable="true" 就能实现了

但是,,,输入一个字的时候,焦点会自动跳到文本开头,很烦的有木有

在网上看见一个大神写的,引用过来,很久了,忘记了出处

将可编辑div单独设置成一个组件

子组件中

<template>

  <div class="edit" placeholder="11"

      v-html="innerText"

      :contenteditable="canEdit"

      @focus="isLocked =true"

      @blur="isLocked =false"

      @input="changeText">

</template>


watch: {

'value'(){

if (!this.isLocked && !this.innerText) {

this.innerText =this.value;

    }

}

},

methods: {

changeText(){

this.$emit('input', this.$el.innerHTML);

  }

},


父组件中只要 v-model='你想要绑定的数据'

对vue不熟悉,,当然这位大神也说看下官方文档v-model这一块

大致是如果父组件的v-model会首先绑定子组件的emit的input方法

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,159评论 0 29
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,784评论 0 6
  • Vue不支持IE8以及以下版本。 想要使用Vue的话可以通过直接下载vue.js,放置到项目中写好路径就可以,或者...
    酥枫阅读 711评论 0 0
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,505评论 0 11
  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,213评论 1 12

友情链接更多精彩内容