Vue如何實現變量表達式選擇器
在 input 輸入框中輸入表示式在中臺專案中是比較常見的場景。其通常是輸入一個特定的字元時(如 $ 字元),顯示下拉列表,使用者點選下拉列表中的變數,然後繼續在 input 輸入框中輸入其它運算子,組成一個表示式,其效果如下圖:
在之前的專案中,使用 React + TypeScrpt 實現了React版的變量表達式選擇器,在本文中,我們將會介紹使用Vue如何實現一個變量表達式選擇器。
該變量表達式將會實現以下效果:
- 當在輸入框中輸入特定字元時,顯示下拉列表;
- 可通過鍵盤上下鍵切換下拉選項,滑鼠點選下拉選項或者按下 enter 鍵,選中內容顯示到輸入框上;
- 游標移到已輸入字元的任意位置,選擇下拉列表的內容,選中的內容顯示在當前游標所在的位置;
- 當顯示下拉列表,但未選擇下拉列表的內容時,input輸入框將會被禁止輸入,只有選中內容後才允許繼續在輸入框中輸入內容
- 禁止顯示輸入框的歷史記錄;
定義HTML結構
由於現有的 select 選擇器無法實現我們想要的效果,因此我們需要自己實現一個select選擇器。使用 input 標籤作為我們的select選擇器的輸入框,ul li 標籤作為select選擇器的下拉列表。其基本的HTML結構如下:
<div class="expressionContainer"> <input /> <div v-if="visible" class="expressionListBox"> <ul class="expressionUlBox"> <li></li> </ul> </div> </div>
input 標籤繫結屬性
在 Vue 中,如果要給一個元素或子元件註冊引用資訊,需要新增 ref 屬性。使用 ref 註冊的引用資訊將會註冊在父元件的 refs 物件上,可以通過refs物件上,可以通過refs 物件找到需要進行操作的元素或子元件。因此,我們給 input 標籤新增 ref 屬性。
<input ref="inputRef" />
除了給 input 標籤新增 ref 屬性,還需要給 input 標籤繫結事件。在 Vue 中,通常使用 v-on (縮寫:@ ) 繫結事件。我們給 input 標籤繫結 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 標籤監聽 keydown 事件
給 input 標籤繫結 keydown 事件,監聽此時按下的鍵盤的鍵,如果同時按下的是 shift + $ ,則顯示下拉列表,儲存input輸入框中當前的值,並將 input 標籤設定為不可編輯,只能從下拉列表中選擇內容。keydown 繫結的事件處理函式如下:
// Input 輸入框 keydown 事件 inputOnKeyDownHandle(e) { // 同時按下 shift + $ 鍵 if (e.keyCode === 52 && e.shiftKey) { // 獲取 input 輸入框的值 const expressValue = e.target.value; this.setInputValue(expressValue); // 獲取當前游標的位置 const position = getPositionForInput(this.$refs.inputRef); // 當前游標的起始位置 const cursorIndex = position.start; // 把 游標的位置設定到 input 的 range 屬性上 // updateRange(this.$refs.inputRef); // 儲存游標的起始位置 this.saveCursorIndex({ start: cursorIndex }); // 設定 下拉選擇框 顯示 this.setSelectedBoxVisible(true); // 設定 input 標籤不可編輯,只能從下拉列表選擇內容 this.setInputIsReadonly(true); } },
li 標籤繫結屬性
select 選擇器是使用 ul li 標籤來實現的,當我們選擇下拉選項時,需要對 li 標籤進行操作,因此需要給 li 標籤新增 ref 屬性和 click、keydown 事件,並利用HTML5 的 data-* 屬性來儲存選項值。
<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>
li 標籤獲取焦點
對於普通的 div/span/li 等元素節點是不能直接獲取焦點的。如果需要觸發 div/span/li 等元素節點的 onfocus 事件和 onblur 事件,需要為其新增 tabindex 屬性。tabindex 屬性其實指定了點選計算機 "Tab" 健時游標移動的位置,在點選計算機 "Tab" 健時 tabindex 屬性值越小 (最小為 0) 其所在的標籤越先得到焦點。
在我們實現的 select 選擇器中,需要使用鍵盤上下鍵來切換選項值,因此需要給 li 標籤新增 tabindex 屬性,使 li 可以觸發 onfocus 事件和 onblur 事件。
<li tabindex="0"></li>
全域性監聽鍵盤事件
全域性監聽鍵盤事件,其實就是把事件繫結到 document 上。我們在 created 生命週期鉤子中監聽鍵盤事件。如果當前按下的鍵是上、下鍵,則可以通過上、下鍵來切換下拉選項。
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); } }; },
通過鍵盤上下鍵切換選擇器下拉選項的處理邏輯如下:
// 鍵盤 上、下鍵 選擇 表示式 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; // 設定 padding,解決 第一個 li 獲取焦點時無法顯示在可視區域的問題 if (liLength > 1) { if (count === 0) { this.$refs.ulRef.style.padding = "40px 0 10px 0"; } else { this.$refs.ulRef.style.padding = "10px 0"; } } // 當前 li 元素獲取焦點 liLength && liNodes[count].focus(); // 設定 ul 的 scrollTop,是當前獲取焦點的 li 元素顯示在可視區域 if (count === liLength - 1) { // 解決最後一個 li 元素無法顯示在可視區域的問題 this.$refs.ulRef.scrollTop = count * 40; } else { this.$refs.ulRef.scrollTop = count * 10; } // 儲存 count 的狀態到 元件的內容 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; // 設定 padding,解決 第一個 li 獲取焦點時無法顯示在可視區域的問題 if (liLength > 1) { if (count === liLength - 1) { this.$refs.ulRef.style.padding = "10px 0 40px 0"; } else { this.$refs.ulRef.style.padding = "10px 0"; } } // 當前 li 元素獲取焦點 liNodes[count].focus(); // 設定 ul 的 scrollTop,是當前獲取焦點的 li 元素顯示在可視區域 this.$refs.ulRef.scrollTop = count * 60; // 儲存 count 的狀態到 元件的內容 state 裡 this.arrowCount = { upArrow: count,dwArrow: count }; } },
設定 input 標籤的值
預設情況下游標移到已輸入字元的任意位置,選擇某個下拉選項,選項的值會被插入到已輸入字元的最後面,而我們想要的效果是選項的值插入到當前游標所在的位置,因此我們需要計算游標所在的位置,將選項的值新增到正確的位置。這裡涉及到了游標位置及文字選區的相關知識,可移步Selection 深入瞭解。
/** * 插入文字 * @param ctrl 輸入元素物件(input、textarea 等) * @param inputValue 輸入框 的 value 值 */ export function insertAtCursor(ctrl,inputValue) { // IE support if (document.selection) { ctrl.focus(); // document.selection.createRange() // 根據當前文字選擇返回 TextRange 物件,或根據控制元件選擇返回 ControlRange 物件 const sel = document.selection.createRange(); // 給當前的 TextRange 物件設定文字 sel.text = inputValue; } else if (ctrl.selectionStart || ctrl.selectionStart === 0) { // selectionStart 文字選中區域的開始位置 // selectionEnd 文字選中區域的結束位置 // MOZILLA and others const startPos = ctrl.selectionStart; const endPos = ctrl.selectionEnd; // 在游標位置插入值 ctrl.value = // 游標位置前面的值 ctrl.value.substring(0,startPos) + // 待插入的值 inputValue + // 游標位置後面的值 ctrl.value.substring(endPos,ctrl.value.length); // 重新設定游標的位置 // 插入值後,游標位置應該在字串的最後面 // 頁面中閃爍的游標其實就是特殊的寬度為0的選區,簡單理解就是選區的左右邊界交叉形成了游標 ctrl.selectionStart = startPos + inputValue.length; ctrl.selectionEnd = startPos + inputValue.length; } else { ctrl.value += inputValue; } // 輸入元素物件(input、textarea)重新獲取焦點,此時游標位置應該在已輸入字元的最後面 ctrl.focus(); }
完整效果預覽
以上就是Vue如何實現變量表達式選擇器的詳細內容,更多關於Vue實現變量表達式選擇器的資料請關注我們其它相關文章!