Vue如何實(shí)現(xiàn)變量表達(dá)式選擇器

更新時間：2021年02月18日 09:39:49 作者：紫圣

這篇文章主要介紹了Vue如何實(shí)現(xiàn)變量表達(dá)式選擇器，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

在 input 輸入框中輸入表達(dá)式在中臺項目中是比較常見的場景。其通常是輸入一個特定的字符時(如 $ 字符)，顯示下拉列表，用戶點(diǎn)選下拉列表中的變量，然后繼續(xù)在 input 輸入框中輸入其它運(yùn)算符，組成一個表達(dá)式，其效果如下圖：

在之前的項目中，使用 React + TypeScrpt 實(shí)現(xiàn)了React版的變量表達(dá)式選擇器，在本文中，我們將會介紹使用Vue如何實(shí)現(xiàn)一個變量表達(dá)式選擇器。

該變量表達(dá)式將會實(shí)現(xiàn)以下效果：

當(dāng)在輸入框中輸入特定字符時，顯示下拉列表；
可通過鍵盤上下鍵切換下拉選項，鼠標(biāo)點(diǎn)擊下拉選項或者按下 enter 鍵，選中內(nèi)容顯示到輸入框上；
光標(biāo)移到已輸入字符的任意位置，選擇下拉列表的內(nèi)容，選中的內(nèi)容顯示在當(dāng)前光標(biāo)所在的位置；
當(dāng)顯示下拉列表，但未選擇下拉列表的內(nèi)容時，input輸入框?qū)唤馆斎耄挥羞x中內(nèi)容后才允許繼續(xù)在輸入框中輸入內(nèi)容
禁止顯示輸入框的歷史記錄；

定義HTML結(jié)構(gòu)

由于現(xiàn)有的 select 選擇器無法實(shí)現(xiàn)我們想要的效果，因此我們需要自己實(shí)現(xiàn)一個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>

input 標(biāo)簽綁定屬性

在 Vue 中，如果要給一個元素或子組件注冊引用信息，需要添加 ref 屬性。使用 ref 注冊的引用信息將會注冊在父組件的 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)簽監(jiān)聽 keydown 事件

給 input 標(biāo)簽綁定 keydown 事件，監(jiān)聽此時按下的鍵盤的鍵，如果同時按下的是 shift + $ ，則顯示下拉列表，保存input輸入框中當(dāng)前的值，并將 input 標(biāo)簽設(shè)置為不可編輯，只能從下拉列表中選擇內(nèi)容。keydown 綁定的事件處理函數(shù)如下：

// Input 輸入框 keydown 事件
inputOnKeyDownHandle(e) {
 // 同時按下 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);
 }
},

li 標(biāo)簽綁定屬性

select 選擇器是使用 ul li 標(biāo)簽來實(shí)現(xiàn)的，當(dāng)我們選擇下拉選項時，需要對 li 標(biāo)簽進(jìn)行操作，因此需要給 li 標(biāo)簽添加 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 標(biāo)簽獲取焦點(diǎn)

對于普通的 div/span/li 等元素節(jié)點(diǎn)是不能直接獲取焦點(diǎn)的。如果需要觸發(fā) div/span/li 等元素節(jié)點(diǎn)的 onfocus 事件和 onblur 事件，需要為其添加 tabindex 屬性。tabindex 屬性其實(shí)指定了點(diǎn)擊計算機(jī) "Tab" 健時光標(biāo)移動的位置，在點(diǎn)擊計算機(jī) "Tab" 健時 tabindex 屬性值越小 (最小為 0) 其所在的標(biāo)簽越先得到焦點(diǎn)。

在我們實(shí)現(xiàn)的 select 選擇器中，需要使用鍵盤上下鍵來切換選項值，因此需要給 li 標(biāo)簽添加 tabindex 屬性，使 li 可以觸發(fā) onfocus 事件和 onblur 事件。

<li tabindex="0"></li>

全局監(jiān)聽鍵盤事件

全局監(jiān)聽鍵盤事件，其實(shí)就是把事件綁定到 document 上。我們在 created 生命周期鉤子中監(jiān)聽鍵盤事件。如果當(dā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);
 }
 };
},

通過鍵盤上下鍵切換選擇器下拉選項的處理邏輯如下：

// 鍵盤 上、下鍵 選擇 表達(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，解決 第一個 li 獲取焦點(diǎn)時無法顯示在可視區(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) {
  // 解決最后一個 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，解決 第一個 li 獲取焦點(diǎn)時無法顯示在可視區(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 };
 }
},

設(shè)置 input 標(biāo)簽的值

默認(rèn)情況下光標(biāo)移到已輸入字符的任意位置，選擇某個下拉選項，選項的值會被插入到已輸入字符的最后面，而我們想要的效果是選項的值插入到當(dāng)前光標(biāo)所在的位置，因此我們需要計算光標(biāo)所在的位置，將選項的值添加到正確的位置。這里涉及到了光標(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)，此時光標(biāo)位置應(yīng)該在已輸入字符的最后面
 ctrl.focus();
}

完整效果預(yù)覽

以上就是Vue如何實(shí)現(xiàn)變量表達(dá)式選擇器的詳細(xì)內(nèi)容，更多關(guān)于Vue實(shí)現(xiàn)變量表達(dá)式選擇器的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: