antd-designed-vue
popover
基本使用
<a-popover>
<a href="javascript:;">Invite 一 {{record.name}}</a>
<template slot="content">
<div>Hello world!!!</div>
<div>Hello World</div>
</template>
<span slot="title">Title</span>
</a-popover>
title 设置标题 string|slot|vNode
content 设置主要内容 string|slot|vNode
placement 可以设置十二个方向
trigger 设置触发方式 'focus|click|hover'
arrowPointAtCenter 设置箭头是否指向组件中心 boolean
avatar
<a-avatar> </a-avatar>
shape 头像形状 Enum{ 'circle', 'square' }
icon 制定头像图标 string
size 指定头像大小 number|Enum{ 'large', 'small', 'default' }
src 指定头像链接地址
alt 指定头像无法显示时替代文本
loadError 图片加载失败返回的事件，返回boolean
badge
<a-badge count="10"></a-badge>
count 需要显示的数字
numberStyle 自定义显示的样式
overflowCount 超出某个数字时显示 +
status 小点表示状态
offset 偏移状态 [x, y]
card
title 标题 string | slot
loading 显示加载状态 boolean
cover 封面 slot
extra 右上角可操作区域 slot| string
bodered 是否有边框 boolean
actions 底部可操作区域
tabList 页签标题列表, 可以通过scopedSlots属性自定义tab Array<{key: string, tab: any, scopedSlots: {tab: 'XXX'}}>
activeTabKey 当前标签页激活的key
defaultActiveKey 默认的tabkey
list
list 作为列表渲染使用
<a-list>
<a-list-item>
...
</a-list-item>
</a-list>
itemLayout 列表元素的渲染方向
dataSource 主数据源
bordered 是否带边框
header 列表头部 string|slot
footer 列表尾部 string|slot
split 是否带分割线
loading 首次加载时填充
renderItem 作为渲染列表子元素的插槽 slot
grid 用于itemLayout 为 horizontial 时使用 { gutter: 20, column: 2}, 用于渲染多列列表
rowKey key的取值 item => string|number
pagination 和 loadMore 有些冲突，需要再次验证
List.Item
extra 额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧
actions 列表操作组，根据 itemLayout 的不同, 位置在卡片底部或者最右侧
