建设管理平台

SuitCard 卡片

# 说明

统一页面容器，几乎每一个页面都是需要使用，可以根据浏览器大小进行适配宽度与最小高度，依赖于框架层store.getters.appMainHeight

# 基本示例

卡片内容高度默认固定 计算方式根据卡片高度-标题高度通过设置fixedCenter为false可以进行自适应

角色管理 
<template>
    <suit-card 
        title="角色管理"                  
    >
        角色管理
    </suit-card>
</template>
Expand Copy

# 修改icon颜色

角色管理 
<template>
    <suit-card 
        title="角色管理"                  
        titleIconColor="red"
    >
        角色管理
    </suit-card>
</template>
Expand Copy

# 固定宽度

角色管理 
<template>
    <suit-card 
        title="角色管理" 
        :width="300"                 
    >
        角色管理
    </suit-card>
</template>
Expand Copy

# 可以进行展开缩放

角色管理 
<template>
    <suit-card 
        title="角色管理" 
        :toggle="true"
        :width="300"                 
    >
        角色管理
    </suit-card>
</template>
Expand Copy

# 可以进行拖拽以及缩放

角色管理 
<template>
    <suit-card 
        title="角色管理" 
        :toggle="true"
        :resize="true"
        :width="300"                 
    >
        角色管理
    </suit-card>
</template>
Expand Copy

# 参数说明

# props

参数 说明 类型 可选值 默认值
showIcon 是否显示标题左边图标 boolean — false
width 卡片宽度，没有这个值默认100% string — —
titleIconColor 标题左边图标的颜色 string — var(--color-primary)
title 卡片标题 string — —
titleColor 标题颜色 string — —
offsetHeight 差值高度，卡片实际的最小高度为 appMainHeight-offsetHeight number — 50
resize 卡片拖动 boolean — false
maxWidthResize 卡片拖动最大宽度 number — 450
minWidthResize 卡片拖动最小宽度 number — 300
toggle 是否可以进行展开关闭 boolean — false
fixedCenter 是否固定卡片内容高度，当存在标题并且fixedCenter为true时则会进行固定内容高度，默认内容自适应 boolean — true

# 事件

事件名称 说明 回调参数
heightChange 返回卡片整体高度 val
centerHeight 返回卡片内容的整体高度 val

# header的slot使用

名称 描述
具名插槽：right 东西放在头部容器框右侧，flex的布局

SuitInputNumber 数字输入框