如何使用 Vue.js 显示和隐藏引导微调器？

Posted 2023-02-22

【中文标题】如何使用 Vue.js 显示和隐藏引导微调器？

【英文标题】：How can i show and hide a bootstrap spinner with Vue.js?

【发布时间】：2021-07-06 13:10:12

【问题描述】：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" v-on:click="api">
  ...
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  ...
</div>

我想在单击按钮时在按钮上显示微调器。

当api返回结果时，同时弹出modal和隐藏spinner。

用jQuery实现似乎比较容易，作为vue.js的初学者，写这段代码时不知所措

【参考方案1】：

使用 v-show 很容易。这允许您绑定到变量并控制标签是否可见。如果变量为真，则显示元素，如果为假，则隐藏元素。你可以了解更多关于v-show from the docs的信息。

因此，在您的按钮中，我们需要创建一个标签来包装按钮文本。在这种情况下，我们将使用<span>。然后我们将创建一个带有纯引导的微调器：

<div v-show="loading" class="spinner-border spinner-border-sm" role="status">
    <span class="sr-only">Loading...</span>
</div>

现在我们创建您的按钮

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" v-on:click="API">
      <span v-show="!loading"> Button Text  </span>
      <!-- IF YOU ARE USING VUE BOOTSTRAP USE <b-spinner label="Loading..."></b-spinner> -->
      <div v-show="loading" class="spinner-border spinner-border-sm" role="status">
          <span class="sr-only">Loading...</span>
      </div>
</button>

接下来在您的代码中，您需要创建一个加载变量

data()
  return 
     ...
     loading:false,
     ...
  

然后，当您处理请求时，您需要控制加载变量。

methods:
  API()
    this.loading = true;
    axios.get("/test").then((res)=>
        this.loading=false;
    ).catch((error)=>
        console.log(error);
        this.loading=false;
    );
  

Code SandBox example