Vue如何實(shí)現(xiàn)動態(tài)渲染input輸入框

本文小編為大家詳細(xì)介紹“Vue如何實(shí)現(xiàn)動態(tài)渲染input輸入框”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue如何實(shí)現(xiàn)動態(tài)渲染input輸入框”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

問題描述

就比如現(xiàn)在有這樣一個字符串：

你好，我是{name}，我今年{age} 歲，我喜歡的運(yùn)動是{play}。

前端需要把 {xxx} 及其包裹的內(nèi)容轉(zhuǎn)變成一個輸入框渲染出來，并且呢，當(dāng)在輸入框輸入數(shù)據(jù)的時候，需要對輸入的內(nèi)容進(jìn)行獲取。即，轉(zhuǎn)變成下面的樣子進(jìn)行展示：

當(dāng)然可以再此基礎(chǔ)上進(jìn)行一些其他功能的開發(fā)，今天主要說一下這個功能的實(shí)現(xiàn)。

{ xxx } 標(biāo)識字符渲染Dom

組件設(shè)計

首先我們把這個功能編寫成一個簡單的組件，這個組件的功能很簡單，就是接受父組件傳進(jìn)來的字符串，檢測到 { } 包裹的數(shù)據(jù)，把對應(yīng)的部分渲染為 input 輸入框，并且可以對這個父組件傳進(jìn)來的字符串?dāng)?shù)據(jù)進(jìn)行修改。

組件開發(fā)

OK，我們先編寫一個組件。首先先實(shí)現(xiàn)一個曉得功能，接受父組件傳遞進(jìn)來的字符串，然后把 { } 包裹的數(shù)據(jù)解析成 input 輸入框展示出來。

組件很簡單，html 標(biāo)簽的話，就是使用一個簡單的 p 標(biāo)簽，因?yàn)槲覀兪鞘褂玫?vue 開發(fā)，我們需要動態(tài)的渲染 dom 節(jié)點(diǎn)的話，我們可以使用 vue 的 v-html 進(jìn)行渲染。

<p class="title" v-html="domRender(strData)"></p>

這段代碼很簡單，但是一定要注意是 v-html，然后綁定了一個方法 domRender，其中回調(diào)傳進(jìn)去的 strData 參數(shù)是父組件傳進(jìn)子組件的字符串?dāng)?shù)據(jù)對象。

比如說父組件中有一個數(shù)組：

dataList: [{
  index: 1,
  data: "你好，我是{name}，我今年{age} 歲，我喜歡的運(yùn)動是{play}。"
}],

我們需要把這個列表的第一個對象傳遞給我們的處理子組件。

首先子組件需要一個 props 接受父組件傳進(jìn)的字符串對象：

  props: {
    str: {
      type: Object,
      required: false,
    },
  },

因?yàn)槲覀兒笃诳赡苄枰薷倪@個字符串內(nèi)容，所以說呢，我們借助計算屬性，來處理一下這個字符串對象。提前聲明一個 currData 變量為 null 。

  computed: {
    strData: {
      get() {
        if (this.currData) {
          return this.currData
        } else {
          return this.str
        }
      },
      set(value) {
        this.currData = value
      }
    }
  },

OK，上面這個代碼都很簡單，就不需要過多的解釋了哈。上面這一部分和我們單純渲染 input 關(guān)系不大。

重點(diǎn)

最重要的部分來了，就是將 { } 的部分，渲染成 input 輸入框，首先呢，我們肯定是使用正則表達(dá)式，獲取到 { } 部分，然后用 input 替換一下就可以了。

domRender(str) {
  let strData = str
  var reg = /\{.*?\}/g
  strData = strData.replace(reg, '<input class="emptyOut" type="text" />');
  return strData
},

OK，就上面四行代碼，就成功的把 { } 渲染成 input 輸入框了。

但是！有問題！

【思考】我們成功的把數(shù)據(jù)渲染成了 dom 顯示在頁面了，但是渲染的目的是啥？數(shù)據(jù)的輸入啊！我有一個表單，我想把 你好，我是{name}，我今年{age} 歲，我喜歡的運(yùn)動是{play}。 中 {name} 渲染成的輸入框中輸入的數(shù)據(jù)，綁定到表單的 name 字段，{age} 渲染成的輸入框中輸入的數(shù)據(jù)，綁定到表單的 age字段，play 字段同理。這時候就發(fā)現(xiàn)，我們可以輸入內(nèi)容，但是沒法綁定啊！怎么辦！

【解答】對嘍！一下就反應(yīng)過來了吧，我們給這個輸入框綁定一個屬性值，然后我們在輸入框輸入完數(shù)據(jù)之后，比如焦點(diǎn)消失，我們就可以獲取這個輸入框?qū)ο?，然后根?jù)綁定的屬性，就可以獲取要在表單中綁定的字段和值是什么了。

