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 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
Javascript中Eval函数的使用说明
Oct 11 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 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&amp;mysql(五)
2006/10/09 PHP
PHP仿盗链代码
2012/06/03 PHP
php 获取本地IP代码
2013/06/23 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
JS实现拼图游戏
2021/01/29 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
5款非常棒的Python工具
2018/01/05 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python两个list[]相加的实现方法
2020/09/23 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
Order by的几种用法
2013/06/16 面试题
史学专业毕业生求职信
2014/05/09 职场文书
环境整治工作方案
2014/05/18 职场文书
质量月口号
2014/06/20 职场文书
授权委托书协议书
2014/10/16 职场文书
个人求职信格式范文
2015/03/20 职场文书
golang json数组拼接的实例
2021/04/28 Golang
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android