Vue實(shí)現(xiàn)contenteditable元素雙向綁定的方法詳解

更新時(shí)間：2022年05月06日 10:39:27 作者：諸葛小愚

contenteditable是所有HTML元素都有的枚舉屬性，表示元素是否可以被用戶編輯。本文將詳細(xì)介紹如何實(shí)現(xiàn)contenteditable元素的雙向綁定，需要的可以參考一下

前言

如何實(shí)現(xiàn)一個(gè)即時(shí)通訊的聊天頁面，網(wǎng)上有很多的開源或不開源的成品，可以直接使用，或者簡單修改后使用。但在實(shí)際項(xiàng)目中，直接使用開源的即時(shí)通訊往往不是我們想要的，如何自己開發(fā)一個(gè)聊天頁面呢。本文就著學(xué)習(xí)的目的，從0開始一步步實(shí)現(xiàn)一個(gè)聊天框的開發(fā)，至于消息的發(fā)送和接收，這個(gè)就得依靠后端大佬了。

在開發(fā)前，首先得明確用什么來實(shí)現(xiàn)。用input輸入框和textare文本輸入肯定是不行的，這兩個(gè)只能輸入文本類數(shù)據(jù)（輸入法表情也算），想要在輸入框內(nèi)展示圖片、表情包或回復(fù)消息等復(fù)雜內(nèi)容時(shí)就不行了。靈光一閃，展示圖片這些用富文本不就好了，但仔細(xì)想想，使用富文本不就引入額外的組件了嘛。想要自己實(shí)現(xiàn)一個(gè)類似“富文本”輸入框，就需要借助contenteditable來實(shí)現(xiàn)。

本項(xiàng)目需要解決的問題：

實(shí)現(xiàn)一個(gè)可輸入文本、圖片等復(fù)雜消息的輸入框

實(shí)現(xiàn)數(shù)據(jù)的“雙向綁定”

contenteditable

contenteditable是所有HTML元素都有的枚舉屬性，表示元素是否可以被用戶編輯?？捎糜谒性?，但是不是所有元素對該屬性都起作用。如果元素支持該屬性，并且設(shè)置了contenteditable，則瀏覽器會(huì)修改元素以允許編輯。

關(guān)于contenteditable需要注意：

true或者空字符串，表示元素可編輯
false，表示元素不可編輯
如果沒有設(shè)置該屬性的值，則其值被視為空字符串
如果沒有設(shè)置該屬性或者設(shè)置了無效值，則其值默認(rèn)繼承自父元素。如果父元素是可編輯的，那么該子元素也是可編輯的；否則，該子元素不可編輯。
雖然該屬性可以設(shè)置true、false，但是contenteditable是一個(gè)枚舉屬性而不是布爾屬性。

本項(xiàng)目采用對div增加contenteditable屬性實(shí)現(xiàn)輸入框。

基礎(chǔ)使用

首先新建一個(gè)Vue項(xiàng)目（如果只是實(shí)現(xiàn)demo，也可以不創(chuàng)建Vue項(xiàng)目），vue create simple-chat-inputbox，采用默認(rèn)的即可（新版vue-cli默認(rèn)新建的是Vue3項(xiàng)目，本項(xiàng)目采用Vue2）。

然后進(jìn)入項(xiàng)目，npm run serve運(yùn)行起來，不運(yùn)行怎么能看到效果呢。

在實(shí)際開發(fā)前，先做好準(zhǔn)備工作：

初始化本地倉庫，并關(guān)聯(lián)遠(yuǎn)端倉庫（可選）
取消App.vue中的默認(rèn)樣式，隱藏HelloWorld

新建InputBox.vue，作為輸入框組件

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

注冊并引入InputBox.vue，運(yùn)行后如下圖：

此時(shí)就可以在輸入框中就可以輸入你想輸入的內(nèi)容，但是僅僅是輸入，怎么獲取值，以及怎么實(shí)現(xiàn)雙向綁定呢。

進(jìn)階使用

在自定義事件 — Vue.js (vuejs.org)有一句話：

一個(gè)組件上的 v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件，仍然需要在組件的 props 選項(xiàng)里聲明 value 這個(gè) prop

根據(jù)此特性，我們再來改造一下項(xiàng)目：

雖然div變成了可編輯，但是并不能像input一樣直接使用v-model來完成雙向綁定，但我們可以另辟蹊徑，模擬實(shí)現(xiàn)雙向綁定。首先我們需要?jiǎng)?chuàng)建兩個(gè)組件：InputBox.vue和DivEditable.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>

子組件處理就相對復(fù)雜點(diǎn)，需要接收值并且監(jiān)聽事件：

<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, // 解決賦值時(shí)光標(biāo)自動(dòng)定位到起始位置
    }
  },
  watch: {
    value(val) {
      if (this.isBlur) {
        this.$refs.editor.innerHTML = val;
      }
    }
  },
  methods: {
    // 監(jiān)聽輸入框內(nèi)容
    inputText() {
      console.log('子組件輸入框的輸入內(nèi)容', 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; /* 隱藏聚焦時(shí)外邊框 */
  padding: 10px;
}
</style>

雖然div不可以使用v-model，但是可以監(jiān)聽input、focus、blur等事件。上述代碼其實(shí)并不復(fù)雜，主要就是利用了v-model的特性。有一點(diǎn)需要說明，由于是“雙向綁定”，子組件里面輸入的值會(huì)通過父組件賦值到子組件，導(dǎo)致子組件的光標(biāo)始終處于起始位置，因此需要增加一個(gè)isBlur變量，用來解決這個(gè)問題。感興趣的可以試一下去掉isBlur會(huì)是什么效果。

運(yùn)行結(jié)果如下圖：