Vue.jsを使用した手間のかからないスピナー
提供:Dev Guides
私は非常に怠惰です。 実際、とても怠惰なので、私はデフォルトでスピナーのようなちっぽけなコンポーネントのパッケージをダウンロードします。 まあ、怠惰と、何らかの理由で私のカスタムスピナーが常にグリッチであるという事実と相まって。 これの利点は、たまにあなたが望むことを正確に実行し、他には何もしない単純なパッケージに遭遇することです。 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>