vue插件实现v-model功能

网络编程 2024/9/1 佚名

3 2 1

最近在开发自己的富文本编辑器插件，在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定。就好像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功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

vuev-model,vuemodel

标签：

vuev-model,vuemodel

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“vue插件实现v-model功能”

vue插件实现v-model功能

暂无“vue插件实现v-model功能”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

vue插件实现v-model功能

vuev-model,vuemodel

vue axios数据请求及vue中使用axios的方法

在Angular中使用JWT认证方法示例

评论“vue插件实现v-model功能”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接