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 的不同, 位置在卡片底部或者最右侧