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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
详解Angular如何正确的操作DOM
Jul 06 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
php中opendir函数用法实例
2014/11/15 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python3爬虫学习入门教程
2018/12/11 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
高二政治教学反思
2014/02/01 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
心理学专业求职信
2014/06/16 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Redis入门教程详解
2021/08/30 Redis