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类
Sep 08 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
详解Vue 单文件组件的三种写法
Feb 19 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
菜鸟修复电子管记
2021/03/02 无线电
php查看session内容的函数
2008/08/27 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python selenium文件上传方法汇总
2020/11/19 Python
python实现图片文件批量重命名
2020/03/23 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Python 实现自动导入缺失的库
2019/10/29 Python
python 错误处理 assert详解
2020/04/20 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
土木工程专业个人求职信
2013/12/30 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
两只小狮子教学反思
2014/02/05 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL