vue插件实现v-model功能


Posted in Javascript onSeptember 10, 2018

最近在开发自己的富文本编辑器插件,在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定。就好像input中v-model的功能类似。

v-model语法:

在vue中我们实现表单的双向绑定时代码一般时这样写的:

<input type="text" v-model="value" style="line-height: 30px;">
data () {
 return {
 value: '222'
 }
}

可以通过这样的方式实现value的值和输入框中的值双向绑定了。

事实上v-model只是一个语法糖,他的真正实现是这样的:

<input type="text" :value="value" @input="value=$event.target.value">

以上代码分几个步骤:

1.将输入框的值绑定到变量上,这个是单向绑定,意味着改变变量的值可以改变输入框的值,但是改变输入框的值不能改变变量的值

2.监听input事件(input输入框都有该事件,当输入内容时自动触发该事件),当输入框输入内容就单向改变变量的值了

自定义编辑器双向绑定

这个是插件的写法:content是双向绑定的值 height是指编辑器的高度

<editor v-model="content" :height="editorHeight"></editor>

插件vue的写法:

<div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText"></div>

在div中设置contenteditable属性时把div设置成可编辑的输入框,v-html是给编辑器单向绑定变量contentHtml值,input方法获取编辑器的内容并且返回给父元素的input方法:

changeText () {
  const htmlString = this.$refs.editor.innerHTML
  this.$emit('input', htmlString)
 },

其他问题:

光是这样是不能够解决问题的,编辑器你会出现每次输入的时候都会跳到开头位置:怎么解决呢?不多说上代码:

props: {
 value: {
  type: String,
  default: ''
 },
 height: {
  type: String,
  default: 'auto'
 }
 },
data () {
 return {
  // 编辑器内容
  contentHtml: this.value || this.value === 0 ? this.value : '<div><br></div>',
  // 是否在编译
  isLocked: true,
  // 光标位置
  lastEditRange: null
 }
 },
 watch: {
 value (val) {
  if (!this.isLocked) {
  this.contentHtml = this.value;
  }
 }
 }

写到这里大家应该一头雾水这样写有什么用:因为还少了一些代码:

<div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText" @focus="focusEditor" @blur="blurEditor"></div>
 // 编辑器失去焦点
 blurEditor (event) {
  this.isLocked = false
 },
 // 编辑器获得焦点
 focusEditor (event) {
  this.isLocked = true
 },

需要给插件添加两个方法判断编辑器是否正在编辑内容,如果正在编辑中父组件绑定的值不让他重新渲染子组件,这样编辑器中的内容就不会重新赋值了,这样光标就不会每次都跑到前面去了。

小小的总结一下:

•v-bind只能实现单向绑定
•v-model(v-bind+触发的input事件)实现双向绑定

总结

以上所述是小编给大家介绍的vue插件实现v-model功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
在Angular中使用JWT认证方法示例
Sep 10 #Javascript
详解vue-router传参的两种方式
Sep 10 #Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 #Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 #Javascript
在Vue 中使用Typescript的示例代码
Sep 10 #Javascript
ES6使用export和import实现模块化的方法
Sep 10 #Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 #Javascript
You might like
Cannot modify header information错误解决方法
2008/10/08 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python数据结构之二叉树的建立实例
2014/04/29 Python
Python中请使用isinstance()判断变量类型
2014/08/25 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Python datetime模块使用方法小结
2020/06/18 Python
opencv 阈值分割的具体使用
2020/07/08 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
为什么要使用servlet
2016/01/17 面试题
J2EE系统只能是基于web
2015/09/08 面试题
英文自荐信
2013/12/19 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
自我鉴定总结
2014/03/24 职场文书
生活部的活动方案
2014/08/19 职场文书
如何写辞职书
2015/02/26 职场文书