如何使用 Bootstrap Vue Spinner 组件

如何使用 Bootstrap Vue Spinner 组件

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

Boostrap Vue Spinner 组件（b-spinner）

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

 <template>  
 <div  
 id="应用"  
 类=“文本中心”  
 >  
 <b-spinner></b-spinner>  
 </div>  
 </template>

边框微调器

我们可以使用 类型 用于显示特定类型的微调器的道具。默认情况下 类型 被设定为 边界 ，这使微调器透明并赋予它一个粗圆形边框。

 <template>  
 <div  
 id="应用"  
 类=“文本中心”  
 >  
 <b-spinner type="border"></b-spinner>  
 </div>  
 </template>

增长微调器

或者，我们可以设置 类型 至 生长 使微调器反复出现在视野中并淡出。

 <template>  
 <div  
 id="应用"  
 类=“文本中心”  
 >  
 <b-spinner type="grow"></b-spinner>  
 </div>  
 </template>

微调器颜色

b-微调器 附带一个 变体 让我们自定义微调器颜色的道具。它可以采用很多值，包括 基本的 , 中学 , 危险 , 警告 , 成功 ， 和 信息 .

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

 <template>  
 <div  
 id="应用"  
 class="text-center d-flex justify-content-between"  
 >  
 <b-spinner  
 v-for="变体中的变体"  
 :key="变体"  
 :variant="变体"  
 ></b-spinner>  
 </div>  
 </template> <script>  
 导出默认 {  
 数据（） {  
 返回 {  
 变体：[  
 '基本的'，  
 '次要',  
 '危险'，  
 '警告'，  
 '成功'，  
 '信息'，  
 ],  
 };  
 },  
 };  
 </script>

我们还可以使用 变体 支柱：

 <template>  
 <div  
 id="应用"  
 class="text-center d-flex justify-content-between"  
 >  
 <b-spinner  
 v-for="变体中的变体"  
 :key="变体"  
 :variant="变体"  
 类型=“成长”  
 ></b-spinner>  
 </div>  
 </template> <script>  
 导出默认 {  
 数据（） {  
 返回 {  
 变体：[  
 '基本的'，  
 '次要',  
 '危险'，  
 '警告'，  
 '成功'，  
 '信息'，  
 ],  
 };  
 },  
 };  
 </script>

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

 <template>  
 <div  
 id="应用"  
 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-微调器 创建一个较小尺寸的微调器。

 <template>  
 <div  
 id="应用"  
 类=“文本中心”  
 >  
 <b-spinner small></b-spinner>  
 <b-spinner  
 类型=“成长”  
 小的  
 ></b-spinner>  
 </div>  
 </template>

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

 <template>  
 <div  
 id="应用"  
 类=“文本中心”  
 >  
 <b-spinner  
 样式=“宽度：50px；高度：50px”  
 ></b-spinner>  
 <b-spinner  
 类型=“成长”  
 样式=“宽度：50px；高度：50px”  
 ></b-spinner>  
 </div>  
 </template>

微调器边距

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

 <template>  
 <div  
 id="应用"  
 类=“文本中心”  
 >  
 <b-spinner></b-spinner>  
 <b-spinner  
 类型=“成长”  
 类="ms-4"  
 ></b-spinner>  
 </div>  
 </template>

按钮中的微调器

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

 <template>  
 <div  
 id="应用"  
 类=“文本中心”  
 >  
 <b-button variant="primary">  
 <b-spinner small></b-spinner>  
 正在加载...  
 </b-button>  
 </div>  
 </template>

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

 <template>  
 <div  
 id="应用"  
 类="文本中心 m-3"  
 >  
 <b-button  
 变体=“主要”  
 @click="保存"  
 >  
 <b-spinner  
 小的  
 v-if="status === '保存'"  
 ></b-spinner>  
 {{ 按钮文本 }}  
 </b-button>  
 </div>  
 </template> <script>  
 导出默认 {  
 数据（） {  
 返回 {  
 状态：'未保存'，  
 };  
 },  
 计算：{  
 按钮文本（）{  
 如果（this.status === '未保存'）返回'保存'；  
 else if (this.status === 'saving') return 'Saving';  
 否则返回“已保存”；  
 },  
 },  
 方法： {  
 节省（） {  
 this.status = '保存';  
 设置超时（（）=> {  
 this.status = '已保存';  
 }, 2000);  
 },  
 },  
 };  
 </script>

我们使用 地位 data 属性来跟踪当前的保存状态，我们创建一个 按钮文本 计算属性来确定按钮标签应该来自什么 地位 .

结论

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

最初发表于 编码beautydev.com

ES13 中的 11 个惊人的 JavaScript 新特性

本指南将带您快速了解 ECMAScript 13 中添加的所有最新功能。这些强大的新功能将使您的 JavaScript 现代化，代码更短、更具表现力。

注册 并立即获得免费副本。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/23108/51230913