<template>
|
<div>
|
<Divider class="component-blue" orientation="left"
|
>全局Loading加载动画</Divider
|
>
|
<Button @click="showLoading">显示右上角加载动画</Button>
|
<Button @click="closeLoading" style="margin-left: 5px"
|
>关闭右上角加载动画</Button
|
>
|
<h3 class="component-article">使用方式</h3>
|
修改全局Vuex即可，开启：
|
<code>this.$store.commit("setLoading", true)</code> 关闭：
|
<code>this.$store.commit("setLoading", false)</code>
|
<Divider class="component-blue" orientation="left"
|
>iView官方 LoadingBar加载进度条</Divider
|
>
|
<Button @click="start">开始加载</Button>
|
<Button @click="finish" style="margin-left: 5px">结束加载</Button>
|
<Button @click="error" style="margin-left: 5px">错误</Button>
|
<h3 class="component-article">说明</h3>
|
如果你觉得上方XBoot提供的动画不明显，你还可以使用iView官方自带的顶部
|
<a href="https://www.iviewui.com/components/loading-bar" target="_blank"
|
>LoadingBar组件</a
|
>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {};
|
},
|
methods: {
|
showLoading() {
|
this.$store.commit("setLoading", true);
|
},
|
closeLoading() {
|
this.$store.commit("setLoading", false);
|
},
|
start() {
|
this.$Loading.start();
|
},
|
finish() {
|
this.$Loading.finish();
|
},
|
error() {
|
this.$Loading.error();
|
},
|
},
|
mounted() {},
|
};
|
</script>
|
