七爪源码:如何在 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/小程序/网站源码资源！