antd-designed-vue
layout
基础用法
<a-layout>
<a-layout-sider class="lay-sider">Sider</a-layout-sider>
<a-layout-header class="lay-header">Header</a-layout-header>
<a-layout-content class="lay-content">content</a-layout-content>
<a-layout-footer class="lay-header">footer</a-layout-footer>
</a-layout>
class 组件的类名
style 组件自定义样式
hasSider 是否有sider
Layout.Sider
collapsed 边栏收起状态 v-model
defaultCollapsed 默认收起状态
reberseArrow 翻转折叠提示箭头
trigger 自定义trigger
width 自定义边栏宽度
theme 设置主题颜色 light|dark
colllapsible 是否可以收起
collapsedWidth 收缩宽度
collapse 收缩回调
breakpoint 断点回调
Grid
grid布局 24等分
<a-row>
<a-col>
...
</a-col>
<a-col>
...
</a-col>
</a-row>
Row.api
align flex 下的对齐方式， top, middle, bottom
gutter 栅隔间隔 number
justify flex 下水平排列的对其方式
type 布局模式 flex
Col.api
offset 向左偏移的间隔格数
order 栅格顺序
pull 向左移动个数
push 向右移动格数
span 栅格占位格数
affix
用于定位按钮相对滚动条的位置
<a-affix offsetTop=number offsetBottom=number ></a-affix>
Menu
<a-menu mode="horizontal">
<a-menu-item>
<a-icon type="mail"></a-icon>
<span>mail</span>
</a-menu-item>
<a-menu-item>
<a-icon type="mail"></a-icon>
<span>mail</span>
</a-menu-item>
<a-menu-item>
<a-icon type="mail"></a-icon>
<span>mail</span>
</a-menu-item>
</a-menu>
menu.api
mode 展现模式 vertical | vertical-right | horizontal | inline
theme light dark
selectable 是否可以选中
multiple 是否允许多选
inlineCollapsed inline 时菜单是否是收起状态
selectedKeys 当前选中的菜单项 key 数组
subMenuCloseDelay 用户鼠标离开子菜单后关闭延时
menu.event
click function({ item, key, keyPath })
openChange function(openKeys: string[])
select function({ item, key, selectedKeys })
deselect function({ item, key, selectedKeys })
menu.item
disabled 禁用子菜单
key 菜单唯一标示
title 收缩时展示的悬浮标题
menu.subMenu
disabled 禁用菜单
key 唯一标示
title 子菜单单项值
subMenu.event
titleClick 点击子菜单标题
Menu.ItemGroup
title 分组标题
Pagination分页组件
<a-pagination :total="500" defaultCurrent="6"></a-pagination>
current 当前页数
defaultCurrent 默认当前页数
defaultPageSize 默认每页条数
pageSize 每页条数
showTotal 显示数据总量和当前数据顺序
size 最小分页尺寸
total 数据总条数
simple 简单模式
showTotal 显示数据总量和当前数据顺序
event
change 当前页码变动时回调
showSizeChange pageSize变化的回调
step 步骤条
current 当前状态
direction 步骤方向
size 指定大小
status 可选状态
initial 起始序号，默认是从0开始
labelPlacement 指定标签的放置位置
progressDot 点状步骤条，可以设置为一个作用域插槽 Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})"
Steps.step
description 详情 string|slot
icon 图标 string | slot
status 状态 string wait|process|finish|error
title 标题 string
