如何使用 Bootstrap Vue Spinner 组件
如何使用 Bootstrap Vue Spinner 组件
微调器用于向用户指示正在进行的过程。它们适用于不需要很长时间即可完成的操作，并且有助于增强应用程序的响应能力。继续阅读以了解有关 Vue Bootstrap 微调器组件及其提供的各种自定义选项的更多信息。
Boostrap Vue Spinner 组件（b-spinner）
Boostrap Vue 提供 b-微调器 用于创建微调器的组件。它在页面上呈现后立即开始旋转。
<div
id="应用"
类=“文本中心”
>
边框微调器
我们可以使用 类型 用于显示特定类型的微调器的道具。默认情况下 类型 被设定为 边界 ，这使微调器透明并赋予它一个粗圆形边框。
<div
id="应用"
类=“文本中心”
>
增长微调器
或者，我们可以设置 类型 至 生长 使微调器反复出现在视野中并淡出。
<div
id="应用"
类=“文本中心”
>
微调器颜色
b-微调器 附带一个 变体 让我们自定义微调器颜色的道具。它可以采用很多值，包括 基本的 , 中学 , 危险 , 警告 , 成功 ， 和 信息 .
在这里，我们创建了具有许多不同颜色的多个边框微调器：
我们还可以使用 变体 支柱：
<b-spinner
v-for="变体中的变体"
:key="变体"
:variant="变体"
类型=“成长”
>
对于更多颜色自定义选项，我们可以设置 颜色 使用内联样式的 CSS 属性。
微调器尺寸
设置 小的 支持 真的 在 b-微调器 创建一个较小尺寸的微调器。
<div
id="应用"
类=“文本中心”
>
<b-spinner
类型=“成长”
小的
>
对于更多尺寸自定义选项，我们可以添加一些内联样式来自定义 宽度 和 高度 CSS 属性。
<div
id="应用"
类=“文本中心”
>
<b-spinner
样式=“宽度：50px；高度：50px”
>
<b-spinner
类型=“成长”
样式=“宽度：50px；高度：50px”
>
微调器边距
我们可以将任何 Bootstrap Vue 边距实用程序类添加到 b-微调器 来调整它的间距。这里我们使用 女士-4 Bootstrap 中的类为第二个微调器添加左边距：
<div
id="应用"
类=“文本中心”
>
<b-spinner
类型=“成长”
类="ms-4"
>
按钮中的微调器
微调器的一个很好的用途是在按钮内，以指示当前正在执行的操作。
<div
id="应用"
类=“文本中心”
>
正在加载...
这是在按钮中使用微调器的更实际示例。单击按钮进行保存时，它会更改其文本并显示微调器以指示正在进行的保存操作（模拟超时）。然后它隐藏微调器并在保存后再次更改文本。
<div
id="应用"
类="文本中心 m-3"
>
<b-button
变体=“主要”
@click="保存"
>
<b-spinner
小的
v-if="status === '保存'"
>
{{ 按钮文本 }}
我们使用 地位 data 属性来跟踪当前的保存状态，我们创建一个 按钮文本 计算属性来确定按钮标签应该来自什么 地位 .
结论
微调器可用于指示正在完成的应用程序操作。在本文中，我们学习了如何使用 Bootstrap Vue 中的 spinner 组件（ b-微调器 ) 轻松创建和自定义微调器。
最初发表于 编码beautydev.com
ES13 中的 11 个惊人的 JavaScript 新特性
本指南将带您快速了解 ECMAScript 13 中添加的所有最新功能。这些强大的新功能将使您的 JavaScript 现代化，代码更短、更具表现力。
注册 并立即获得免费副本。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号