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

Question

<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返回结果时，弹出模态框并同时隐藏微调器。

用jQuery实现起来似乎比较容易，作为vue.js的初学者，写这段代码的时候我很茫然

Answer 1

通过 v-show，这很容易。这允许您绑定到变量并控制标签是否可见。如果变量为真，则显示该元素，如果为假，则隐藏该元素。您可以从文档中了解有关 v-show 的更多信息。

因此，在您的按钮中，我们需要创建一个标签来包装按钮文本。在这种情况下我们将使用<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;
    });
  }
}

代码沙盒示例