七爪源码：如何在 Bootstrap Vue 中创建微调器

微调器用于向用户指示正在进行的过程。 它们适用于不需要很长时间即可完成的操作，并且有助于增强应用程序的响应能力。 继续阅读以了解有关 Vue Bootstrap 微调器组件及其提供的各种自定义选项的更多信息。

Boostrap Vue Spinner 组件（b-spinner）

Boostrap Vue 提供了用于创建微调器的 b-spinner 组件。 它在页面上呈现后立即开始旋转。

<template>  <div    id="app"    class="text-center"  >    <b-spinner></b-spinner>  </div></template>

边框微调器

我们可以使用 type 属性来显示特定类型的微调器。 默认情况下，类型设置为边框，这使微调器透明并为其提供厚圆形边框。

<template>  <div    id="app"    class="text-center"  >    <b-spinner type="border"></b-spinner>  </div></template>

增长微调器

或者，我们可以将 type 设置为 grow 以使微调器反复出现在视图中并淡出。

<template>  <div    id="app"    class="text-center"  >    <b-spinner type="grow"></b-spinner>  </div></template>

微调器颜色

b-spinner 带有一个变体道具，可让我们自定义微调器的颜色。 它可以采用许多值，包括主要、次要、危险、警告、成功和信息。

在这里，我们创建了具有许多不同颜色的多个边框微调器：

<template>  <div    id="app"    class="text-center d-flex justify-content-between"  >    <b-spinner      v-for="variant in variants"      :key="variant"      :variant="variant"    ></b-spinner>  </div></template><script>export default {  data() {    return {      variants: [        'primary',        'secondary',        'danger',        'warning',        'success',        'info',      ],    };  },};</script>

我们还可以使用 variant 属性自定义增长微调器的颜色：

<template>  <div    id="app"    class="text-center d-flex justify-content-between"  >    <b-spinner      v-for="variant in variants"      :key="variant"      :variant="variant"      type="grow"    ></b-spinner>  </div></template><script>export default {  data() {    return {      variants: [        'primary',        'secondary',        'danger',        'warning',        'success',        'info',      ],    };  },};</script>

对于更多颜色自定义选项，我们可以使用内联样式设置颜色 CSS 属性。

<template>  <div    id="app"    class="text-center m-3 d-flex justify-content-between"  >    <b-spinner style="color: orange"></b-spinner>    <b-spinner style="color: blue"></b-spinner>    <b-spinner style="color: #800080"></b-spinner>    <b-spinner style="color: green"></b-spinner>    <b-spinner style="color: red"></b-spinner>    <b-spinner style="color: #424242"></b-spinner>  </div></template>

微调器尺寸

在 b-spinner 上将 small prop 设置为 true 会创建一个较小尺寸的 spinner。

<template>  <div    id="app"    class="text-center"  >    <b-spinner small></b-spinner>    <b-spinner      type="grow"      small    ></b-spinner>  </div></template>

对于更多的尺寸自定义选项，我们可以添加一些内联样式来自定义宽度和高度 CSS 属性。

<template>  <div    id="app"    class="text-center"  >    <b-spinner      style="width: 50px; height: 50px"    ></b-spinner>    <b-spinner      type="grow"      style="width: 50px; height: 50px"    ></b-spinner>  </div></template>

微调器边距

我们可以将任何 Bootstrap Vue 边距实用程序类添加到 b-spinner 以调整其间距。 在这里，我们使用 Bootstrap 中的 ms-4 类为第二个微调器添加左边距：

<template>  <div    id="app"    class="text-center"  >    <b-spinner></b-spinner>    <b-spinner      type="grow"      class="ms-4"    ></b-spinner>  </div></template>

按钮中的微调器

微调器的一个很好的用途是在按钮内，以指示当前正在执行的操作。

<template>  <div    id="app"    class="text-center"  >    <b-button variant="primary">      <b-spinner small></b-spinner>      Loading...    </b-button>  </div></template>

这是在按钮中使用微调器的更实际示例。 单击按钮进行保存时，它会更改其文本并显示微调器以指示正在进行的保存操作（模拟超时）。 然后它隐藏微调器并在保存后再次更改文本。

<template>  <div    id="app"    class="text-center m-3"  >    <b-button      variant="primary"      @click="save"    >      <b-spinner        small        v-if="status === 'saving'"      ></b-spinner>      {{ buttonText }}    </b-button>  </div></template><script>export default {  data() {    return {      status: 'unsaved',    };  },  computed: {    buttonText() {      if (this.status === 'unsaved') return 'Save';      else if (this.status === 'saving') return 'Saving';      else return 'Saved';    },  },  methods: {    save() {      this.status = 'saving';      setTimeout(() => {        this.status = 'saved';      }, 2000);    },  },};</script>

我们使用状态数据属性来跟踪当前的保存状态，并创建一个 buttonText 计算属性来确定按钮标签应该来自状态。

结论

微调器可用于指示正在完成的应用程序操作。 在本文中，我们学习了如何使用 Bootstrap Vue (b-spinner) 中的微调器组件来轻松创建和自定义微调器。

关注七爪网，获取更多APP/小程序/网站源码资源！