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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
es6数值的扩展方法
Mar 11 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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 程式大小
2006/12/06 PHP
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php 发送带附件邮件示例
2014/01/23 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
.NET面试题:什么是反射
2016/09/30 面试题
商业活动邀请函
2014/02/04 职场文书
经典促销广告词大全
2014/03/19 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
竞聘演讲稿
2014/04/24 职场文书
小学语文教研活动总结
2014/07/01 职场文书
学习三严三实心得体会
2014/10/13 职场文书
初中生毕业评语
2014/12/29 职场文书
企业法人任命书
2015/09/21 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js