vue-admin-kit

Appearance

子组件导出 ​

除了 PageTemplate 和 Table 主组件外，vue-admin-kit 还导出以下子组件，可以单独使用。

组件列表 ​

布局组件 ​

组件说明
PageTemplate主 CRUD 页面模板组件
Table基于 VXE-Table 封装的表格组件
Descriptions数据展示组件，支持字典、文件、富文本等展示类型

弹窗组件 ​

组件说明
FormDialog表单弹窗，用于新增/编辑
DetailDialog详情弹窗，用于查看数据详情
Drawer抽屉组件，侧边滑出的面板
FileListDialog文件列表弹窗

搜索组件 ​

组件说明
SearchForm搜索表单，配置化生成搜索栏

表单控件 ​

组件说明
Input输入框，支持后缀单位
Textarea多行文本输入
Number数字输入框，支持精度、范围
Select下拉选择器，支持字典、远程搜索
SelectChange搜索选择组件，支持搜索并选择关联数据
Radio单选框，支持字典
Date日期选择器，支持日期、日期时间、范围
Time时间选择器
Upload文件上传组件
UploadCard卡片式文件上传，支持多类型文件分组上传
WangeEitor富文本编辑器（基于 WangEditor）
Line分割线，可带标题和按钮
InputGroup输入框组，多个输入框的组合
AddableInputGroup可添加输入组，支持动态添加/删除

辅助组件 ​

组件说明
DictHelper字典转换组件，将字典值转换为标签显示
DictTag字典标签组件，纯粹的字典标签显示
SafeHtml安全 HTML 渲染（使用 DOMPurify）

导入方式 ​

typescript
import {
  // 布局组件
  PageTemplate,
  Table,
  Descriptions,

  // 弹窗组件
  FormDialog,
  DetailDialog,
  Drawer,
  FileListDialog,

  // 搜索组件
  SearchForm,

  // 表单控件
  Input,
  Textarea,
  Number,
  Select,
  SelectChange,
  Radio,
  Date,
  Time,
  Upload,
  UploadCard,
  WangeEitor,
  Line,
  InputGroup,
  AddableInputGroup,

  // 辅助组件
  DictHelper,
  DictTag,
  SafeHtml,

  // 工具函数
  downloadFile,
  useTableHeightEmitter,
} from "vue-admin-kit";

表单控件详解 ​

Input 输入框 ​

vue
<script setup>
import { Input } from "vue-admin-kit";
</script>

<template>
  <Input
    v-model="formData.name"
    placeholder="请输入名称"
    suffix="元"
    suffix-type="text"
  />
</template>

Number 数字输入 ​

vue
<script setup>
import { Number } from "vue-admin-kit";
</script>

<template>
  <Number
    v-model="formData.price"
    :min="0"
    :max="99999"
    :precision="2"
    :step="0.1"
    suffix="元"
  />
</template>

Select 下拉选择 ​

vue
<script setup>
import { Select } from "vue-admin-kit";
</script>

<template>
  <!-- 使用字典 -->
  <Select
    v-model="formData.status"
    dict-type="sys_status"
    placeholder="请选择状态"
  />

  <!-- 使用静态选项 -->
  <Select
    v-model="formData.type"
    :options="[
      { label: '类型A', value: 'a' },
      { label: '类型B', value: 'b' },
    ]"
  />

  <!-- 远程搜索 -->
  <Select
    v-model="formData.userId"
    dict-type="user_list"
    filterable
    remote
    remote-param="name"
  />
</template>

Date 日期选择 ​

vue
<script setup>
import { Date } from "vue-admin-kit";
</script>

<template>
  <!-- 单日期 -->
  <Date v-model="formData.birthday" date-type="date" />

  <!-- 日期时间 -->
  <Date v-model="formData.createTime" date-type="datetime" />

  <!-- 日期范围 -->
  <Date v-model="formData.dateRange" date-type="daterange" />
</template>

Radio 单选 ​

