vue2 实现 div contenteditable="true" 类似于 v

jokester 发布于2019-08-20 14:07 / 2719人阅读

摘要：解决思路二使用组件多带带声明一个组件，在组件内部处理数据也就是，并将数据返回给父组件。该组件应该是一个元素也不一定非要是的子元素，父元素的大小即为子元素的大小。

问题

在 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），并将数据返回给父组件。
代码如下：

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

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

问题解决。

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

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

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

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

该组件应该是一个div元素（也不一定非要是div）的子元素，父元素的大小即为子元素的大小。

云服务器 GPU云服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81426.html

关于vue2非表单元素使用contenteditable=&quot;true&quot;(富文本编

摘要：最近自行研究的开发后端用前端用用户消息发送框需要用到富文本编辑器我需要的东西很简单可以写文字可以发表情图片和文件可以发表情图片和文件可以黏贴剪切板的文字和图片一般富文本编辑器有更丰富的格式化工具功能太多余定制也麻烦干脆自己开发说干就干上代码最近自行研究chat的开发,后端用go,前端用vue,用户消息发送框需要用到富文本编辑器,我需要的东西很简单: 可以写文字,可以发表情、图片和文...

Drummor 2019-08-21 17:46 评论0 收藏0
vue2模拟vue-element-admin手写角色权限的实现

　　权限　　路由权限　　静态路由：固定的路由，没有权限。如login页面　　动态路由：根据不同的角色，后端返回不同的路由接口。通过meta中的roles去做筛选　　store存储路由　　3　　//地址：store/modules/permission　　import{routesasconstantRoutes}from'@/router' 　　　　//根据meta.roles去...

3403771864 2022-09-25 22:04 评论0 收藏0
剖析Vue3中侦听器watch的使用教程

　　上一节我们简单的介绍了一下vue3 项目中的计算属性，这一节我们继续 vue3 的基础知识讲解。　　这一节我们来说 vue3 的侦听器。　　学过 vue2 的小伙伴们肯定学习过侦听器，主要是用来监听页面数据或者是路由的变化，来执行相应的操作，在 vue3里面呢，也有侦听器的用法，功能基本一样，换汤不换药的东西。侦听器是常用的 Vue API 之一，它用于监听一个数据并在数据变动时做一些自定义...

3403771864 2023-03-26 17:14 评论0 收藏0
HTML contenteditable属性

摘要：前言之前一直没有留意到有这个属性，今天突然看到特意记录一下它的用法和实际用途用法为了某个使元素可编辑，你所要做的就是在标签上设置属性，它几乎支持所有的元素。前言之前一直没有留意到有contenteditable这个属性，今天突然看到特意记录一下它的用法和实际用途；用法为了某个使元素可编辑，你所要做的就是在html标签上设置contenteditable属性，它几乎支持所...

huayeluoliuhen 2019-08-02 16:18 评论0 收藏0