naive-ui/demo/documentation/components/button/zhCN/loading.md

71 lines
924 B
Markdown
Raw Normal View History

2019-09-21 17:03:05 +08:00
# 加载中
2019-12-02 02:58:45 +08:00
按钮有加载状态。
2019-09-20 00:27:06 +08:00
```html
<n-button
:loading="loading"
@click="loading = !loading"
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2020-02-03 20:45:06 +08:00
加载中
2019-09-20 00:27:06 +08:00
</n-button>
2020-02-03 20:45:06 +08:00
<br>
2019-09-20 00:27:06 +08:00
<n-button
:loading="loading"
2020-01-27 19:43:56 +08:00
icon-placement="right"
2019-09-20 00:27:06 +08:00
@click="loading = !loading"
>
2019-12-04 18:17:25 +08:00
<template v-slot:icon>
<md-save />
</template>
2020-02-03 20:45:06 +08:00
加载中
2019-09-20 00:27:06 +08:00
</n-button>
2020-02-03 20:45:06 +08:00
<br>
2019-09-20 00:27:06 +08:00
<n-button
:loading="loading"
size="small"
@click="loading = !loading"
>
2020-02-03 20:45:06 +08:00
加载中
2019-09-20 00:27:06 +08:00
</n-button>
2020-02-03 20:45:06 +08:00
<br>
2019-09-20 00:27:06 +08:00
<n-button
:loading="loading"
size="large"
@click="loading = !loading"
>
2020-02-03 20:45:06 +08:00
加载中
2019-09-20 00:27:06 +08:00
</n-button>
2020-02-03 20:45:06 +08:00
<br>
2019-09-20 00:27:06 +08:00
<n-button
:loading="loading"
type="primary"
size="large"
round
@click="loading = !loading"
>
2020-02-03 20:45:06 +08:00
加载中
2019-09-20 00:27:06 +08:00
</n-button>
```
```js
2019-12-04 18:17:25 +08:00
import mdSave from 'naive-ui/lib/icons/md-save'
2019-09-20 00:27:06 +08:00
export default {
2019-12-04 18:17:25 +08:00
components: {
mdSave
},
2019-09-20 00:27:06 +08:00
data () {
return {
loading: false
}
}
}
```
```css
.n-button {
margin: 0 8px 8px 0;
}
```