vue
<script setup>
import { Radio } from "vue-admin-kit";
</script>

<template>
  <Radio v-model="formData.sex" dict-type="sys_user_sex" />
</template>

Upload 文件上传 ​

vue
<script setup>
import { Upload } from "vue-admin-kit";
</script>

<template>
  <Upload
    v-model="formData.files"
    :limit="5"
    accept=".pdf,.doc,.docx"
    biz-type="attachment"
  />
</template>

UploadCard 卡片上传 ​

vue
<script setup>
import { UploadCard } from "vue-admin-kit";
</script>

<template>
  <UploadCard
    v-model="formData.images"
    :upload-config-list="[
      { prop: 'cover', label: '封面图', limit: 1, accept: 'image/*' },
      { prop: 'gallery', label: '图片集', limit: 9, accept: 'image/*' },
    ]"
  />
</template>

Line 分割线 ​

vue
<script setup>
import { Line } from "vue-admin-kit";
</script>

<template>
  <!-- 简单分割线 -->
  <Line label="基本信息" />

  <!-- 带按钮的分割线 -->
  <Line label="联系人信息" btn-title="添加" :btn-click="handleAddContact" />
</template>

DictTag 字典标签 ​

vue
<script setup>
import { DictTag, useDictOptions } from "vue-admin-kit";

const statusOptions = useDictOptions("sys_status");
</script>

<template>
  <DictTag :options="statusOptions" :value="row.status" />
</template>

SafeHtml 安全渲染 ​

vue
<script setup>
import { SafeHtml } from "vue-admin-kit";
</script>

<template>
  <SafeHtml :content="htmlContent" />
</template>

弹窗组件详解 ​

FormDialog 表单弹窗 ​

vue
<script setup>
import { ref } from "vue";
import { FormDialog } from "vue-admin-kit";

const visible = ref(false);
const formData = ref({});
const formConfig = [
  { type: "input", prop: "name", label: "名称", required: true },
  { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
];

const handleSubmit = async () => {
  // 提交逻辑
};
</script>

<template>
  <FormDialog
    v-model="visible"
    v-model:form-data="formData"
    title="新增用户"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

DetailDialog 详情弹窗 ​

vue
<script setup>
import { ref } from "vue";
import { DetailDialog } from "vue-admin-kit";

const visible = ref(false);
const detailData = ref({});
const formConfig = [
  { type: "input", prop: "name", label: "名称" },
  { type: "select", prop: "status", label: "状态", dictType: "sys_status" },
];
</script>

<template>
  <DetailDialog
    v-model="visible"
    :detail-data="detailData"
    :form-config="formConfig"
  />
</template>

Drawer 抽屉 ​

vue
<script setup>
import { ref } from "vue";
import { Drawer } from "vue-admin-kit";

const visible = ref(false);
</script>

<template>
  <Drawer v-model="visible" title="详情" size="50%">
    <template #default>
      <!-- 抽屉内容 -->
    </template>
  </Drawer>
</template>

FileListDialog 文件列表弹窗 ​

vue
<script setup>
import { ref } from "vue";
import { FileListDialog } from "vue-admin-kit";

const visible = ref(false);
const fileList = ref([
  { url: "https://example.com/file.pdf", originalName: "文件.pdf" },
]);
</script>

<template>
  <FileListDialog v-model="visible" :file-list="fileList" />
</template>

工具函数 ​

downloadFile ​

文件下载工具函数：

typescript
import { downloadFile } from "vue-admin-kit";

// 下载文件
await downloadFile(api.downloadTemplate, "导入模板");

// 指定文件类型
await downloadFile(api.exportData, "数据导出", "xlsx");

useTableHeightEmitter ​

表格高度事件发射器：

typescript
import { useTableHeightEmitter } from "vue-admin-kit";

const emit = defineEmits(["setTableHeight"]);
const { emitSetTableHeight } = useTableHeightEmitter(emit);

// 触发高度更新
emitSetTableHeight();

Released under the MIT License.

Copyright © 2025 devkitio