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 对象模型 执行模型
Dec 06 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
JavaScript网页定位详解
Jan 13 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
Javascript实现关闭广告效果
Jan 29 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
在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获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
JavaScript中的细节分析
2012/06/30 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python中的pack和unpack的使用
2018/03/12 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
团队精神演讲稿
2013/12/31 职场文书
财务部经理岗位职责
2014/02/03 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
个人自我剖析材料
2014/09/30 职场文书
2014年工人工作总结
2014/11/25 职场文书
董事长助理岗位职责
2015/02/11 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript