0.1.9 • Published 9 months ago
zhl-design-vue v0.1.9
zhl-design-vue
基于 vue3 提供高扩展性组件,原生支持,兼容性好
安装
npm i zhl-design-vue引入
import ZhlDesign from 'zhl-design-vue'
const app = createApp(App)
app.use(ZhlDesign)
app.mount('#app')使用
<Back :size="30"/>Back
页面右上角返回功能,支持自定义返回页面
参数
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| size | 显示 Icon 的大小 | number/string | 16（px） | 否 |
| customBack | 自定义跳转页面 | function | - | 否 |
Upload
上传组件,支持之定义样式,单文件上传,多文件
Slot
默认 button 按钮,可自定义插入
参数
| 参数名 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| multiple | 是否多文件上传 | boolean | false | 否 |
方法
| 方法名 | 说明 | 参数 | 参数类型 |
|---|---|---|---|
| uploadChange | 选择文件后回调 | 选择的文件,multiple 状态为多个 | file/file |
Loadding
通用 loadding 组件 提供加载动画，无数据显示
Slot
- loadding 加载动画，替换加载动画
- nData 无数据，替换无数据显示
- 默认插入要显示的内容
参数
| 参数名 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| loadding | 是否加载中 | boolean | / | 否 |
| noData | 是否无数据 | boolean | / | 否 |
Spin
通用 Spin 组件 加载中显示，可以全屏居中显示，调节颜色，是否显示蒙板
参数
| 参数名 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| loadding | 是否加载中 | boolean | / | 否 |
| color | 加载中颜色 | rgb/english | black | 否 |
| isCenter | 是否全屏居中显示 | boolean | false | 否 |
| mask | 全屏显示是否显示蒙板 | boolean | true | 否 |