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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
vue中实现图片压缩 file文件的方法
May 28 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
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Fiddler如何抓取手机APP数据包
2016/01/22 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
售后服务经理岗位职责范本
2014/02/22 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
村党支部换届选举方案
2014/05/02 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
趣味运动会开幕词
2015/01/28 职场文书
青年联谊会致辞
2015/07/31 职场文书
物业保洁员管理制度
2015/08/05 职场文书
会议室管理制度范本
2015/08/06 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js