LWC学习笔记
LWC下面如何加一个加载动画Spinner?
局部加载:
1
2
3
4
5
6
7
8
9
| <lightning-button
label="Toggle"
variant="brand"
onclick={toggle}>
</lightning-button>
<br/>
<div if:true={isLoaded}>
<lightning-spinner alternative-text="Loading..."></lightning-spinner>
</div>
|
JavaScript代码如下：
1
2
3
4
5
| @track isLoaded = false;
toggle() {
this.isLoaded = !this.isLoaded;
}
|
全局加载：
1
2
3
4
5
6
7
| <lightning-button label="Toggle Full" variant="brand" onclick={toggleFull}>
</lightning-button>
<br/>
<div if:true={isLoadedFull}>
<lightning-spinner style="position: fixed;" alternative-text="Loading..."></lightning-spinner>
<div style="position: fixed;" class="slds-backdrop slds-backdrop_open"></div>
</div>
|
JavaScript代码如下：
1
2
3
4
| @track isLoadedFull = false;
toggleFull() {
this.isLoadedFull = !this.isLoadedFull;
}
|
参考文章：
https://developer.salesforce.com/docs/component-library/bundle/lightning:spinner/example
https://lightningdesignsystem.com/components/spinners/