Vue 下实现评论中 @ mention 功能

在 Vue 中实现评论的 @mention 功能

简介

在社交媒体平台上，@mention 功能已成为一种必备功能，它允许用户在评论中提及其他人。通过该功能，被提及的人会收到通知并能够快速做出回应。本文将深入探討如何使用 Vue.js 在評論中實現 @mention 功能，並提供具體的代碼範例。

步驟

1. 前置準備

• 安裝 vue-tribute 套件，可使用 npm 或 yarn 安裝。
• 建立新的 Vue 專案。
• 在專案中新增一個名為 CommentBox.vue 的元件。

2. 實作 @mention 功能

• 在 CommentBox.vue 元件中，加入 <textarea> 元素作為評論輸入欄位。
• 為 <textarea> 設定 contenteditable 屬性，允許使用者編輯。
• 設定 @input 事件監聽器，當使用者輸入文字時觸發。
• 在 @input 事件監聽器中，使用 vue-tribute 套件實作 @mention 功能。

3. 樣式與互動

• 為 <textarea> 套用適當的樣式，使其看起來像評論框。
• 當使用者輸入 @ 符號時，顯示下拉選單，其中包含可被提及的使用者清單。
• 當使用者選擇某個使用者時，在評論框中插入該使用者的使用者名稱。

4. 總結

透過遵循上述步驟，我們成功在 Vue 中實作了評論中的 @mention 功能。此功能允許使用者在評論中提及他人，而被提及的使用者將會收到通知並能迅速做出回應。

程式碼範例

<template>
  <div class="comment-box">
    <textarea v-model="comment" @input="handleInput" contenteditable></textarea>
  </div>
</template>

<script>
import Vue from 'vue';
import VueTribute from 'vue-tribute';

Vue.use(VueTribute);

export default {
  data() {
    return {
      comment: '',
    };
  },
  methods: {
    handleInput(event) {
      this.$tribute.showMenu(event);
    },
  },
};
</script>

<style>
.comment-box {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.comment-box textarea {
  width: 100%;
  height: 100%;
}
</style>

常見問題

1. 如何自訂下拉選單的樣式？

   您可以使用 CSS 設定下拉選單的樣式，例如調整字體大小、顏色和背景顏色。

2. 如何限制只能提及特定使用者？

   您可以使用 mention 屬性來限制可被提及的使用者清單。

3. 如何觸發 @mention 功能後，在評論框中自動完成使用者名稱？

   可以使用 autocomplete-on 屬性來啟用自動完成功能。

4. 如何在評論框中插入提及的使用者名稱？

   使用 replace-text 屬性來設定當選擇使用者時，在評論框中插入的文字。

5. 如何獲取被提及使用者的資訊？

   在 @mention 事件監聽器中，您可以透過 payload.item 來獲取被提及使用者的資訊。