js 数值微调组件_Vuejs的加载微调器组件集合

js 数值微调组件

Vue微调框 (Vue Spinners)

A Vue.js port of react-spinners.

Vue.js端口的react-spinners。

View demo 查看演示 Download Source 下载源

📦安装 (📦 Installation)

npm install --save @saeris/vue-spinners
# or
yarn add @saeris/vue-spinners

🔧用法 (🔧 Usage)

There are a number of ways you can use this library! Here are a few examples:

您可以通过多种方式使用此库！ 这里有一些例子：

Vue Plugin

Vue插件

import Vue from 'vue'
import { VueSpinners } from '@saeris/vue-spinners'

Vue.use(VueSpinners)

// Each spinner can now be used in your templates anywhere in the app!

Local Component Registration

本地组件注册

import { BarLoader } from '@saeris/vue-spinners'

export default {
  components: {
    BarLoader
  },
  // ...
}

JSX Component

JSX组件

import { BarLoader } from '@saeris/vue-spinners'

export default {
  data: () => ({
    loading: true
  }),
  render() {
    return (
      <div class='loader'>
        <ClipLoader
          class="custom-class"
          loading={this.loading}
          color={'#bada55'}
          size={150}
          sizeUnit={"px"}
        />
      </div>
    )
  }
}

Unpkg Import

Unpkg导入

<!--Load libraries in your page's header-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@saeris/vue-spinners"></script>

<!--Use a component somewhere in your app-->
<div id="app">
  <bar-loader class="custom-class" :color="#bada55" :loading="loading" :size="150" :sizeUnit="px"></bar-loader>
</div>

<script>
  new Vue({ el: '#app', data: { loading: true } })
</script>

📋可用的加载程序，属性类型和默认值 (📋 Available Loaders, PropTypes, and Default Values)

Common default props for all loaders:

所有装载机的通用默认道具：

loading: true
color: '#000000'

For size, height, and width props, there are sizeUnit, heightUnit, and widthUnit prop that accepts px, %, or em. The default for the unit prop is px.

对于size ， height和width道具，有sizeUnit ， heightUnit和widthUnit道具接受px ， %或em 。 单位prop的默认值为px 。

Loader	size:int	height:int	width:int	radius:int	margin:str
BarLoader		4	100
BeatLoader	15				2px
BounceLoader	60
CircleLoader	50
ClimbingBoxLoader	15
ClipLoader	35
DotLoader	60				2px
FadeLoader		15	5	2	2px
GridLoader	15
HashLoader	50				2px
MoonLoader	60				2px
PacmanLoader	25				2px
PropagateLoader	15
PulseLoader	15				2px
RingLoader	60				2px
RiseLoader	15				2px
RotateLoader	15				2px
ScaleLoader		35	4	2	2px
SkewLoader	20
SquareLoader	50
SyncLoader	15				2px

装载机	大小：整数	高度：int	宽度：整数	半径：整数	利润：str
酒吧装载机		4	100
BeatLoader	15				2px
弹跳加载器	60
CircleLoader	50
ClimbingBoxLoader	15
剪辑加载器	35
点加载器	60				2px
FadeLoader		15	5	2	2px
网格加载器	15
哈希加载器	50				2px
MoonLoader	60				2px
吃豆人	25				2px
传播加载器	15
脉冲加载器	15				2px
环形装载机	60				2px
RiseLoader	15				2px
旋转加载器	15				2px
比例加载器		35	4	2	2px
倾斜加载器	20
SquareLoader	50
同步加载器	15				2px

翻译自: https://vuejsexamples.com/a-collection-of-loading-spinner-components-for-vuejs/

js 数值微调组件