在 input 輸入框中輸入表達式在中臺項目中是比較常見的場景。其通常是輸入一個特定的字符時(如 $ 字符)，顯示下拉列表，用戶點選下拉列表中的變量，然后繼續在 input 輸入框中輸入其它運算符，組成一個表達式，其效果如下圖：
在之前的項目中，使用 React + TypeScrpt 實現了React版的變量表達式選擇器，在本文中，我們將會介紹使用Vue如何實現一個變量表達式選擇器。
該變量表達式將會實現以下效果：
- 當在輸入框中輸入特定字符時，顯示下拉列表；
- 可通過鍵盤上下鍵切換下拉選項，鼠標點擊下拉選項或者按下 enter 鍵，選中內容顯示到輸入框上；
- 光標移到已輸入字符的任意位置，選擇下拉列表的內容，選中的內容顯示在當前光標所在的位置；
- 當顯示下拉列表，但未選擇下拉列表的內容時，input輸入框將會被禁止輸入，只有選中內容后才允許繼續在輸入框中輸入內容
- 禁止顯示輸入框的歷史記錄；
定義HTML結構
由于現有的 select 選擇器無法實現我們想要的效果，因此我們需要自己實現一個select選擇器。使用 input 標簽作為我們的select選擇器的輸入框，ul li 標簽作為select選擇器的下拉列表。其基本的HTML結構如下：
|
1
2
3
4
5
6
7
8
|
<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 屬性。
|
1
|
<input ref="inputRef" /> |
除了給 input 標簽添加 ref 屬性，還需要給 input 標簽綁定事件。在 Vue 中，通常使用 v-on (縮寫：@ ) 綁定事件。我們給 input 標簽綁定 blur、keydown、input 事件。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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 綁定的事件處理函數如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// 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-* 屬性來存儲選項值。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<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 事件。
|
1
|
<li tabindex="0"></li> |
全局監聽鍵盤事件
全局監聽鍵盤事件，其實就是把事件綁定到 document 上。我們在 created 生命周期鉤子中監聽鍵盤事件。如果當前按下的鍵是上、下鍵，則可以通過上、下鍵來切換下拉選項。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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); } };}, |
通過鍵盤上下鍵切換選擇器下拉選項的處理邏輯如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
// 鍵盤 上、下鍵 選擇 表達式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 深入了解。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/** * 插入文本 * @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實現變量表達式選擇器的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6928368607634128904
