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)的子元素,父元素的大小即为子元素的大小。


  • 2020-12-07 16:15:46

    RabbitMQ详解

    当前市面上mq的产品很多,比如RabbitMQ、Kafka、ActiveMQ、ZeroMQ和阿里巴巴捐献给Apache的RocketMQ。甚至连redis这种NoSQL都支持MQ的功能。 ActiveMQ ActiveMQ是apache出品,最流行的,能力强劲的开源消息总线,并且它一个完全支持JMS规范的消息中间件。其丰富的API、多种集群构建模式使得它成为业界老牌消息中间件,在中小型企业中应用广泛。

  • 2020-12-07 16:17:53

    nodejs用redis实现队列操作

    其实nodejs实现队列的方式又很多中,也有很多开源的插件和队列数据库可以使用,但是呢,如果我们一个简单的项目,完全可以使用redis来实现队列, 这样再不增加技术难度的同事,我们也就可以完美的实现一个队列

  • 2020-12-07 22:02:44

    intellij idea远程开发的几个想法

    我之前是用idea上面自带的stfp来做的本地开发同步到linux服务器编译,但是我发现这个如果多个客户端同时开发,或者多个同事一起开发,服务器上的就不能更新到本地。是不能增量更新到本地,必须全部下载,比对下载也行,但是工程量打了就特别慢。

  • 2020-12-07 22:06:13

    System Extension Blocked - warning

    After upgrading your macOS computer to High Sierra 10.13.4 or higher (starting in April 2018), you may see a message about a System Extension Blocked. At Williams we have seen this warning appear for these programs:

  • 2020-12-08 08:57:12

    win10上使用win-sshfs

    首先在GitHub上下载DokanSetup-1.0.5.1000和WinSSHFS-1.6.1.13-devel 注意:Dokan不能使用最新的版本,得使用1.0.5版本。要不win-sshfs会报Dokan版本错误的问题。(win10版本)

  • 2020-12-08 11:51:54

    Ubuntu安装Node.js和npm

    Node.js是基于Chrome的JavaScript构建的跨平台JavaScript运行时环境,npm是Node.js的默认程序包管理器,也是世界上最大的软件注册表。本篇文章展示了三种在Ubuntu 20.04服务器上安装Node.js和npm的方法。