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

最新推荐文章于 2023-04-10 16:51:02 发布

柠檬加栤

最新推荐文章于 2023-04-10 16:51:02 发布

阅读量733

点赞数

分类专栏： vue 文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/m0_57071129/article/details/125744555

版权

vue 专栏收录该内容

31 篇文章

订阅专栏

本文探讨了前端开发中如何在页面加载和API请求时实现友好的loading效果，以提高用户交互体验。通过实例展示了使用Element UI的loading指令，并在请求成功和失败后管理loading状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面加载时需要加载，请求接口也需要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>

效果图如下