OK，這個時候，我們就需要遍歷每一個輸入框，然后獲取這個 { } 中的字段，然后綁定成 input 輸入框綁定的屬性值就可以了。

    domRender(str) {
      let strData = str
      var reg = /\{.*?\}/g
      let result = str.match(reg)
      if (!result) {
        return strData
      }
      for (let i = 0; i < result.length; i++) {
        let a = result[i]
        if (a == '{}') {
          continue
        }
        let r = str.match(a)[0]
        let id = r.slice(1, -1)
        strData = strData.replace(r, '<input idData=' + id + ' class="emptyOut" type="text" />');
      }
      return strData
    },

好的，這樣的話，我們就給輸入框綁定了一個屬性，屬性值就是要綁定的表單字段。

好！完成！已經(jīng)成功綁定。

接下來，就是我們輸入數(shù)據(jù)之后，獲取輸入框數(shù)據(jù)的值，然后把內(nèi)容返回給父組件就可以了。

輸入完成事件

首先，在父組件有一個表單數(shù)據(jù)：

form:{}

子組件輸入完成之后，子組件把輸入好的數(shù)據(jù)傳遞給父組件，父組件將子組件傳遞回來的數(shù)據(jù)保存到 fom 就可以啦！

其實(shí)很簡單的我們只需要監(jiān)聽輸入框輸入完成就可以了吧！怎么監(jiān)聽呢，其實(shí)很麻煩，我也是試了好幾種方案。

首先我們界面有一個按鈕，點(diǎn)擊按鈕的時候執(zhí)行一個方法，獲取綁定的值。

<el-button type="success" @click="printData()" size="mini">打印數(shù)據(jù)</el-button>

關(guān)鍵是 printData() 方法里面怎么寫？

我們在之前動態(tài)渲染的時候都給 input 設(shè)置了一個 class 屬性對吧？我們點(diǎn)擊事件里面，肯定可以獲取這些 input 框吧！那么我們就可以獲取這些輸入框綁定的屬性和輸入的值吧？

    printData() {
      let data = {}
      const elements = document.getElementsByClassName("emptyOut");
      for (let i = 0; i < elements.length; i++) {
        const item = elements[i]
        data[item.attributes.idData.value] = item.value
      }
      console.log('數(shù)據(jù)---->> ', data)
    }

好，這樣的話我們就可以獲取到輸入框輸入的值了。然后子組件把數(shù)據(jù)傳遞給父組件就可以了，父組件怎么處理在寫響應(yīng)的邏輯就可以了吧！OK，就這樣。

OK，這是一個方式哈。還有一種哈，稍微說一下。

上面是點(diǎn)擊按鈕獲取數(shù)據(jù)，還有一個是使用 @input 方法。

<p class="title"  @input="addComment($event)" v-html="domRender(strData)"></p>

在相應(yīng)的標(biāo)簽上添加 input 事件。

	// 修改輸入框文本數(shù)據(jù)
    addComment(event) {
      console.log("--->> ", event.target.attributes.idData.value, event.target.value)
    },

這樣的話，我們每次修改輸入框內(nèi)容的時候，都會打印出我們這個輸入框的數(shù)據(jù)值。

看效果，還可以哈！拿到數(shù)據(jù)值了，怎么使用就看具體業(yè)務(wù)了。

動態(tài)編輯文本

上面我們說了，給一個字符串，把關(guān)鍵內(nèi)容使用 dom 輸入框渲染，現(xiàn)在在做一個小功能，就是可以手動編輯文本。

上面我們接受父組件傳進(jìn)來數(shù)據(jù)是使用計算屬性得到的值 strData。所以我們寫一個輸入框綁定要輸入的內(nèi)容，也就是這個 strData 。在寫一個按鈕，點(diǎn)擊按鈕的時候切換編輯和預(yù)覽就可以了。很簡單沒啥好說的。

<template>
  <div class="dom-item">
    <el-input v-show="!preview" type="textarea" :rows="2" placeholder="請輸入內(nèi)容" v-model="strData">
    </el-input>
    <p class="title" v-show="preview" @input="addComment($event)" v-html="domRender(strData)"></p>
    <button class="dom-btn" @click="preview = !preview"> {{ preview ? '編輯' : '預(yù)覽' }}</button>
  </div>
</template>

然后看一下效果。

然后需要處理什么邏輯自己去根據(jù)需求實(shí)現(xiàn)就可以了。

讀到這里，這篇“Vue如何實(shí)現(xiàn)動態(tài)渲染input輸入框”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。