在“@”符號后顯示 markdown 中的彈出窗口以搜索用戶

Question

我正在嘗試從 Gitlab 重新創建功能以在寫入“@”符號后顯示用戶列表。

目前我正在嘗試將它添加到 Tui 編輯器（使用 Vue）。

我知道如何監聽按鍵並將其添加為 Widget，但它有一些缺點。

editor.on('keyup', (editorType, ev) => {

 if (ev.key === '@') {
   const userMenu = this.$refs.userMenu;
   refEditor.addWidget(userMenu.$el, 'top');
 }
});

1. 在“@”彈出窗口消失后寫任何東西。
2. 當我寫類似“@an”的內容並刪除“an”時，它不再顯示彈出窗口。
3. 當我從 markdown 失去焦點然后再次聚焦時，插入符號就在 @ 符號之后，它沒有顯示彈出窗口。

在這一點上，我不確定應該從哪里開始。

所以它應該這樣工作：寫'@'應該顯示彈出窗口，當我寫字母時它應該根據這些字母過濾用戶。 只要@位於單詞的開頭，它就應該使彈出窗口 window 可見，因此 '@@' 或 'f@' 不應該起作用。

使用：ES6+、Vue 2、Tui 編輯器、Vuetify。

Answer 1

所以邏輯應該是這樣的：

1. 用戶鍵入輸入，我們使用v-model將其附加到數據 object。我們希望將數據變量isTag為 false
2. 我們想聽每一個詞，直到我們聽到“@”，所以基本上，我們想在輸入數據為空時聽第一次點擊
3. 如果我們聽到“@”，我們將isTag設置為 true
4. 現在，使用v-if ，我們可以有條件地打開我們的模式，並使用v-model來監聽輸入數據的變化。

不懂tui-editor ，只能幫你vue代碼； 它會是那樣的（jsfiddle）