Vue通過字符串關(guān)鍵字符實現(xiàn)動態(tài)渲染input輸入框
今天做一個簡單的demo,就是有一個字符串,字符串里面有標識符,前端檢測到標識符之后,需要將這個標識符轉(zhuǎn)換成一個 input 輸入框并且進行數(shù)據(jù)輸入和綁定功能。
問題描述
就比如現(xiàn)在有這樣一個字符串:
你好,我是{name},我今年{age} 歲,我喜歡的運動是{play}。
前端需要把 {xxx}
及其包裹的內(nèi)容轉(zhuǎn)變成一個輸入框渲染出來,并且呢,當在輸入框輸入數(shù)據(jù)的時候,需要對輸入的內(nèi)容進行獲取。即,轉(zhuǎn)變成下面的樣子進行展示:
當然可以再此基礎(chǔ)上進行一些其他功能的開發(fā),今天主要說一下這個功能的實現(xiàn)。
{ xxx } 標識字符渲染Dom
組件設(shè)計
首先我們把這個功能編寫成一個簡單的組件,這個組件的功能很簡單,就是接受父組件傳進來的字符串,檢測到 { }
包裹的數(shù)據(jù),把對應(yīng)的部分渲染為 input 輸入框,并且可以對這個父組件傳進來的字符串數(shù)據(jù)進行修改。
組件開發(fā)
OK,我們先編寫一個組件。首先先實現(xiàn)一個曉得功能,接受父組件傳遞進來的字符串,然后把 { }
包裹的數(shù)據(jù)解析成 input 輸入框展示出來。
組件很簡單,html 標簽的話,就是使用一個簡單的 p 標簽,因為我們是使用的 vue 開發(fā),我們需要動態(tài)的渲染 dom 節(jié)點的話,我們可以使用 vue 的 v-html 進行渲染。
<p class="title" v-html="domRender(strData)"></p>
這段代碼很簡單,但是一定要注意是 v-html
,然后綁定了一個方法 domRender
,其中回調(diào)傳進去的 strData
參數(shù)是父組件傳進子組件的字符串數(shù)據(jù)對象。
比如說父組件中有一個數(shù)組:
dataList: [{ index: 1, data: "你好,我是{name},我今年{age} 歲,我喜歡的運動是{play}。" }],
我們需要把這個列表的第一個對象傳遞給我們的處理子組件。
首先子組件需要一個 props 接受父組件傳進的字符串對象:
props: { str: { type: Object, required: false, }, },
因為我們后期可能需要修改這個字符串內(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)系不大。
重點
最重要的部分來了,就是將 { }
的部分,渲染成 input 輸入框,首先呢,我們肯定是使用正則表達式,獲取到 { }
部分,然后用 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} 歲,我喜歡的運動是{play}。
中 {name}
渲染成的輸入框中輸入的數(shù)據(jù),綁定到表單的 name 字段,{age}
渲染成的輸入框中輸入的數(shù)據(jù),綁定到表單的 age字段,play 字段同理。這時候就發(fā)現(xiàn),我們可以輸入內(nèi)容,但是沒法綁定??!怎么辦!
【解答】對嘍!一下就反應(yīng)過來了吧,我們給這個輸入框綁定一個屬性值,然后我們在輸入框輸入完數(shù)據(jù)之后,比如焦點消失,我們就可以獲取這個輸入框?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 就可以啦!
其實很簡單的我們只需要監(jiān)聽輸入框輸入完成就可以了吧!怎么監(jiān)聽呢,其實很麻煩,我也是試了好幾種方案。
首先我們界面有一個按鈕,點擊按鈕的時候執(zhí)行一個方法,獲取綁定的值。
<el-button type="success" @click="printData()" size="mini">打印數(shù)據(jù)</el-button>
關(guān)鍵是 printData()
方法里面怎么寫?
我們在之前動態(tài)渲染的時候都給 input 設(shè)置了一個 class 屬性對吧?我們點擊事件里面,肯定可以獲取這些 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,這是一個方式哈。還有一種哈,稍微說一下。
上面是點擊按鈕獲取數(shù)據(jù),還有一個是使用 @input
方法。
<p class="title" @input="addComment($event)" v-html="domRender(strData)"></p>
在相應(yīng)的標簽上添加 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)在在做一個小功能,就是可以手動編輯文本。
上面我們接受父組件傳進來數(shù)據(jù)是使用計算屬性得到的值 strData。所以我們寫一個輸入框綁定要輸入的內(nèi)容,也就是這個 strData 。在寫一個按鈕,點擊按鈕的時候切換編輯和預(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ù)需求實現(xiàn)就可以了。
完成?。。?/p>
其實還有一些細節(jié)或者是優(yōu)化的地方,因為在實際開發(fā)過程中,會發(fā)現(xiàn)我寫的這些并不是所有的功能都能實現(xiàn),或者是實現(xiàn)的不是很好,因為還有一部分我沒有說,不想說了,這一塊描述起來太復(fù)雜,但是呢,如果真的想實現(xiàn)的話,自己寫的話就會發(fā)現(xiàn)這個問題自己能解決了也就,我說有點多余。
到此這篇關(guān)于Vue通過字符串關(guān)鍵字符實現(xiàn)動態(tài)渲染input輸入框的文章就介紹到這了,更多相關(guān)Vue動態(tài)渲染input輸入框 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中router-link如何添加mouseover提示
這篇文章主要介紹了Vue中router-link如何添加mouseover提示,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-11-11vue登錄以及權(quán)限驗證相關(guān)的實現(xiàn)
這篇文章主要介紹了vue登錄以及權(quán)限驗證相關(guān)的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-10-10Vue生產(chǎn)環(huán)境調(diào)試的方法步驟
開發(fā)環(huán)境下Vue會提供很多警告來幫你對付常見的錯誤與陷阱,而在生產(chǎn)環(huán)境下,這些警告語句卻沒有用,反而會增加應(yīng)用的體積,下面這篇文章主要給大家介紹了關(guān)于Vue生產(chǎn)環(huán)境調(diào)試的方法步驟,需要的朋友可以參考下2022-04-04