Vue實現(xiàn)輸入框@功能的示例代碼

更新時間：2022年05月06日 10:54:30 作者：諸葛小愚

這篇文章主要為大家介紹了如何利用Vue實現(xiàn)輸入框@功能，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以學(xué)習(xí)一下

前言

前幾篇文章中分別介紹了如何實現(xiàn)聊天輸入框的雙向綁定、回車鍵發(fā)送、粘貼文本圖片等功能，本著完善輸入框的目的，文本重點介紹聊天框如何實現(xiàn)@功能。

文章回顧：

Vue實現(xiàn)contenteditable元素雙向綁定的方法詳解

Vue實現(xiàn)輸入框回車發(fā)送和粘貼文本與圖片功能

首先需要先理清思路：

成員列表組件，需要根據(jù)光標(biāo)的位置調(diào)整，點擊成員項時回調(diào)成員信息
獲取光標(biāo)的位置坐標(biāo)（x值，y值）
輸入框失焦時記錄光標(biāo)
成員列表回調(diào)時，將成員信息插入到光標(biāo)位置，在此之前需要先恢復(fù)之前的光標(biāo)
將光標(biāo)移動到新的位置

既然有了思路，那么就可以一步一步實現(xiàn)。

成員列表

創(chuàng)建

實現(xiàn)成員列表的方式比較簡單，其實就是一個列表，一個簡單的v-for循環(huán)就可以搞定，點擊時將當(dāng)前選擇的成員項回調(diào)給父組件。

新增一個AtPop.vue文件：

<template>
  <div class="at-pop-index">
    <div v-for="(item, index) in listData" :key="index" class="at-pop-item" @click.stop="clickItem(item)">{{item.name}}</div>
  </div>
</template>
<script>
export default {
  props: {
    // 傳入需要被@的成員數(shù)組
    listData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    clickItem(item) {
      this.$emit('onSelect', item); // 調(diào)用父組件處理成員選擇的方法，并回傳當(dāng)前選擇項
    }
  }
}
</script>

使用

在父組件中，注冊并使用成員列表組件。我們需要在用戶輸入@的時候彈出成員列表，因此需要監(jiān)聽用戶的輸入，然后在用戶選擇成員后需要關(guān)閉。關(guān)鍵是獲取光標(biāo)位置，這個由輸入框獲取，在父組件只需要使用即可。

// 核心代碼
...
// 選擇成員時插入數(shù)據(jù)，并關(guān)閉彈窗
onSelect(item) {
    console.log('onSelect', item);
    this.$refs.inputBox.insertContent(`${item.name} `); // 有空格
    this.isShowAt = false;
},
// 輸入框輸入時回調(diào)函數(shù)
inputFunc(data, event) {
    console.log('inputFunc', data, event);
    if (event.data === '@') {
        this.isShowAt = true; // 顯示彈窗
        this.$nextTick(() => {
        let dom = document.getElementsByClassName('at-pop-index')[0]; // 獲取成員列表彈窗，需要放在nextTick中
        // 設(shè)置位置
        dom.style.position = 'fixed';
        dom.style.left = Math.floor(data.left + 10) + 'px';
        dom.style.top = Math.floor(data.top) + 'px';
        dom.style.zIndex = 9999;
        })
    } else {
        this.isShowAt = false;
    }
},
...

輸入框

輸入框需要處理光標(biāo)位置的獲取、將值插入到光標(biāo)的位置等，是本次功能實現(xiàn)的核心。

當(dāng)輸入框聚焦時，我們會看到光標(biāo)閃動，想要獲取光標(biāo)的位置以便于插入數(shù)據(jù)，則需要借助Selection對象。Selection表示用戶選擇的一段文本范圍或者插入數(shù)據(jù)的當(dāng)前位置。既然是獲取選取范圍，那當(dāng)前選擇范圍的index=0就是當(dāng)前光標(biāo)的位置。我們想要實現(xiàn)的效果是成員列表跟隨光標(biāo)移動，因此就需要獲取光標(biāo)的坐標(biāo)值。

獲取光標(biāo)的坐標(biāo)

let range = window.getSelection().getRangeAt(0); // 獲取當(dāng)前光標(biāo)
let position = range.getBoundingClientRect(); // 獲取當(dāng)前光標(biāo)的位置

