基础组件
基础组件以 Z 为前缀,基于 Element Plus 二次封装,统一样式和交互体验。
ZButton - 按钮
<ZButton type="primary" icon="lucide:plus" :loading="false">
按钮文字
</ZButton>| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | ButtonType | 'default' | 按钮类型 |
| size | ButtonSize | 'default' | 按钮大小 |
| icon | string | '' | 图标名称 |
| loading | boolean | false | 加载状态 |
| iconPosition | 'left' | 'right' | 'left' | 图标位置 |
ZInput - 输入框
<ZInput
v-model="value"
prefix-icon="lucide:search"
placeholder="请输入内容"
clearable
/>ZSelect - 选择器
<ZSelect
v-model="value"
:options="options"
placeholder="请选择"
filterable
/>ZForm - 表单
<ZForm
:model-value="formData"
:fields="fields"
@submit="handleSubmit"
/>ZTable - 表格
<ZTable
:data="tableData"
:columns="columns"
:loading="loading"
border
stripe
/>ZDialog - 对话框
<ZDialog
v-model="dialogVisible"
title="对话框标题"
width="500px"
>
<p>对话框内容</p>
</ZDialog>ZUpload - 上传
<ZUpload
v-model="fileList"
action="/api/upload"
:multiple="true"
:limit="10"
accept="image/*"
/>ZScrollbar - 滚动条
<ZScrollbar height="400px">
内容区域
</ZScrollbar>ZSpace - 间距
<ZSpace direction="horizontal" size="large">
<span>项目1</span>
<span>项目2</span>
</ZSpace>ZRadio - 单选框
<ZRadio
v-model="value"
:options="options"
/>ZCheckbox - 多选框
<ZCheckbox
v-model="values"
:options="options"
/>ZEmpty - 空状态
<ZEmpty description="暂无数据" />ZLoading - 加载
<ZLoading :loading="true">
内容区域
</ZLoading>ZCarousel - 幻灯片
<ZCarousel
:items="carouselItems"
height="400px"
autoplay
/>