Vue.jsを使用した手間のかからないスピナー
私は非常に怠惰です。 実際、とても怠惰なので、私はデフォルトでスピナーのようなちっぽけなコンポーネントのパッケージをダウンロードします。 まあ、怠惰と、何らかの理由で私のカスタムスピナーが常にグリッチであるという事実と相まって。 これの利点は、たまにあなたが望むことを正確に実行し、他には何もしない単純なパッケージに遭遇することです。 vue-spinner-componentと入力します。 スピナーです。 必要なものの基本を実行するだけの小さなもので、それ以上のものはありません。
インストール
vue-spinner-componentをVue.jsプロジェクトにインストールします。
# Yarn
$ yarn add vue-spinner-component
# or NPM
$ npm install vue-spinner-component --save
使用法
INeedASpinner.vue
<template>
<div>
<p>Something is doing things.</p>
<spinner></spinner>
</div>
</template>
<script>
import Spinner from 'vue-spinner-component/src/Spinner.vue';
export default {
components: {
Spinner
}
}
</script>
もちろん、カスタマイズできるものがいくつかあります。 しかし、基本的なことだけです。
スピナーサイズ
スピナーの幅と高さ(ピクセル単位)。 これはCSSでも設定できます。
<spinner :size="20"></spinner>
スピナートラック幅
スピナートラックの幅(ピクセル単位)。
<spinner :depth="20"></spinner>
スピナーカラー
スピナーの16進色。
<spinner color="#F9EC31"></spinner>
スピナースピード
スピナーが完全に回転するのにかかる時間(秒単位)。
<spinner :speed="1.5"></spinner>
スピナー方向
スピナーが時計回りまたは反時計回りに回転するかどうか。
<spinner :clockwise="true"></spinner>