61 lines
1.5 KiB
Markdown
61 lines
1.5 KiB
Markdown
### Card 卡片
|
||
|
||
卡片视图组件，组件名：``uni-card``，代码块： uCard。
|
||
|
||
**使用方式：**
|
||
|
||
在 ``script`` 中引用组件
|
||
|
||
```javascript
|
||
import uniCard from "@/components/uni-card/uni-card.vue"
|
||
export default {
|
||
components: {uniCard}
|
||
}
|
||
```
|
||
|
||
一般用法
|
||
|
||
```html
|
||
<uni-card
|
||
title="标题文字"
|
||
thumbnail="http://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"
|
||
extra="额外信息"
|
||
note="Tips">
|
||
内容主体，可自定义内容及样式
|
||
</uni-card>
|
||
```
|
||
|
||
内容通栏
|
||
|
||
```html
|
||
<uni-card
|
||
is-full="true"
|
||
title="DCloud"
|
||
thumbnail="http://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"
|
||
extra="2018.12.12"
|
||
note="Tips">
|
||
内容主体，可自定义内容及样式，内容主体，可自定义内容及样式，内容主体，可自定义内容及样式
|
||
</uni-card>
|
||
```
|
||
|
||
**uniCard 属性说明：**
|
||
|
||
|属性名|类型|默认值 |说明|
|
||
|---|----|---|---|
|
||
|title|String|-|标题文字|
|
||
|extra|String|-|标题额外信息|
|
||
|note|String|-|底部信息|
|
||
|thumbnail|String|-|标题左侧缩略图|
|
||
|is-full|Boolean|false|卡片内容是否通栏，为true时将去除padding值|
|
||
|
||
**uniCard 事件说明：**
|
||
|
||
|事件称名|说明|返回参数|
|
||
|---|----|---|
|
||
|click|点击 uniCard 触发事件|-|
|
||
|
||
|
||
Tips
|
||
|
||
* 组件实际运行效果参考：[https://github.com/dcloudio/uni-ui](https://github.com/dcloudio/uni-ui)
|
||
* npm 使用方式参考：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) |