标签：Vue 自定义 微调 保存 Spinner 按钮 Bootstrap

如何使用 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

标签：Vue,自定义,微调,保存,Spinner,按钮,Bootstrap
来源： https://www.cnblogs.com/amboke/p/16672612.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。