el-mention

Mention Component

Mention allows users to mention someone or something in an input field.

When to Use

• User mentions (@username)
• Item references
• Tagging functionality
• Rich text inputs

Basic Usage

<template>
  <el-mention
    v-model="value"
    :options="options"
    placeholder="Type @ to mention"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  { value: 'user1', label: 'User 1' },
  { value: 'user2', label: 'User 2' },
  { value: 'user3', label: 'User 3' }
]
</script>

Textarea Mode

<template>
  <el-mention
    v-model="value"
    :options="options"
    type="textarea"
    placeholder="Type @ to mention"
  />
</template>

Custom Props

<template>
  <el-mention
    v-model="value"
    :options="options"
    :props="{ value: 'id', label: 'name' }"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  { id: '1', name: 'User 1' },
  { id: '2', name: 'User 2' }
]
</script>

Custom Label

<template>
  <el-mention v-model="value" :options="options">
    <template #label="{ item }">
      <div style="display: flex; align-items: center;">
        <el-avatar :size="24" />
        <span>{{ item.label }}</span>
      </div>
    </template>
  </el-mention>
</template>

Remote Loading

<template>
  <el-mention
    v-model="value"
    :options="options"
    :loading="loading"
    @search="handleSearch"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = ref([])
const loading = ref(false)

const handleSearch = async (pattern, prefix) => {
  loading.value = true
  const res = await fetch(`/api/users?q=${pattern}`)
  options.value = await res.json()
  loading.value = false
}
</script>

Custom Trigger

<template>
  <el-mention
    v-model="value"
    :options="options"
    prefix="#"
    placeholder="Type # to tag"
  />
</template>

Delete as Whole