vue 加载中loading……

使用vue3组件的加载效果

提示：当前使用的是vue3 中的 Ant Design vue 组件
链接：https://www.antdv.com/components/spin-cn

1.html

代码如下（示例）：

<div class="ant-spin-box">
	<a-spin :spinning="spinning"></a-spin>
</div>

2.js

代码如下（示例）：

<script>
import { defineComponent,  ref } from 'vue'
export default defineComponent({
const spinning = ref(false);
const moreMessage = () => {
	spinning.value=true
	//请求数据接口
	store.dispatch('task/getMess', params).then((res) => {
		if (res.statusCode === 200) {
            console.log(res,'res')
        }
      }).finally(()=>{
        spinning.value=false
      })
    }
    return {
		spinning
	}
})
</script>

css

.ant-spin-box{
  position: absolute;
  top: 400px;
  left: 45%;
}

使用vue2组件的加载效果

提示：当前使用的是vue3 中的 Ant Design vue 组件

2.js

代码如下（示例）：

<script>
export default ({
data(){
	return {
		spinning：false
	}
},
methods: {
    leftTabar() {
		this.spinning = false
	      //请求数据接口
		store.dispatch('task/getMess', params).then((res) => {
			if (res.statusCode === 200) {
				console.log(res, 'res')
	        }
		}).finally(() => {
			this.spinning = false
		})
    },
},
</script>

提示：
1、 在try-catch捕获异常语句后还可以加上finally语句块；
2、.finally的作用：不论是否抛出异常都会执行，即使在有返回值并且已执行return语句后，也会执行finally语句块，但return返回的结果不会改变

---