el-loading可以看到loading效果，但可以被点击-CSDN博客

本文链接：https://blog.csdn.net/qq_45327886/article/details/124024886

一、问题

1.在标签上写了v-loading，并且值设置为 true,可以看到loading效果，但是仍然可以被点击。

2.脑子都炸了，发现把v-loading移到上一层标签,竟然好了，有loading效果,并且不可以被点击,百思不得其解，感觉自己人都傻了。

3.代码如下：

给确定按钮添加loading效果

<template>
   <div class="footer">
      <el-button @click="cancel" class="footer-btn-style">取消</el-button>
      <el-button
        v-loading="submitLoading"
        type="primary"
        @click="handleComponents"
        class="footer-btn-style"
        >保存
      </el-button>
    </div>
</template>
<script>
import { _sumbitApi} from "@/api/api.js";
export default{
  data(){
    return{
        submitLoading:false,
    }
  },
  methods:{
      handleComponents(){
        this. submitLoading=true;
        _sumbitApi()
        .then((result)=>{
           this. submitLoading=false;
           if(result.status===200){
               //do something
           }
          }
         )
        .catch((error)=>{
            this. submitLoading=false;
            console.log("error",error)
          }
        )
      }

}
</script>

二、原因

1.loading直接放在标签上，看似添加在标签上了，然而实际上是添加在了标签内部，如图1所示，所以能看到loading效果;但是并不能阻止标签被点击。

三、解决方法

1.在需要加loading效果的标签外部添加一层标签并加上v-loading即可

因为v-loading默认是绝对布局，所以覆盖在button上面,button不可点击，效果如图2所示。

图2 loading和button并列，有loading，且button不能被点击了

2.代码如下：

<template>
   <div class="footer">
    <div class="button_area">
      <el-button @click="cancel" class="footer-btn-style">取消</el-button>
    </div>
    <div class="button_area" v-loading="submitLoading">
      <el-button
        type="primary"
        @click="handleComponents"
        class="footer-btn-style"
        >保存
      </el-button>
     </div>
    </div>
</template>
<script>
import { _sumbitApi} from "@/api/api.js";
export default{
  data(){
    return{
        submitLoading:false,
    }
  },
  methods:{
      handleComponents(){
        this. submitLoading=true;
        _sumbitApi()
        .then((result)=>{
           this. submitLoading=false;
           if(result.status===200){
               //do something
           }
          }
         )
        .catch((error)=>{
            this. submitLoading=false;
            console.log("error",error)
          }
        )
      }

}
</script>