介绍
本文介绍了 ShadcnMention 组件的功能和用法。
用法
显示代码
vue
<template>
<ShadcnMention :items="items" />
</template>提示词 (placeholder)
查看代码
vue
<template>
<ShadcnMention placeholder="键入 @ 以提及" />
</template>尺寸 (size)
查看代码
vue
<template>
<ShadcnMention size="small" :items="items" />
<ShadcnMention size="default" :items="items" />
<ShadcnMention size="large" :items="items" />
</template>类型 (type)
查看代码
vue
<template>
<ShadcnMention type="primary" :items="items" />
<ShadcnMention type="success" :items="items" />
<ShadcnMention type="warning" :items="items" />
<ShadcnMention type="error" :items="items" />
</template>禁用 (disabled)
查看代码
vue
<template>
<ShadcnMention disabled :items="items" />
</template>触发字符 (trigger)
查看代码
vue
<template>
<ShadcnMention trigger="#" :items="items" />
</template>自定义插槽 (item)
查看代码
vue
<template>
<ShadcnMention v-model="value" :items="items">
<template #item="{ item, selected }">
<div class="flex items-center gap-2">
<div class="flex space-x-2 items-center">
<div class="font-medium">{{ item.id }}</div>
<div class="text-sm text-gray-500">{{ item.name }}</div>
</div>
<span v-if="selected" class="ml-auto">
<ShadcnIcon icon="Check"/>
</span>
</div>
</template>
</ShadcnMention>
</template>最大项目数 (max)
查看代码
vue
<template>
<ShadcnMention :items="items" max="2" />
</template>表单 (form)
查看代码
vue
<template>
<ShadcnForm v-model="formState">
<ShadcnFormItem name="mentions" label="提及对象" :rules="[{ required: true, message: '请选择提及对象' }]">
<ShadcnMention v-model="formState.mentions" name="mentions" :items="items" />
</ShadcnFormItem>
</ShadcnForm>
</template>