getBoundingClientRect()方法會返回一個DOMRect矩形對象，其包含矩形區(qū)域的坐標(biāo)值。將獲取到的坐標(biāo)值回調(diào)給父組件的方法，顯示成員列表。

當(dāng)我們在輸入框輸入@的時候，頁面會出現(xiàn)成員列表，此時輸入框還是聚焦的。但是如果我們點擊了成員列表的某一項，此時輸入框已經(jīng)失焦了，雖然我們可以獲取選擇的成員并插入，如果只是簡單的字符串追加的話，光標(biāo)會在下次輸入時默認(rèn)定位到開頭；或者我們需要在中間插入選擇的成員，會發(fā)現(xiàn)沒有位置可以插入。因此我們需要在失焦的時候先保存當(dāng)前光標(biāo)，并在插入時還原光標(biāo)。

保存光標(biāo)

// DivEditable.vue
// 失焦
inputBlur(event) {
    this.selection = this.saveSelection();
    this.$emit('blurFunc', event);
},
// 失焦時保存光標(biāo)
saveSelection() {
    if (!window.getSelection) {
        return null;
    }
    let sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        return sel.getRangeAt(0);
    }
},

光標(biāo)暫存了，我們需要將插入成員封裝成方法，并可以給父組件調(diào)用，這樣父組件在獲取到成員信息后就可以直接調(diào)用。接下來需要使用上面已經(jīng)保存的光標(biāo)位置：

插入文本

// DivEditable.vue
// 恢復(fù)光標(biāo)
restoreSelection(range) {
    if (range) {
        let sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
},
// 插入數(shù)據(jù)
insertContent(value) {
    // this.$refs.editor.focus();
    let range, node;
    this.restoreSelection(this.selection); // 還原失焦前的光標(biāo)位置
    range = window.getSelection().getRangeAt(0);
    range.collapse(false); // 光標(biāo)移動到最后
?
    node = range.createContextualFragment(value);
    let child = node.lastChild;
    console.log('lastChild', child);
    range.insertNode(node);
    // 將光標(biāo)的起始位置設(shè)置在當(dāng)前插入的元素后面
    if (child) {
        range.setEndAfter(child);
        range.setStartAfter(child);
    }
?
    let sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    this.$emit('input', this.$refs.editor.innerHTML);
},

其實到這里就基本實現(xiàn)了@功能，但是還有一個問題，當(dāng)輸入框失焦時回調(diào)了父組件的blurFunc方法，導(dǎo)致成員列表關(guān)閉了，但是數(shù)據(jù)還沒有拿到。處理這種問題，有兩種思路：

使用setTimeout設(shè)置定時器，延后執(zhí)行關(guān)閉成員列表操作
修改取數(shù)邏輯為異步操作，等到數(shù)據(jù)拿到后才關(guān)閉成員列表

簡單點，就采用setTimeout實現(xiàn)。

// InputBox.vue
blurFunc(event) {
    // 失焦時延時關(guān)閉彈窗，避免還未拿到數(shù)據(jù)
    if (this.isShowAt) {
        setTimeout(() => {
            this.isShowAt = false;
        }, 500);
    }
},

運行結(jié)果

輸入框輸入@，在光標(biāo)位置附近彈出成員列表

選擇成員后，將成員信息插入到輸入框中

總結(jié)

本文介紹了實現(xiàn)輸入框@功能的方法，簡單易上手

主要使用了Selection和Range對象的相關(guān)方法，完成對光標(biāo)的處理以及輸入的插入

本文實現(xiàn)的@功能，無法刪除時整體刪除。目前有兩種思路：將@xxx轉(zhuǎn)換為圖片并插入到輸入框，筆者簡單寫了demo驗證了一下，效率不高，且會有卡頓；另一種方式就是監(jiān)聽退格鍵，刪除時判斷刪除對象是否被包含著有意義的@xxx中，如果是則整體刪除，如果不是則默認(rèn)的方式刪除，這種方式筆者沒有嘗試，難度比較大。

至此，輸入框的功能就基本完善了。需要看完整代碼的可移步項目地址

以上就是Vue實現(xiàn)輸入框@功能的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue輸入框@功能的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: