hz-vue3-ui

介绍 📖

hz-vue3-ui 是恒正集体 vue3 组件 ui 库

使用方法 📚

import { xxx } from "hz-vue3-ui";

组件功能 🔨

Card

是一个卡片组件，主要用来放置最外层的卡片内容。

• Props： type 卡片类型 default | tabs | content 类型： String title 卡片标题：如:'xxx' 类型： String height 卡片高度:如:'100px' 类型： String tabsList 卡片 tabs 列表：如:[{label:'xxx',name:'xxx'}] 类型： Array 只有类型为 tabs 需要 other 其他内容：如:'xxx' 类型： String

• Events： other 属性值改变时触发 类型： Function(index) changeTab 选中 tabs 时触发 类型： Function(index)

• slot — 默认插槽

DescriptionCard

是一个描述卡片组件，主要用来放置描述内容。

• Props： title 卡片标题：如:'xxx' 类型： String backgroundImg 卡片背景图片 ：如:'xxx' 类型： String icon 图标：如:'xxx' 类型： String

• Events： click 卡片点击事件 类型： Function

Detonation

是一个开放性卡片组件，主要用来放置开放性内容，如登入提示，日报周报跳转等。

• Props： backgroundImg 卡片背景图片 ：如:'xxx' 类型： String
• slot head 头部插槽 middle 中间插槽 operate 底部操作插槽

ListCard

是一个列表卡片组件，主要用来放置列表内容。

• Props： data 卡片数据：如:[{title:'标题',subTitle:'副标题'，date:"日期"}] 类型： Array
• slot header 头部插槽 footer 尾部插槽

Statistics

是一个统计卡片组件，主要用来放置统计内容。

• Props： title 卡片标题：如:'xxx' 类型： String image 卡片图片：如:'xxx' 类型： String num 卡片数字：如:'xxx' 类型： String

安装使用步骤 📔

• Install：

npm install hz-vue3-ui

浏览器支持 🌎

• 本地开发推荐使用 Chrome 最新版浏览器 Download。
• 生产环境支持现代浏览器，不再支持 IE 浏览器，更多浏览器可以查看 Can I Use Es Module。