# Card 卡片
# 代码演示
为什么在 w-card 上添加点击事件但是不生效？
因为 w-card 组件是由多个嵌套的 HTML 元素组成的，包括一个外层的 div 元素和若干个子元素。这些子元素可以包含其他 HTML 元素、Vue 组件或自定义内容，以便实现不同的 UI 效果。
当你在 w-card 上绑定点击事件时，实际上是将该事件绑定到了外层的 div 元素上，而不是 w-card 组件本身。这意味着当用户点击 w-card 时，实际上是在点击包裹在该组件内部的元素，而非组件本身。所以自然就没有点击效果。
正确的做法是：@click.native="handleClick"
# API
# Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| shadow | 阴影出现的形式 | String | 'always' | 'hover' | 'never' | 'always' | |
| header | 设置 header，也可以通过 slot#header 传入 DOM | string | — | — | V2.3.8 |
| body-style | 设置 body 的样式 | object | — | { padding: '16px' } | V2.3.8 |
| color | 头部彩色背景 | Boolean | — | false | V2.4.22 |
| fill | 宽度充满父级 | Boolean | — | false | V2.4.22 |
| radius | 圆角 | Boolean | — | true | V2.4.22 |
| color-style | 彩色头部样式 | object | — | { padding: '16px' } | V2.4.22 |
| interactive | 可交互式卡片 | Boolean | — | false | V2.4.42 |
# Slot
| 名称 | 说明 |
|---|---|
| default | 自定义卡片 body 内容 |
| header | 自定义卡片 header 内容 |