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-06 20:38:30

    intellij idea远程开发remote

    开发时一般的平台都是windows,但windows对开发极其不友好,一般都会在本地开启虚拟机,安装上linux环境进行项目的部署测试。下面介绍一种windows主机与linux虚拟机代码同步的方法。这个工具适用于jerbrains公司旗下的很多产品,比如idea、webstrom、phpstrom等。但是要注意你安装的IDE必须是专业版的,社区版的IDE是没有这个代码同步功能的哦!

  • 2020-12-07 05:46:56

    npm设置和取消代理的方法

    有时候是设置了全局代理对npm并不生效,不如直接给npm设置代理,至少在mac电脑我是有这种感觉的。

  • 2020-12-07 15:04:03

    node开发邮件系统总结

    因为multipart这种形式比较复杂,因此要利用boundary分割符,将邮件体分割成不同段来进行解析,boundary分为父段和子段,父段一般出现0次或1次,出现在末尾,每个子段中也有content-type和boundary,需要在进行解析,如果遇到i,iii里面的情况可直接解析,如果遇到ii中的情况,再按ii中的步骤进行解析

  • 2020-12-07 15:17:45

    email-templates + mjml 发送邮件

    mjml 是一个很不错的响应式邮件html 内容标签库,email-templates 是一个灵活强大的邮件发送框架,两者集成起来我们 可以设计灵活强大的邮件发送系统,以下是一个简单的集成使用,实际使用还有好多地方需要完善

  • 2020-12-07 15:19:00

    响应式邮件的编写插件介绍mjml

    以前做项目碰到发邮件的需求,邮件模板的编辑就是一件头疼的事。因为虽说邮件是支持 HTML 的,但是确是 HTML 子集程度的支持,所以存在必须通过 <table> 排版的恶心之处,还有很多兼容性的坑。本质上是各家邮件商的标准有差异吧。

  • 2020-12-07 16:14:22

    nodejs队列实现amqplib,rabbitmq

    其中StartConsumer 会在项目启动时启动,在整个生命周期中一直保持监听状态,在程序结束时mq的链接关闭。需要注意的是 noAck 这个参数,当为false是表示消息出队后不会自动删除,如果设置成true,则无论消息处理成功与否此消息会被删除。注意到在消息不成功是,调用了ch.nack(msg)),此方法是将消息重新入队。

  • 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来实现队列, 这样再不增加技术难度的同事,我们也就可以完美的实现一个队列