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