组件

本项目提供了一套基于 Element Plus 的常用业务组件，适用于后台管理系统开发。以下是各组件的使用说明。

📁 目录结构概览

src/
└── components/
    ├── app-link
    ├── color-picker
    ├── daterange-picker
    ├── del-wrap
    ├── dict-value
    ├── editor
    ├── export-data
    ├── footer-btns
    ├── icon
    ├── icon-button
    ├── image-contain
    ├── link
    ├── material
    ├── overflow-tooltip
    ├── pagination
    ├── pax-desc
    ├── popover-input
    ├── popup
    ├── upload
    └── video-player

🧩 常用组件使用说明

1. `app-link` - 外链/路由跳转组件

示例代码：

<template>
  <app-link to="https://example.com" target="_blank">外链</app-link>
  <app-link to="/dashboard">内部路由</app-link>
</template>

Props：

属性名	类型	默认值	描述
`to`	`string` 或 `object`	必填	路由路径或对象
`replace`	`boolean`	`false`	是否替换当前历史记录

2. `color-picker` - 颜色选择器

示例代码：

<template>
  <color-picker v-model="color" />
</template>

Props：

属性名	类型	默认值	描述
`modelValue`	`string`	`''`	当前颜色值
`resetColor`	`string`	`''`	重置时的颜色值

3. `daterange-picker` - 时间范围选择器

示例代码：

<template>
  <daterange-picker v-model:start-time="start" v-model:end-time="end" />
</template>

Props：

属性名	类型	默认值	描述
`startTime`	`string`	`''`	开始时间
`endTime`	`string`	`''`	结束时间

4. `del-wrap` - 删除图标封装

示例代码：

<template>
  <del-wrap show-close @close="handleClose">
    <div>内容区域</div>
  </del-wrap>
</template>

Props：

属性名	类型	默认值	描述
`showClose`	`boolean`	`true`	是否显示删除按钮

5. `dict-value` - 字典值展示组件

示例代码：

<template>
  <dict-value :options="options" :value="selectedValue" />
</template>

Props：

属性名	类型	默认值	描述
`options`	`Array`	`[]`	字典选项
`value`	`any`	`null`	当前选中值
`config`	`Object`	`{ label: 'name', value: 'value' }`	显示字段配置

6. `editor` - 富文本编辑器（集成 wangEditor）

示例代码：

<template>
  <editor v-model="content" />
</template>

Props：

属性名	类型	默认值	描述
`modelValue`	`string`	`''`	编辑器内容
`mode`	`'default'	'simple'`	`'default'`
`height`	`string	number`	`'100%'`
`width`	`string	number`	`'auto'`
`toolbarConfig`	`IToolbarConfig`	`{}`	工具栏配置

7. `export-data` - 数据导出弹窗组件

示例代码：

<template>
  <export-data :fetch-fun="exportDataApi" :page-size="20" />
</template>

Props：

属性名	类型	默认值	描述
`params`	`Object`	`{}`	请求参数
`pageSize`	`number`	`25`	分页大小
`fetchFun`	`Function`	必填	获取导出数据的方法

示例代码：

<template>
  <footer-btns fixed>
    <el-button type="primary">提交</el-button>
  </footer-btns>
</template>

Props：

属性名	类型	默认值	描述
`fixed`	`boolean`	`true`	是否固定在底部

9. `icon` - 图标组件（支持 Element Plus & 本地 SVG）

示例代码：

<template>
  <icon name="el-icon-Edit" size="18" color="#f00" />
</template>

Props：

属性名	类型	默认值	描述
`name`	`string`	必填	图标名称
`size`	`string	number`	`'14px'`
`color`	`string`	`'inherit'`	图标颜色

10. `link` - 链接选择器组件（商城页面 / 文章列表 / 自定义链接 / 小程序）

示例代码：

<template>
  <link v-model="selectedLink" />
</template>

Props：

属性名	类型	默认值	描述
`modelValue`	`Object`	`{}`	当前链接对象

