您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)Vue實(shí)現(xiàn)變量表達(dá)式選擇器的方法的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
在 input 輸入框中輸入表達(dá)式在中臺項(xiàng)目中是比較常見的場景。其通常是輸入一個(gè)特定的字符時(shí)(如 $ 字符),顯示下拉列表,用戶點(diǎn)選下拉列表中的變量,然后繼續(xù)在 input 輸入框中輸入其它運(yùn)算符,組成一個(gè)表達(dá)式,其效果如下圖:
在之前的項(xiàng)目中,使用 React + TypeScrpt 實(shí)現(xiàn)了React版的變量表達(dá)式選擇器,在本文中,我們將會(huì)介紹使用Vue如何實(shí)現(xiàn)一個(gè)變量表達(dá)式選擇器。
該變量表達(dá)式將會(huì)實(shí)現(xiàn)以下效果:
當(dāng)在輸入框中輸入特定字符時(shí),顯示下拉列表;
可通過鍵盤上下鍵切換下拉選項(xiàng),鼠標(biāo)點(diǎn)擊下拉選項(xiàng)或者按下 enter 鍵,選中內(nèi)容顯示到輸入框上;
光標(biāo)移到已輸入字符的任意位置,選擇下拉列表的內(nèi)容,選中的內(nèi)容顯示在當(dāng)前光標(biāo)所在的位置;
當(dāng)顯示下拉列表,但未選擇下拉列表的內(nèi)容時(shí),input輸入框?qū)?huì)被禁止輸入,只有選中內(nèi)容后才允許繼續(xù)在輸入框中輸入內(nèi)容
禁止顯示輸入框的歷史記錄;
由于現(xiàn)有的 select 選擇器無法實(shí)現(xiàn)我們想要的效果,因此我們需要自己實(shí)現(xiàn)一個(gè)select選擇器。使用 input 標(biāo)簽作為我們的select選擇器的輸入框,ul li 標(biāo)簽作為select選擇器的下拉列表。其基本的HTML結(jié)構(gòu)如下:
<div class="expressionContainer"> <input /> <div v-if="visible" class="expressionListBox"> <ul class="expressionUlBox"> <li></li> </ul> </div> </div>
在 Vue 中,如果要給一個(gè)元素或子組件注冊引用信息,需要添加 ref 屬性。使用 ref 注冊的引用信息將會(huì)注冊在父組件的 refs 對象上,可以通過refs對象上,可以通過refs 對象找到需要進(jìn)行操作的元素或子組件。因此,我們給 input 標(biāo)簽添加 ref 屬性。
<input ref="inputRef" />
除了給 input 標(biāo)簽添加 ref 屬性,還需要給 input 標(biāo)簽綁定事件。在 Vue 中,通常使用 v-on (縮寫:@ ) 綁定事件。我們給 input 標(biāo)簽綁定 blur、keydown、input 事件。
<input ref="inputRef" v-model="expressValue" class="ant-input" :readOnly="readonly ? true : false" autoComplete="off" :placeholder="placeholder" @blur="inputOnBlurHandle" @keydown="inputOnKeyDownHandle" @change="onchangeHandle" @input="onInputHandle" />
給 input 標(biāo)簽綁定 keydown 事件,監(jiān)聽此時(shí)按下的鍵盤的鍵,如果同時(shí)按下的是 shift + $ ,則顯示下拉列表,保存input輸入框中當(dāng)前的值,并將 input 標(biāo)簽設(shè)置為不可編輯,只能從下拉列表中選擇內(nèi)容。keydown 綁定的事件處理函數(shù)如下:
// Input 輸入框 keydown 事件 inputOnKeyDownHandle(e) { // 同時(shí)按下 shift + $ 鍵 if (e.keyCode === 52 && e.shiftKey) { // 獲取 input 輸入框的值 const expressValue = e.target.value; this.setInputValue(expressValue); // 獲取當(dāng)前光標(biāo)的位置 const position = getPositionForInput(this.$refs.inputRef); // 當(dāng)前光標(biāo)的起始位置 const cursorIndex = position.start; // 把 光標(biāo)的位置設(shè)置到 input 的 range 屬性上 // updateRange(this.$refs.inputRef); // 保存光標(biāo)的起始位置 this.saveCursorIndex({ start: cursorIndex }); // 設(shè)置 下拉選擇框 顯示 this.setSelectedBoxVisible(true); // 設(shè)置 input 標(biāo)簽不可編輯,只能從下拉列表選擇內(nèi)容 this.setInputIsReadonly(true); } },
select 選擇器是使用 ul li 標(biāo)簽來實(shí)現(xiàn)的,當(dāng)我們選擇下拉選項(xiàng)時(shí),需要對 li 標(biāo)簽進(jìn)行操作,因此需要給 li 標(biāo)簽添加 ref 屬性和 click、keydown 事件,并利用HTML5 的 data-* 屬性來存儲選項(xiàng)值。
<ul ref="ulRef" class="expressionUlBox"> <li v-for="(item, index) in options" ref="liRef" :key="item.field" :data-set="item" :data-index="index" :data-value="item.field" tabindex="0" @click="liClickHandle" @keydown="liKeyDownHandle" > {{ item.name }} </li> </ul>
對于普通的 div/span/li 等元素節(jié)點(diǎn)是不能直接獲取焦點(diǎn)的。如果需要觸發(fā) div/span/li 等元素節(jié)點(diǎn)的 onfocus 事件和 onblur 事件,需要為其添加 tabindex 屬性。tabindex 屬性其實(shí)指定了點(diǎn)擊計(jì)算機(jī) "Tab" 健時(shí)光標(biāo)移動(dòng)的位置,在點(diǎn)擊計(jì)算機(jī) "Tab" 健時(shí) tabindex 屬性值越小 (最小為 0) 其所在的標(biāo)簽越先得到焦點(diǎn)。
在我們實(shí)現(xiàn)的 select 選擇器中,需要使用鍵盤上下鍵來切換選項(xiàng)值,因此需要給 li 標(biāo)簽添加 tabindex 屬性,使 li 可以觸發(fā) onfocus 事件和 onblur 事件。
<li tabindex="0"></li>
全局監(jiān)聽鍵盤事件,其實(shí)就是把事件綁定到 document 上。我們在 created 生命周期鉤子中監(jiān)聽鍵盤事件。如果當(dāng)前按下的鍵是上、下鍵,則可以通過上、下鍵來切換下拉選項(xiàng)。
created() { const _this = this; document.onkeydown = function () { const key = window.event.keyCode; // 上、下健 if (key === 38 || key === 40) { _this.upAndDownKeySwitch(key); } // 左、右健 else if (key === 39 || key === 37) { // _this.leftAndRightKeySwitch(key); } }; },
通過鍵盤上下鍵切換選擇器下拉選項(xiàng)的處理邏輯如下:
// 鍵盤 上、下鍵 選擇 表達(dá)式 upAndDownKeySwitch(key) { const liNodes = this.$refs.liRef; const liLength = liNodes.length; // Dw Arrow 鍵 if (liNodes && liLength && key === 40) { const count = this.arrowCount.dwArrow === liLength - 1 ? 0 : this.arrowCount.dwArrow + 1; // 設(shè)置 padding,解決 第一個(gè) li 獲取焦點(diǎn)時(shí)無法顯示在可視區(qū)域的問題 if (liLength > 1) { if (count === 0) { this.$refs.ulRef.style.padding = "40px 0 10px 0"; } else { this.$refs.ulRef.style.padding = "10px 0"; } } // 當(dāng)前 li 元素獲取焦點(diǎn) liLength && liNodes[count].focus(); // 設(shè)置 ul 的 scrollTop,是當(dāng)前獲取焦點(diǎn)的 li 元素顯示在可視區(qū)域 if (count === liLength - 1) { // 解決最后一個(gè) li 元素?zé)o法顯示在可視區(qū)域的問題 this.$refs.ulRef.scrollTop = count * 40; } else { this.$refs.ulRef.scrollTop = count * 10; } // 保存 count 的狀態(tài)到 組件的內(nèi)容 state 里 this.arrowCount = { upArrow: count, dwArrow: count }; } // Up Arrow 鍵 if (liNodes && liLength && key === 38) { const count = this.arrowCount.upArrow <= 0 ? liLength - 1 : this.arrowCount.upArrow - 1; // 設(shè)置 padding,解決 第一個(gè) li 獲取焦點(diǎn)時(shí)無法顯示在可視區(qū)域的問題 if (liLength > 1) { if (count === liLength - 1) { this.$refs.ulRef.style.padding = "10px 0 40px 0"; } else { this.$refs.ulRef.style.padding = "10px 0"; } } // 當(dāng)前 li 元素獲取焦點(diǎn) liNodes[count].focus(); // 設(shè)置 ul 的 scrollTop,是當(dāng)前獲取焦點(diǎn)的 li 元素顯示在可視區(qū)域 this.$refs.ulRef.scrollTop = count * 60; // 保存 count 的狀態(tài)到 組件的內(nèi)容 state 里 this.arrowCount = { upArrow: count, dwArrow: count }; } },
默認(rèn)情況下光標(biāo)移到已輸入字符的任意位置,選擇某個(gè)下拉選項(xiàng),選項(xiàng)的值會(huì)被插入到已輸入字符的最后面,而我們想要的效果是選項(xiàng)的值插入到當(dāng)前光標(biāo)所在的位置,因此我們需要計(jì)算光標(biāo)所在的位置,將選項(xiàng)的值添加到正確的位置。這里涉及到了光標(biāo)位置及文本選區(qū)的相關(guān)知識,可移步Selection 深入了解。
/** * 插入文本 * @param ctrl 輸入元素對象(input、textarea 等) * @param inputValue 輸入框 的 value 值 */ export function insertAtCursor(ctrl, inputValue) { // IE support if (document.selection) { ctrl.focus(); // document.selection.createRange() // 根據(jù)當(dāng)前文字選擇返回 TextRange 對象,或根據(jù)控件選擇返回 ControlRange 對象 const sel = document.selection.createRange(); // 給當(dāng)前的 TextRange 對象設(shè)置文本 sel.text = inputValue; } else if (ctrl.selectionStart || ctrl.selectionStart === 0) { // selectionStart 文本選中區(qū)域的開始位置 // selectionEnd 文本選中區(qū)域的結(jié)束位置 // MOZILLA and others const startPos = ctrl.selectionStart; const endPos = ctrl.selectionEnd; // 在光標(biāo)位置插入值 ctrl.value = // 光標(biāo)位置前面的值 ctrl.value.substring(0, startPos) + // 待插入的值 inputValue + // 光標(biāo)位置后面的值 ctrl.value.substring(endPos, ctrl.value.length); // 重新設(shè)置光標(biāo)的位置 // 插入值后,光標(biāo)位置應(yīng)該在字符串的最后面 // 頁面中閃爍的光標(biāo)其實(shí)就是特殊的寬度為0的選區(qū),簡單理解就是選區(qū)的左右邊界交叉形成了光標(biāo) ctrl.selectionStart = startPos + inputValue.length; ctrl.selectionEnd = startPos + inputValue.length; } else { ctrl.value += inputValue; } // 輸入元素對象(input、textarea)重新獲取焦點(diǎn),此時(shí)光標(biāo)位置應(yīng)該在已輸入字符的最后面 ctrl.focus(); }
感謝各位的閱讀!關(guān)于“Vue實(shí)現(xiàn)變量表達(dá)式選擇器的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。