Vue DevUI
主题

Mention 提及

提及组件。

何时使用

用于在输入中提及某人或某事，常用于发布、聊天或评论功能。

基本用法

展示提及组件的基本使用方法。

<template> <div class="demo-spacing"> <d-mention :suggestions="suggestions" @select="handleSelect"></d-mention> </div> </template> <script lang="ts" setup> const suggestions = [ { id: 1, value: 'javascript', }, { id: 2, value: 'Vue', }, { id: 3, value: 'React', }, { id: 4, value: 'Angular', }, { id: 5, value: 'Html', }, { id: 6, value: 'Css', }, { id: 7, value: 'Koa', }, { id: 8, value: 'Express', }, { id: 9, value: 'Nuxt', }, { id: 10, value: 'Next', }, ]; const handleSelect = (val) => { console.log(val); }; </script>

自定义前缀

自定义触发字符，默认为@，可以定义为数组。

<template> <div class="demo-spacing"> <d-mention :suggestions="suggestions" :trigger="triggers"></d-mention> </div> </template> <script lang="ts" setup> const triggers = ['@', '#']; const suggestions = [ { id: 1, value: 'javascript', }, { id: 2, value: 'Vue', }, { id: 3, value: 'React', }, { id: 4, value: 'Angular', }, { id: 5, value: 'Html', }, { id: 6, value: 'Css', }, { id: 7, value: 'Koa', }, { id: 8, value: 'Express', }, { id: 9, value: 'Nuxt', }, { id: 10, value: 'Next', }, ]; </script>

异步加载

有时候数据是异步获取的，可以采取异步加载的方式。

<template> <div class="demo-spacing"> <d-mention :suggestions="suggestions" :loading="loading" @change="onSearchChange"></d-mention> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; const loading = ref(true); const suggestions = ref([]); const onSearchChange = (val: string) => { loading.value = true; fetchSuggestions(val, (result) => { suggestions.value = result; loading.value = false; }); }; const fetchSuggestions = (value: string, callback: (suggestions: string[]) => void) => { const users = [ { id: 1, value: 'javascript', }, { id: 2, value: 'Vue', }, { id: 3, value: 'React', }, { id: 4, value: 'Angular', }, { id: 5, value: 'Html', }, { id: 6, value: 'Css', }, { id: 7, value: 'Koa', }, { id: 8, value: 'Express', }, { id: 9, value: 'Nuxt', }, { id: 10, value: 'Next', }, ]; setTimeout(() => { const result = users.filter((item) => { return item.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1; }); return callback(result); }, 1000); }; </script>

向上展开

搜索列表选项还可以向上展开。

<template> <div class="demo-spacing"> <d-mention :suggestions="suggestions" position="top"></d-mention> </div> </template> <script lang="ts" setup> const suggestions = [ { id: 1, value: 'javascript', }, { id: 2, value: 'Vue', }, { id: 3, value: 'React', }, { id: 4, value: 'Angular', }, ]; </script>

自定义模板

也可以自定义展示内容模板。

<template> <div class="demo-spacing"> <d-mention :suggestions="suggestions" :dmValueParse="{ value: 'name', id: 'id' }"> <template #template="{ item }"> <d-avatar style="text-align: right" :name="item.name" :width="18" :height="18"></d-avatar> <span style="margin-left: 8px">{{ item.name }} - {{ item.id }}</span> </template> </d-mention> </div> </template> <script lang="ts" setup> const suggestions = [ { name: 'C#', id: 1, }, { name: 'C', id: 2, }, { name: 'C++', id: 3, }, { name: 'Python', id: 4, }, { name: 'Java', id: 5, }, { name: 'JavaScript', id: 6, }, { name: 'Go', id: 7, }, ]; </script>

Mention 参数

参数名类型默认说明跳转 Demo
suggestionsarray-必填，建议数据源基本用法
positiontop / bottombottom可选，建议框位置向上展开
notFoundContentstringNo suggestion matched可选，用于在没有匹配到数据的时候的提示-
loadingbooleanfalse可选，异步加载数据源的时候是否显示加载效果异步加载
dmValueParse{value: string, id: string}{value: value, id: id}可选，建议选项的取值方法异步加载
triggerstring[]['@']可选，触发组件的前缀符自定义前缀
show-glow-stylebooleantrue可选，是否展示悬浮发光效果

Mention 事件

参数名类型默认说明跳转 Demo
selectFunction({value: string, id: string})-触发选中建议基本用法
changeFunction(value: string)-输入框 change 事件异步加载
粤A2-20044005号