1 | # Loading
|
2 |
|
3 | ### Basic usage
|
4 |
|
5 | :::kview
|
6 |
|
7 | ```html
|
8 | <template>
|
9 | <el-button @click="toggleLoading">toggle show -> {{loading}}</el-button>
|
10 | </template>
|
11 |
|
12 | <script>
|
13 | export default {
|
14 | data() {
|
15 | return {
|
16 | loading: false,
|
17 | }
|
18 | },
|
19 | methods: {
|
20 | toggleLoading() {
|
21 | this.loading = !this.loading;
|
22 | console.log('loading', this.loading);
|
23 | this.$loading[this.loading ? 'show' : 'hide'](() => {
|
24 | console.log('call-back');
|
25 | setTimeout(()=>{
|
26 | this.loading=false;
|
27 | this.$loading.hide();
|
28 | },3000)
|
29 | })
|
30 | },
|
31 | },
|
32 | };
|
33 |
|
34 | </script>
|
35 | ```
|
36 |
|
37 | :::
|
38 |
|
39 | ### Attributes
|
40 | <div class="markdown-table">
|
41 |
|
42 | | Attribute | Description | Type| Accepted Values | Default | Require
|
43 | |-------|---------|---|---|---|---|
|
44 | |callback|hook function after show or hide|Function|-|-|-
|
45 | |background| background color of the mask|String|-|rgba(0, 0, 0, .6)|-
|
46 | |color|dot color|String|-|#4b9cdb|-
|
47 |
|
48 | </div>
|
49 |
|
50 |
|
51 | ### Events
|
52 | <div class="markdown-table">
|
53 |
|
54 | | Event Name | Description |
|
55 | | ------ |----- |
|
56 | | show | display |
|
57 | | hide | hide |
|
58 |
|
59 | </div>
|
60 |
|