快捷導(dǎo)航

基于Vue實(shí)現(xiàn)一個(gè)textarea幽靈建議功能

更新時(shí)間：2023年09月02日 14:33:30 作者：60歲咯

不知道你有沒(méi)有發(fā)現(xiàn)Bing AI聊天有個(gè)輸入提示功能,在用戶輸入部分內(nèi)容時(shí)后面會(huì)給出灰色提示文案,用戶只要按下tab鍵就可以快速添加提示的后續(xù)內(nèi)容,我將這個(gè)功能稱為幽靈建議,接下來(lái)我將用Vue框架來(lái)實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下

不知道你有沒(méi)有發(fā)現(xiàn)Bing AI聊天有個(gè)輸入提示功能，在用戶輸入部分內(nèi)容時(shí)后面會(huì)給出灰色提示文案。用戶只要按下tab鍵就可以快速添加提示的后續(xù)內(nèi)容。我將這個(gè)功能稱為幽靈建議。接下來(lái)我將用Vue框架來(lái)實(shí)現(xiàn)這個(gè)功能。

布局樣式

布局使用label標(biāo)簽作為容器，這樣即使建議內(nèi)容在上層，也不會(huì)影響輸入框的輸入。

<label class="container">
  <textarea></textarea>
  <div class="ghost-content"></div>
</label>

樣式需要確保輸入框與建議內(nèi)容容器除了顏色外都要一致。建議內(nèi)容可以通過(guò)z-index: -1置于輸入框底部，但要注意輸入框必須是透明背景。

.container {
  position: relative;
  display: block;
  width: 300px;
  height: 200px;
  font-size: 14px;
  line-height: 21px;
}
.container textarea {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: #212121;
  background-color: #fff;
  outline: none;
}
.ghost-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #212121;
  opacity: 0.3;
}

顯示邏輯

顯示邏輯比較簡(jiǎn)單，當(dāng)輸入框中顯示輸入內(nèi)容時(shí)，找到匹配的內(nèi)容后將其顯示在建議容器中。以下是代碼示例：

import { ref } from 'vue'
const content = ref('') // 輸入框內(nèi)容
const ghostContent = ref('') // 建議內(nèi)容
const suggestions = ['你好啊', '怎么學(xué)編程'] // 建議列表
const handleInput = () => {
  ghostContent.value = '' // 內(nèi)容變化時(shí)，清空建議
  // 如果為空或者建議內(nèi)容改變，則不進(jìn)行后續(xù)匹配
  if (content.value === '') {
    return
  }
  const suggestion = suggestions.find((item) => item.startsWith(content.value))
  if (suggestion) {
    ghostContent.value = suggestion
  }
}
const handleTabKeydown = () => {
  // 監(jiān)聽(tīng)tab鍵按下，將輸入框內(nèi)容設(shè)置為建議內(nèi)容，同時(shí)清空建議內(nèi)容
  content.value = ghostContent.value
  ghostContent.value = ''
}

按照以上代碼的寫(xiě)法，已經(jīng)可以實(shí)現(xiàn)幽靈建議的功能了。但還存在一個(gè)小問(wèn)題，輸入框內(nèi)容和建議內(nèi)容的重疊部分會(huì)顯得比較粗。因此，最好將重疊部分的文字顏色設(shè)置為透明。我的解決方法是使用span標(biāo)簽來(lái)包裹重疊部分的內(nèi)容，然后將span的文字樣式設(shè)置為透明。此外，為了表示可以使用tab鍵，我在末尾添加了→符號(hào)。改進(jìn)后的代碼如下：

// 重復(fù)部分省略
// ...
const ghostHTML = ref('') // 建議內(nèi)容HTML
const handleInput = () => {
  ghostContent.value = ''
  ghostHTML.value = ''
  if (content.value === '' || fromSuggestion) {
    fromSuggestion && (fromSuggestion = false)
    return
  }
  const suggestion = suggestions.find((item) => item.startsWith(content.value))
  if (suggestion) {
    ghostContent.value = suggestion
    ghostHTML.value = suggestion.replace(content.value, `<span>${content.value}</span>`) + ' →' // 顯示內(nèi)容替換
  }
}
const handleTabKeydown = () => {
  content.value = ghostContent.value
  ghostContent.value = ''
  ghostHTML.value = ''
}

最后，補(bǔ)充一下HTML代碼。