# XCard 通用数据加载状态管理容器

提供一个可以根据数据加载状态显示不同内容的通用容器
当loadState为loading时，显示骨架屏（加载界面）
当loadState为success时，显示容器内容
当loadState为error时，显示点击重新加载数据的提示界面



## 何时使用

当需要一个简单的，可以根据数据加载状态显示不同内容的通用容器时


引用方式：

```javascript
import XCard from '@vue2-client/base-client/components/XCard'

export default {
    components: {
      XCard
    }
}
```



## 代码演示

```html
<x-card
  :loadState="loadState"
  :retry="retryFunction" />
```

## API

| 参数        | 说明             | 类型       | 默认值                              |
|-----------|----------------|----------|----------------------------------|
| loadState | 数据加载状态         | String   | success                          |
| retry     | 点击重新加载数据时触发的方法 | Function | () => {console.error('未实现重新加载')} |

