Vue实现contenteditable元素双向绑定的方法详解

 更新时间:2022年05月06日 10:39:27   作者:诸葛小愚  
contenteditable是所有HTML元素都有的枚举属性,表示元素是否可以被用户编辑。本文将详细介绍如何实现contenteditable元素的双向绑定,需要的可以参考一下

前言

如何实现一个即时通讯的聊天页面,网上有很多的开源或不开源的成品,可以直接使用,或者简单修改后使用。但在实际项目中,直接使用开源的即时通讯往往不是我们想要的,如何自己开发一个聊天页面呢。本文就着学习的目的,从0开始一步步实现一个聊天框的开发,至于消息的发送和接收,这个就得依靠后端大佬了。

在开发前,首先得明确用什么来实现。用input输入框和textare文本输入肯定是不行的,这两个只能输入文本类数据(输入法表情也算),想要在输入框内展示图片、表情包或回复消息等复杂内容时就不行了。灵光一闪,展示图片这些用富文本不就好了,但仔细想想,使用富文本不就引入额外的组件了嘛。想要自己实现一个类似“富文本”输入框,就需要借助contenteditable来实现。

本项目需要解决的问题:

实现一个可输入文本、图片等复杂消息的输入框

实现数据的“双向绑定”

contenteditable

contenteditable是所有HTML元素都有的枚举属性,表示元素是否可以被用户编辑。可用于所有元素,但是不是所有元素对该属性都起作用。如果元素支持该属性,并且设置了contenteditable,则浏览器会修改元素以允许编辑。

关于contenteditable需要注意:

  • true或者空字符串,表示元素可编辑
  • false,表示元素不可编辑
  • 如果没有设置该属性的值,则其值被视为空字符串
  • 如果没有设置该属性或者设置了无效值,则其值默认继承自父元素。如果父元素是可编辑的,那么该子元素也是可编辑的;否则,该子元素不可编辑。
  • 虽然该属性可以设置true、false,但是contenteditable是一个枚举属性而不是布尔属性。

本项目采用对div增加contenteditable属性实现输入框。

基础使用

首先新建一个Vue项目(如果只是实现demo,也可以不创建Vue项目),vue create simple-chat-inputbox,采用默认的即可(新版vue-cli默认新建的是Vue3项目,本项目采用Vue2)。

然后进入项目,npm run serve运行起来,不运行怎么能看到效果呢。

在实际开发前,先做好准备工作:

  • 初始化本地仓库,并关联远端仓库(可选)
  • 取消App.vue中的默认样式,隐藏HelloWorld

新建InputBox.vue,作为输入框组件

...
<div class="input-box" contenteditable="true"></div>
...
<style scoped>
.input-box {
  width: 400px;
  height: 250px;
  border: 1px solid #6e6e6e;
  outline: none; /* 隐藏聚焦时外边框 */
  padding: 10px;
}
</style>

注册并引入InputBox.vue,运行后如下图:

此时就可以在输入框中就可以输入你想输入的内容,但是仅仅是输入,怎么获取值,以及怎么实现双向绑定呢。

进阶使用

自定义事件 — Vue.js (vuejs.org)有一句话:

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,仍然需要在组件的 props 选项里声明 value 这个 prop

根据此特性,我们再来改造一下项目:

虽然div变成了可编辑,但是并不能input一样直接使用v-model来完成双向绑定,但我们可以另辟蹊径,模拟实现双向绑定。首先我们需要创建两个组件:InputBox.vueDivEditable.vue,分别表示父组件和子组件,对外只提供父组件。

对于父组件来说,只需要使用v-model传入值就行。

// InputBox.vue
<template>
  <div>
    <DivEditable v-model="inputContent" />
    <input type="text" v-model="inputContent">
    <div @click="changeValue">父组件修改子组件的值</div>
  </div>
</template>
<script>
import DivEditable from '@/components/DivEditable'
export default {
  name: 'inputBox',
  data() {
    return {
      inputContent: '',
    }
  },
  watch: {
    inputContent(val) {
      console.log('父组件接收到的输入框的值', val);
    }
  },
  components: {
    DivEditable
  },
  methods: {
    changeValue() {
      this.inputContent = this.model1;
    }
  }
}
</script>

