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 邊欄收起狀態(tài) v-model
defaultCollapsed 默認收起狀態(tài)
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 向左偏移的間隔格數(shù)
order 柵格順序
pull 向左移動個數(shù)
push 向右移動格數(shù)
span 柵格占位格數(shù)
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 展現(xiàn)模式 vertical | vertical-right | horizontal | inline
theme light dark
selectable 是否可以選中
multiple 是否允許多選
inlineCollapsed inline 時菜單是否是收起狀態(tài)
selectedKeys 當前選中的菜單項 key 數(shù)組
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 當前頁數(shù)
defaultCurrent 默認當前頁數(shù)
defaultPageSize 默認每頁條數(shù)
pageSize 每頁條數(shù)
showTotal 顯示數(shù)據(jù)總量和當前數(shù)據(jù)順序
size 最小分頁尺寸
total 數(shù)據(jù)總條數(shù)
simple 簡單模式
showTotal 顯示數(shù)據(jù)總量和當前數(shù)據(jù)順序
event
change 當前頁碼變動時回調
showSizeChange pageSize變化的回調
step 步驟條
current 當前狀態(tài)
direction 步驟方向
size 指定大小
status 可選狀態(tài)
initial 起始序號叫搁，默認是從0開始
labelPlacement 指定標簽的放置位置
progressDot 點狀步驟條，可以設置為一個作用域插槽 Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})"
Steps.step
description 詳情 string|slot
icon 圖標 string | slot
status 狀態(tài) string wait|process|finish|error
title 標題 string
