自定义Loading 加载，适用于 所有的按钮事件

页面加载时需要加载，请求接口也需要loading。在前端loading的需求无处不在，就是为了让用户体验更好。

<template>
 2   <el-button
 3     type="primary"
 4     @click="openFullScreen">
 6     指令方式
 7   </el-button>
 8  
13 </template>
14 
15 <script>
16   export default {
17     data() {
18       return {
19        
20       }
21     },
22     methods: {
23       openFullScreen() {
            //自定义的Loading 加载效果
24         const loading = this.$loading({
                lock: true,
                text: "审核详情载入中",  //显示的名称
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",  //背景颜色
            });
             //请求数据
            api.ApprovedAndApproved().then(res => {
                
                if (res.code == 200) {
                     //请求成功后关闭 loading 效果
                    loading.close();
                } else {
                    this.$notify({
                        title: '错误',
                        message: res.message,
                        type: 'error',
                    });
                   //请求失败后关闭 loading 效果
                    loading.close();
                }
                
            })
28       },
29       
41   }
42 </script>

效果图如下

最后

以上就是风趣小蝴蝶为你收集整理的自定义Loading 加载，适用于 所有的按钮事件的全部内容，希望文章能够帮你解决自定义Loading 加载，适用于 所有的按钮事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。