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-06-06 16:14:50

    intent-filter的action,category,data匹配规则

    我们知道有两种方式来启动Activity,显示调用和隐式调用。当使用隐式调用时,又会涉及到IntentFilter的匹配规则。我确信大多数开发者很少关注隐式调用,因为平时开发中用到大多数是显示调用。例如:用Intent直接打开一个Activity,或者用Intent通过包名等其他信息打开另外一个应用等。而隐式调用则使用的比较少,当然也不是完全不使用。例如:当我们需要打开浏览器访问某个链接时,手机上可能存在多个浏览器,我们也无法拿到某一个浏览器的包名,那么一般情况下我们会写如下代码:

  • 2019-06-06 17:57:57

    input【type="checkbox"】标签与字体对齐

    今天分享一个比较实用的技巧,在实际项目中我们会经常遇到表单的input标签多选和单选的问题,但是往往由于标签自身的样式和我们项目的风格很不搭调,就不能实现了,今天就来告诉大家怎么去实现吧。

  • 2019-06-10 11:54:52

    html.div禁用点击事件

    今天做项目中偶然误把元素加上了pointer-events属性,结果导致后来在js中给该元素加点击事件不能用,检查了半天才发现是这个属性的问题。之前没有好好研究,于是决定仔细研究一下。

  • 2019-06-12 22:34:16

    PHP身份证号打星号

    一个很简单的问题,想把身份证的号生日的4位隐藏,一开始查函数居然没有看到,然后用了好几个函数处理,觉得太麻烦就上网搜,后来发现有一个函数就能直接处理,我居然没看到~~初学者~~

  • 2019-06-13 10:09:51

    java(Android)跨Module调用对应类方法需求解决方案

    在开发组件化项目中,遇到一个这样的问题,两个不同的Module相互之间没有任何直接依赖关系,现在需求是需要在Module_A中调用Module_B中的某个类的方法,以下为解决此问题的方法;

  • 2019-06-13 11:31:32

    Android Studio接入ARouter以及简单使用

    你可能会说如果我的A module依赖了 B module,那么只要在B里面配置是不是就可以了?绝对不行!无论module之间关系如何,必须要同样配置!包括主项目和library项目!