vue-mention
Mention popper for input and textarea
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>
136 Nov 8, 2022
599 Dec 31, 2022
442 Jan 4, 2023
209 Nov 19, 2022
27 Nov 24, 2022
210 Jan 18, 2022
28 Jul 19, 2022
0 Oct 12, 2017
3 Nov 8, 2020
0 Dec 12, 2019
16 Jan 10, 2022
0 Dec 3, 2019
9 Nov 24, 2022
39 Mar 26, 2022
52 Jan 8, 2023
420 Dec 27, 2022
275 Aug 29, 2022
17 Jul 7, 2022
0 Jan 3, 2022