vue插件实现插件实现v-model功能功能
最近在开发自己的富文本编辑器插件，在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑
定。就好像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
}
资源评论
weixin_38720762
- 粉丝: 5
- 资源: 943
最新资源
- cd35f259ee4bbfe81357c1aa7f4434e6.mp3
- 机器学习金融反欺诈项目数据
- 虚拟串口VSPXD软件(支持64Bit)
- 多边形框架物体检测18-YOLO（v5至v11）、COCO、CreateML、TFRecord、VOC数据集合集.rar
- Python个人财务管理系统（Personal Finance Management System）
- 大数据硬核技能进阶 Spark3实战智能物业运营系统完结26章
- CHM助手：制作CHM联机帮助的插件使用手册
- SecureCRT.9.5.1.3272.v2.CN.zip
- 人大金仓(KingBase)备份还原文档
- 完结17章SpringBoot3+Vue3 开发高并发秒杀抢购系统
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
