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-12-12 14:19:32

    laravel自定义分页LengthAwarePaginator

    有时候我们使用larave提供的后台分页数据库查询,有时候限制太多,我们需要自己定制分页功能。 下面是我给大家一个例子,我们可以根据例子,制作自己的分页功能。

  • 2019-12-14 21:04:05

    聊聊keep-alive组件的使用及其实现原理

    keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。 它提供了include与exclude两个属性,允许组件有条件地进行缓存。

  • 2019-12-14 21:06:58

    vue----keep-alive缓存,activated,deactivated两个生命周期函数,,meta实现缓存

    如果没有缓存,每点击一次导航,内容区就会创建一个组件,该组件会经历整个生命周期,每点击一次,就会创建一个组件,比较浪费性能, 这时,我们就要考虑到是否能将点击过的已创建的组件进行缓存,当再次点击已访问过的组件时,这时,就会从缓存中获取该组件,而不会重新创建,

  • 2019-12-17 11:56:05

    ffmpeg concat video and mix audio,ffmpeg简单快速的合并视频

    在ffmpeg中,官网给出两种连接媒体文件(音频、视频、etc..)的解决方案。 the concat "demuxer" the concat "protocol" 对比而言, demuxer更加灵活一些,需要媒体文件是属于相同的编解码器,但是可以属于不同的容器格式(mp3,wav, mp4, mov, etc..). 而protocol只适用于少数集中容器格式。