vue2 实现 div contenteditable="true" 类似于 v-model 的效果

2020-03-03 09:43:48

参考地址 vue2 实现 div contenteditable="true" 类似于 v-model 的效果

问题

在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable="true" 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那么问题就来了,输入是非常需要双向绑定的,这里的双向数据绑定该如何实现?

解决思路一:自定义指令

当然,说在这一段的前面,这种解决方式在 vue2 中是不行的,为什么这么说,因为现在去搜索这个问题绝大多数的搜索结果是这个,所以放在前面。

实现的原理以及为什么不能用了

原理:自定义一个双向数据绑定的指令,代码如下:

Vue.directive('demo', {     twoWay: true,     bind: function () {         this.handler = function () {             this.set(this.el.innerHTML)         }.bind(this)         this.el.addEventListener('input', this.handler)     },     update: function (newValue, oldValue) {         this.el.innerHTML = newValue || ''     },     unbind: function () {         this.el.removeEventListener('input', this.handler)     } })

至于 this 下的这些方法,在 vue 官网上可能不太容易找到,因为这些是 vue1 中的内容,而在 vue2 中已经被移除了。所以在 vue2 中我们是不能这么干的,当然如果你使用的是 vue1 那么完全没问题,直接拿去用即可。

解决思路二:使用组件

单独声明一个组件,在组件内部处理数据(也就是innerHTML),并将数据返回给父组件。
代码如下:

<template>     <div contenteditable="true"          v-html="innerText"          @input="changeText"></div> </template> <script>     export default {         props: ['value'],         data(){             return {innerText:this.value}         },         methods:{             changeText(){                 this.innerText = this.$el.innerHTML;                 this.$emit('input',this.innerText);             }         }     } </script>

然后在父组件中直接使用 v-model 就可以了(这里我把组件名称定义成了 v-edit-div)。

<template>     <div>         <v-edit-div v-model='text'></v-edit-div>         <span>{{text}}</span>     </div> </template> <script>     export default {         data(){             return {                 text:'改一下试一试',             }         }     } </script>

至于为什么可以直接用 v-model ,看官网的 API 吧。
v-model 传送门 使用自定义事件的表单输入组件,那一章节。

问题解决。

=============== 分割线:更新于17-08-25 =====================

忙的不行,之前在评论区也有发现这个例子其实会有不少的问题,包括如何实现异步数据的刷新,更新值之后光标定位的问题等等,在考虑了异步数据和光标问题后,有了以下的这个版本

<template>     <div class="edit-div"          v-html="innerText"          :contenteditable="canEdit"          @focus="isLocked = true"          @blur="isLocked = false"          @input="changeText">     </div> </template> <script type="text/ecmascript-6">     export default{         name: 'editDiv',         props: {             value: {                 type: String,                 default: ''             },             canEdit: {                 type: Boolean,                 default: true             }         },         data(){             return {                 innerText: this.value,                 isLocked: false             }         },         watch: {             'value'(){                 if (!this.isLocked || !this.innerText) {                     this.innerText = this.value;                 }             }         },         methods: {             changeText(){                 this.$emit('input', this.$el.innerHTML);             }         }     } </script> <style lang="scss" rel="stylesheet/scss">     .edit-div {         width: 100%;         height: 100%;         overflow: auto;         word-break: break-all;         outline: none;         user-select: text;         white-space: pre-wrap;         text-align: left;         &[contenteditable=true]{             user-modify: read-write-plaintext-only;             &:empty:before {                 content: attr(placeholder);                 display: block;                 color: #ccc;             }         }     } </style>

这个版本是在项目中最终使用的版本,需要用的直接拿走用即可。
注:

  1. canEdit 标志这个div是否是可编辑的,在父组件直接使用 v-model 即可。

  2. 该组件应该是一个div元素(也不一定非要是div)的子元素,父元素的大小即为子元素的大小。


  • 2019-02-01 08:43:59

    JS 随机排序算法

    使用JS编写一个方法 让数组中的元素每次刷新随机排列

  • 2019-02-12 16:36:23

    图片工具GraphicsMagick的安装配置与基本使用

    GraphicsMagick是一个短小精悍的的图片处理工具和库集合。对于Java开发者来说,常用的图片处理工具有3个,JDK自带的图片处理库,ImageMagick,GraphicsMagick。JDK自带的图片处理库,虽稳定简单,性能却比较差;ImageMagick是目前最流行的图片处理工具,它的功能非常丰富;GraphicsMagick的功能略逊于ImageMagick,但是它的效率更强悍,但大多数情况下,GM的功能已经足够使用了。

  • 2019-02-15 10:35:31

    使用ffmpeg转码m3u8并播放

    m3u8是苹果公司开发的一项新型播放格式,这种播放格式支持目前市面的windows、androis、ios设备主流的浏览器,同样的视频文件既可以在flash环境播放,又能在无flash的html5环境播放,它的优势还不止于此,它可以实现多种码率在不同网速下的自动切换,网速好自动切换高清晰度视频,网速慢自动播放低清晰度文件,还可以实现流加密(视频文件本身加密)、分段下载播放、任意时间点拖拽播放、随机视频文件广告插入等等优势,所以公司打算是用m3u8格式作为视频格式。 --------------------- 作者:悠闲咖啡007 来源:CSDN 原文:https://blog.csdn.net/psh18513234633/article/details/79312607 版权声明:本文为博主原创文章,转载请附上博文链接!

  • 2019-02-15 10:36:45

    将MP4转成m3u8

    网上很多垃圾文章推荐segmenter工具,但用的时候,3.5G的ts文件丢了一半的数据,于是想到了ffmpeg转。