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自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
vue实现五子棋游戏
May 28 Javascript
vuex的使用步骤
Jan 06 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的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP的加密方式及原理
2012/06/14 PHP
php反射应用示例
2014/02/25 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
vue实现树形菜单效果
2018/03/19 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
angularjs模态框的使用代码实例
2019/12/20 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
进一步了解Python中的XML 工具
2015/04/13 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
基于pandas中expand的作用详解
2019/12/17 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
PHP面试题及答案一
2012/06/18 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
法律进学校实施方案
2014/03/15 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL
Hive导入csv文件示例
2022/06/25 数据库