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

<template>
  <el-mention
    v-model="value"
    :options="options"
    whole
  />
</template>

API Reference

Attributes

Events

Slots

Exposes

Best Practices

1. Use loading for async option loading
2. Use prefix for different trigger characters
3. Use whole for better UX when deleting mentions