子组件处理就相对复杂点,需要接收值并且监听事件:

<template>
  <div ref="editor" class="input-box" contenteditable="true" @input="inputText" @blur="inputBlur" @focus="inputFocus"></div>
</template>
<script>
export default {
  name: 'inputBox',
  props: ['value'], // 父组件v-model绑定的prop
  data() {
    return {
      isBlur: true, // 解决赋值时光标自动定位到起始位置
    }
  },
  watch: {
    value(val) {
      if (this.isBlur) {
        this.$refs.editor.innerHTML = val;
      }
    }
  },
  methods: {
    // 监听输入框内容
    inputText() {
      console.log('子组件输入框的输入内容', this.$refs.editor.innerHTML);
      this.$emit('input', this.$refs.editor.innerHTML);
    },
    inputFocus() {
      this.isBlur = false;
    },
    inputBlur() {
      this.isBlur = true;
    }
  }
}
</script>
<style scoped>
.input-box {
  width: 400px;
  height: 250px;
  border: 1px solid #6e6e6e;
  outline: none; /* 隐藏聚焦时外边框 */
  padding: 10px;
}
</style>

虽然div不可以使用v-model,但是可以监听inputfocusblur等事件。上述代码其实并不复杂,主要就是利用了v-model的特性。有一点需要说明,由于是“双向绑定”,子组件里面输入的值会通过父组件赋值到子组件,导致子组件的光标始终处于起始位置,因此需要增加一个isBlur变量,用来解决这个问题。感兴趣的可以试一下去掉isBlur会是什么效果。

运行结果如下图:

通过修改父组件输入框的值,子组件对应的值也会发生改变;同理,修改子组件也是同样的效果。基本实现了“双向绑定”。

总结

本文基于contenteditable,实现可“双向绑定”的输入框

实现双向绑定,可以动态赋值,或者根据用户的输入实时处理,例如输入@的时候弹出渲染的弹窗,在选择用户后再插入到输入框

项目完整代码可参考 项目地址,接下来将陆续介绍怎么实现粘贴文本、图片,以及对光标的处理。

到此这篇关于Vue实现contenteditable元素双向绑定的方法详解的文章就介绍到这了,更多相关Vue元素双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能

    uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能

    支付功能在我们日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • Vue中跨标签通信详解

    Vue中跨标签通信详解

    这篇文章主要为大家详细介绍了介绍了Vue中跨标签通信的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • vue router使用query和params传参的使用和区别

    vue router使用query和params传参的使用和区别

    本篇文章主要介绍了vue router使用query和params传参的使用和区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue项目环境搭建 启动 移植操作示例及目录结构分析

    vue项目环境搭建 启动 移植操作示例及目录结构分析

    这篇文章主要介绍了vue项目环境搭建、启动、项目移植、项目目录结构分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • Vue无法读取HTMLCollection列表的length问题解决

    Vue无法读取HTMLCollection列表的length问题解决

    这篇文章主要介绍了Vue无法读取HTMLCollection列表的length问题解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 一篇文章告诉你如何编写Vue插件

    一篇文章告诉你如何编写Vue插件

    这篇文章主要为大家介绍了如何编写Vue插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue简介、引入、命令式与声明式编程详解

    Vue简介、引入、命令式与声明式编程详解

    原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式:命令式编程和声明式编程,下面这篇文章主要给大家介绍了关于Vue简介、引入、命令式与声明式编程的相关资料,需要的朋友可以参考下
    2022-10-10
  • vuex中getters的基本用法解读

    vuex中getters的基本用法解读

    这篇文章主要介绍了vuex中getters的基本用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • VUE3.2项目使用Echarts5.4详细步骤总结

    VUE3.2项目使用Echarts5.4详细步骤总结

    Vue3.2是一款非常流行的JavaScript框架,它让在前端领域开发变得更加的便捷,下面这篇文章主要给大家介绍了关于VUE3.2项目使用Echarts5.4的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue监听数组变化源码解析

    Vue监听数组变化源码解析

    这篇文章主要为大家详细解析了Vue监听数组变化的源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论