美文网首页
2019-05-14 antd-design-vue 组件文档2

2019-05-14 antd-design-vue 组件文档2

作者: rub1cky | 来源:发表于2019-05-14 17:44 被阅读0次

    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

    paginationloadMore 有些冲突,需要再次验证

    List.Item

    extra 额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧

    actions 列表操作组,根据 itemLayout 的不同, 位置在卡片底部或者最右侧

    相关文章

      网友评论

          本文标题:2019-05-14 antd-design-vue 组件文档2

          本文链接:https://www.haomeiwen.com/subject/zweeaqtx.html