11. `material` - 素材管理组件（图片 / 视频 / 文件）

示例代码：

<template>
  <material v-model="fileList" type="image" limit="5" />
</template>

Props：

属性名	类型	默认值	描述
`type`	`string`	`'image'`	类型：`image`, `video`, `file`
`limit`	`number`	`1`	最多选择数量
`fileSize`	`string`	`'100px'`	文件预览尺寸

示例代码：

<template>
  <overflow-tooltip content="这是一段很长的内容" />
</template>

Props：

属性名	类型	默认值	描述
`content`	`string`	必填	要显示的内容
`placement`	`string`	`'top'`	Tooltip 位置
`overfloType`	`string`	`'ellipsis'`	截断方式

13. `pagination` - 分页组件

示例代码：

<template>
  <pagination v-model="pager" @change="getLists" />
</template>

Props：

属性名	类型	默认值	描述
`modelValue`	`Object`	`{}`	分页数据对象
`layout`	`string`	`'sizes, prev, pager, next, jumper'`	布局方式
`pageSizes`	`Array<number>`	`[15, 20, 30, 40]`	可选每页数量

14. `pax-desc` - 描述信息布局组件

示例代码：

<template>
  <pax-desc>
    <pax-desc-item label="用户名">{{ user.name }}</pax-desc-item>
  </pax-desc>
</template>

`pax-desc-item` Props：

属性名	类型	默认值	描述
`label`	`string`	`''`	标签文字
`value`	`string`	`''`	内容值

示例代码：

<template>
  <popover-input placeholder="请输入名称" @confirm="handleSubmit" />
</template>

Props：

属性名	类型	默认值	描述
`value`	`string`	`''`	输入框初始值
`placeholder`	`string`	`''`	占位符
`limit`	`number`	`200`	最大输入长度
`teleported`	`boolean`	`true`	是否插入到 body

示例代码：

<template>
  <popup title="标题" width="500px" @confirm="handleSubmit">
    <template #trigger><el-button>打开弹窗</el-button></template>
    <div>弹窗内容</div>
  </popup>
</template>

Props：

属性名	类型	默认值	描述
`title`	`string`	`''`	弹窗标题
`width`	`string`	`'400px'`	弹窗宽度
`disabled`	`boolean`	`false`	是否禁用触发
`async`	`boolean`	`false`	是否异步关闭

17. `upload` - 上传组件

示例代码：

<template>
  <upload type="image" :data="{ cid: 1 }">
    <el-button>上传图片</el-button>
  </upload>
</template>

Props：

属性名	类型	默认值	描述
`type`	`string`	`'image'`	上传类型
`multiple`	`boolean`	`true`	是否允许多选
`limit`	`number`	`10`	最大上传数
`showProgress`	`boolean`	`false`	是否显示上传进度

18. `video-player` - 视频播放器组件

示例代码：

<template>
  <video-player src="https://example.com/video.mp4" width="100%" height="450px" />
</template>

Props：

属性名	类型	默认值	描述
`src`	`string`	必填	视频地址
`width`	`string`	`'100%'`	播放器宽度
`height`	`string`	`'450px'`	播放器高度

✅ 总结

组件名	功能
`app-link`	支持外链和内链跳转
`color-picker`	颜色选择器
`daterange-picker`	时间范围选择
`del-wrap`	删除按钮包裹组件
`dict-value`	字典值渲染
`editor`	富文本编辑器
`export-data`	数据导出功能
`footer-btns`	底部操作按钮区域
`icon`	图标组件（Element Plus + SVG）
`link`	链接选择器（支持多种链接类型）
`material`	素材管理（图片、视频、文件）
`overflow-tooltip`	超出省略并提示
`pagination`	分页组件
`pax-desc`	描述信息布局
`popover-input`	弹出输入框
`popup`	弹窗组件
`upload`	上传组件
`video-player`	视频播放器

这些组件均已封装好，可直接通过 v-model 控制状态，适用于企业级后台系统快速搭建。

组件

On this page