DDR爱好者之家

vue插件实现v-model功能
站长资源 2024/11/19 佚名
65 1538
DDR爱好者之家 Design By 杰米

最近在开发自己的富文本编辑器插件，在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定。就好像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 "htmlcode">



 <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
 },





需要给插件添加两个方法判断编辑器是否正在编辑内容，如果正在编辑中父组件绑定的值不让他重新渲染子组件，这样编辑器中的内容就不会重新赋值了，这样光标就不会每次都跑到前面去了。


小小的总结一下：


"color: #ff0000">总结


以上所述是小编给大家介绍的vue插件实现v-model功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米