Nomore 没有更多
极奢风格的列表触底提示组件,用于在列表加载完成后展示“没有更多了”提示,提供 line(渐变细线)、dot(两端圆点)与 plain(纯文本)三种精致形态。
代码示例
1. 基础用法 (Basic Usage)
vue
<template>
<mu-nomore text="— 没有更多数据了 —" />
</template>2. 3 种分割形态 (3 Styles)
通过 type 属性在 line、dot 与 plain 之间切换。
vue
<template>
<mu-nomore type="line" text="渐变细线分割" />
<mu-nomore type="dot" text="两端圆点分割" />
<mu-nomore type="plain" text="纯文本简短风格" />
</template>3. 带图标与自定义色彩 (Icon & Color)
配置 icon 矢量图标与 color 主题色。
vue
<template>
<mu-nomore type="line" icon="check" text="已加载完全部数据" color="#10B981" />
</template>API 属性说明 (Props)
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | 提示文本内容 | String | - | '没有更多了' |
| type | 分割线形态 | String | line (细渐变线) | dot (两端圆点) | plain (纯文本) | 'line' |
| color | 提示文本及图标颜色 | String | - | '' (自适应暗黑模式) |
| icon | 图标名称 | String | - | '' |
插槽说明 (Slots)
| 插槽名 | 说明 |
|---|---|
| default | 自定义中间提示内容 |