|
|
@@ -8,7 +8,7 @@
|
|
|
```html
|
|
|
<nut-card
|
|
|
title="这里是默认卡片内容"
|
|
|
- :footerButtons="footerButtons"
|
|
|
+ :footer-buttons="footerButtons"
|
|
|
@click1="clickHandler1"
|
|
|
@click2="clickHandler2"
|
|
|
></nut-card>
|
|
|
@@ -26,7 +26,7 @@
|
|
|
<nut-card
|
|
|
title="卡片标题"
|
|
|
content="这里是卡片内容区域"
|
|
|
- :footerButtons="footerButtons"
|
|
|
+ :footer-buttons="footerButtons"
|
|
|
@click1="clickHandler1"
|
|
|
@click2="clickHandler2"
|
|
|
></nut-card>
|
|
|
@@ -36,19 +36,19 @@
|
|
|
可展开/收起的卡片
|
|
|
|
|
|
```html
|
|
|
-<nut-card title="卡片标题" content="这里是卡片内容区域" openIcon :isOpen="isOpen" @switchClick="switchClick"></nut-card>
|
|
|
+<nut-card title="卡片标题" content="这里是卡片内容区域" open-icon :is-open="isOpen" @switch-click="switchClick"></nut-card>
|
|
|
```
|
|
|
|
|
|
通栏卡片
|
|
|
|
|
|
```html
|
|
|
-<nut-card title="卡片标题" content="这里是卡片内容区域" isFull></nut-card>
|
|
|
+<nut-card title="卡片标题" content="这里是卡片内容区域" is-full></nut-card>
|
|
|
```
|
|
|
## 自定义内容
|
|
|
Card组件提供了多个插槽,可以灵活地自定义内容
|
|
|
|
|
|
```html
|
|
|
-<nut-card hasContent hasFooter>
|
|
|
+<nut-card has-content has-footer>
|
|
|
<div slot="title" class="card-title">
|
|
|
<div class="right">我是标题</div>
|
|
|
<div class="left">一小时</div>
|
|
|
@@ -98,10 +98,10 @@ export default {
|
|
|
| 字段 | 说明 | 类型 | 默认值 |
|
|
|
|---------|---------------------------------------|--------|----------------------------------------------------------|
|
|
|
| title | 标题 | String | '' |
|
|
|
-| openIcon | 展开收起图标是否展示 | Boolean | false |
|
|
|
+| open-icon | 展开收起图标是否展示 | Boolean | false |
|
|
|
| content | 内容 | String | '' |
|
|
|
-| isOpen | 是否展开卡片内容 | Boolean | true |
|
|
|
-| footerButtons | 底部按钮 | Array | [] |
|
|
|
-| isFull | 是否为通栏卡片 | Boolean | false |
|
|
|
-| hasContent | 使用slot自定义content内容 | Boolean | false |
|
|
|
-| hasFooter | 使用slot自定义底部按钮 | Boolean | false |
|
|
|
+| is-open | 是否展开卡片内容 | Boolean | true |
|
|
|
+| footer-buttons | 底部按钮 | Array | [] |
|
|
|
+| is-full | 是否为通栏卡片 | Boolean | false |
|
|
|
+| has-content | 使用slot自定义content内容 | Boolean | false |
|
|
|
+| has-footer | 使用slot自定义底部按钮 | Boolean | false |
|