Z
ZeniCore
/文档中心
文档基础组件

基础组件

2026-04-21 v1.0.0

基础组件

基础组件以 Z 为前缀,基于 Element Plus 二次封装,统一样式和交互体验。

ZButton - 按钮

<ZButton type="primary" icon="lucide:plus" :loading="false">
  按钮文字
</ZButton>
属性名类型默认值说明
typeButtonType'default'按钮类型
sizeButtonSize'default'按钮大小
iconstring''图标名称
loadingbooleanfalse加载状态
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
/>