You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
902 B
40 lines
902 B
2 years ago
|
## 代码演示
|
||
|
|
||
|
### 基础用法
|
||
|
|
||
|
通过`img`来展示空状态时显示的占位图。
|
||
|
|
||
|
```html
|
||
|
<hd-empty :img="img"></hd-empty>
|
||
|
```
|
||
|
|
||
|
### 标题与副标题
|
||
|
|
||
|
通过`title`属性来展示空状态下的主标题,默认值是`标题`;通过`subTitle`属性来展示空状态下的副标题,默认值是`副标题`。
|
||
|
|
||
|
```html
|
||
|
<hd-empty title="描述主标题" subTitle="描述副标题"></hd-empty>
|
||
|
```
|
||
|
|
||
|
### 内容距离顶部的距离
|
||
|
|
||
|
通过`marginTop`属性控制空状态占位内容距离顶部的距离。
|
||
|
|
||
|
```html
|
||
|
<hd-empty marginTop="10" title="描述主标题"></hd-empty>
|
||
|
```
|
||
|
|
||
|
### 操作按钮
|
||
|
|
||
|
通过`operation`属性控制空状态栏是否显示操作按钮,`operation`为操作按钮文案内容,点击按钮时触发`click`事件。
|
||
|
|
||
|
```html
|
||
|
<hd-empty operation="按钮文案" @click="onClick"></hd-empty>
|
||
|
```
|
||
|
|
||
|
```ts
|
||
|
function onClick() {
|
||
|
console.log('点击了按钮')
|
||
|
}
|
||
|
```
|