vue-mention
Mention popper for input and textarea
Vue 3 support
Install the v2 for Vue 3 support:
pnpm i vue-mention@next
You also need to install floating-vue:
pnpm i floating-vue
And add the default floating-vue styles:
import 'floating-vue/dist/style.css'floating-vue 1 (Vue 2)
Install the special version for floating-vue v1 (for Vue 2) support:
pnpm i [email protected]
1.0.0-floating-vue1 otherwise you'll install v1.1.0 which is for v-tooltip 2.
You also need to install floating-vue v1:
pnpm i floating-vue@vue2
And add the default floating-vue styles:
import 'floating-vue/dist/style.css'Sponsors
Quick start
<script>
import { Mentionable } from 'vue-mention'
const users = [
{
value: 'akryum',
firstName: 'Guillaume',
},
{
value: 'posva',
firstName: 'Eduardo',
},
{
value: 'atinux',
firstName: 'Sébastien',
},
]
const issues = [
{
value: 123,
label: 'Error with foo bar',
searchText: 'foo bar'
},
{
value: 42,
label: 'Cannot read line',
searchText: 'foo bar line'
},
{
value: 77,
label: 'I have a feature suggestion',
searchText: 'feature'
}
]
export default {
components: {
Mentionable,
},
data () {
return {
text: '',
items: [],
}
},
methods: {
onOpen (key) {
this.items = key === '@' ? users : issues
},
},
}
</script>
<template>
<Mentionable
:keys="['@', '#']"
:items="items"
offset="6"
insert-space
@open="onOpen"
>
<textarea
v-model="text"
/>
<template #no-result>
<div class="dim">
No result
</div>
</template>
<template #item-@="{ item }">
<div class="user">
{{ item.value }}
<span class="dim">
({{ item.firstName }})
</span>
</div>
</template>
<template #item-#="{ item }">
<div class="issue">
<span class="number">
#{{ item.value }}
</span>
<span class="dim">
{{ item.label }}
</span>
</div>
</template>
</Mentionable>
</template>