使用 Vue.js 轻松创建旋转器

我非常懒惰,事实上,我很懒惰,以至于我默认下载软件包,如旋转器。好,懒惰与事实相结合,由于某种原因,我的自定义旋转器总是滑稽。这一点的反面是,偶尔你会遇到一个简单的包,只做你想要的,而不是其他任何东西。输入视图旋转器组件)。它是一个旋转器。

安装

在您的 Vue.js 项目中安装 vue-spinner 组件。

1# Yarn
2$ yarn add vue-spinner-component
3
4# or NPM
5$ npm install vue-spinner-component --save

使用

 1[label INeedASpinner.vue]
 2<template>
 3  <div>
 4    <p>Something is doing things.</p>
 5    <spinner></spinner>
 6  </div>
 7</template>
 8
 9<script>
10import Spinner from 'vue-spinner-component/src/Spinner.vue';
11
12export default {
13  components: {
14    Spinner
15  }
16}
17</script>

当然,有些东西你可以定制,但只有基本。

Spinner Size

旋转器的宽度和高度,在 px. 你也可以通过CSS来设置。

1<spinner :size="20"></spinner>

** Spinner 轨道宽度**

旋转轨道的宽度,在 px。

1<spinner :depth="20"></spinner>

彩色彩色彩色

旋转器的六色色。

1<spinner color="#F9EC31"></spinner>

超级速率(Spinner)

旋转器在几秒钟内完成完整的革命所需的时间。

1<spinner :speed="1.5"></spinner>

指南: Spinner Direction

不管旋转器是否按时钟或反时钟方向旋转。

1<spinner :clockwise="true"></spinner>