<template>
<div class="ion-spinner" :class=[colorClass,nameClass,pausedClass]>
<svg v-if="circles && circles.length>0" viewBox="0 0 64 64" v-for="i in circles" :style="i.style">
<circle :r="i.r" transform="translate(32,32)"></circle>
</svg>
<svg v-if="lines && lines.length>0" viewBox="0 0 64 64" v-for="i in lines" :style="i.style">
<line :y1="i.y1" :y2="i.y2" transform="translate(32,32)"></line>
</svg>
</div>
</template>
<style lang="scss" src="./style.scss"></style>
<script type="text/javascript">
/**
* @component Spinner
* @description
*
* ## 其他 / Spinner菊花组件
*
* ### 说明
* Spinner组件提供了一个使用svg+js的方式事项的菊花图(loading). Spinner组件可以通过传入`props`来实时控制Spinner的样子, 用来模拟诸如: processing/thinking/waiting/chilling 等特性.
*
* ### 菊花风格
*
* Spinner的风格可以是下面的一种: ios/ios-small/bubbles/circles/crescent/dots, 其中, ios默认的是'ios'; md默认的是'crescent'; wp默认的是'circles'; 这些可以通过`config`配置
*
*
* ### 如何使用
*
* ```
* // 引入
* import { Spinner } from 'vimo'
* // 安装
* Vue.component(Spinner.name, Spinner)
* // 或者
* export default{
* components: {
* Spinner
* }
* }
* ```
*
* @props {String} [color] - 颜色
* @props {String} [mode='ios'] - 模式
* @props {String} [name] - 菊花样式
* @props {String} [duration] - 旋转动画的持续时间
* @props {Boolean} [paused] - 是否暂停
*
* @demo #/spinner
*
* @usage
* <Spinner></Spinner>
* <Spinner name="ios"></Spinner>
* <Spinner mode="wp"></Spinner>
* <Spinner color="secondary" name="dots"></Spinner>
* <Spinner duration="3000" name="dots"></Spinner>
* <Spinner :paused="true" name="ios"></Spinner>
* */
export default {
name: 'Spinner',
props: {
// 按钮color：primary、secondary、danger、light、dark
color: String,
// mode 按钮平台 ios/window/android
mode: {
type: String,
default () { return this.$config && this.$config.get('mode') || 'ios' }
},
// name 风格
// ios/ios-small/bubbles/circles/crescent/dots
name: {
type: String,
default: 'ios',
validator (val) {
return ~[
'ios',
'ios-small',
'bubbles',
'circles',
'crescent',
'dots'
].indexOf(val)
}
},
// duration 持续时间
duration: Number,
// paused 是否暂停
paused: Boolean
},
data () {
return {
isInit: false,
// svg动画数组
lines: [],
circles: [],
// ios/ios-small/bubbles/circles/crescent/dots
nameClass: null
}
},
watch: {
// 因为实例创建在前，赋值在后，如果name和duration改变则从新初始化
name () {
this.load()
},
duration () {
this.load()
}
},
computed: {
// primary、secondary、danger、light、dark
colorClass () {
return this.color ? `spinner-${this.mode}-${this.color}` : null
},
// 设置Alert的风格
modeClass () {
return this.mode ? `spinner-${this.mode}` : null
},
pausedClass () {
return this.paused ? 'spinner-paused' : null
}
},
methods: {
load () {
if (this.isInit) {
// 因为会涉及到再次渲染，故提前制空
this.lines = []
this.circles = []
// 如果指定了name，则使用指定的name。
// 如果没指定name，则根据设备别使用默认的name
let name
if (this.name) {
name = this.name
} else {
if (this.mode === 'ios') {
name = 'ios'
} else if (this.mode === 'md') {
name = 'crescent'
} else if (this.mode === 'wp') {
name = 'circles'
} else {
name = this.$config && this.$config.get('spinner', 'ios') || 'ios'
}
}
const spinner = SPINNERS[name]
if (spinner) {
if (spinner.lines) {
for (let i = 0, l = spinner.lines; i < l; i++) {
this.lines.push(this._loadEle(spinner, i, l))
}
} else if (spinner.circles) {
for (let i = 0, l = spinner.circles; i < l; i++) {
this.circles.push(this._loadEle(spinner, i, l))
}
}
this.nameClass = `spinner-${name} spinner-${this.mode}-${name}`
}
}
},
_loadEle (spinner, index, total) {
let duration = this.duration || spinner.dur
let data = spinner.fn(duration, index, total)
data.style['animation-duration'] = parseInt(duration) + 'ms'
return data
}
},
created () {
this.isInit = true
this.load()
}
}
const SPINNERS = {
ios: {
dur: 1000,
lines: 12,
fn (dur, index, total) {
const transform = 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)'
const animationDelay = -(dur - ((dur / total) * index)) + 'ms'
return {
y1: 17,
y2: 29,
style: {
transform: transform,
webkitTransform: transform,
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
}
}
}
},
'ios-small': {
dur: 1000,
lines: 12,
fn (dur, index, total) {
const transform = 'rotate(' + (30 * index + (index < 6 ? 180 : -180)) + 'deg)'
const animationDelay = -(dur - ((dur / total) * index)) + 'ms'
return {
y1: 12,
y2: 20,
style: {
transform: transform,
webkitTransform: transform,
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
}
}
}
},
bubbles: {
dur: 1000,
circles: 9,
fn (dur, index, total) {
const animationDelay = -(dur - ((dur / total) * index)) + 'ms'
return {
r: 5,
style: {
top: (9 * Math.sin(2 * Math.PI * index / total)) + 'px',
left: (9 * Math.cos(2 * Math.PI * index / total)) + 'px',
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
}
}
}
},
circles: {
dur: 1000,
circles: 8,
fn (dur, index, total) {
const animationDelay = -(dur - ((dur / total) * index)) + 'ms'
return {
r: 5,
style: {
top: (9 * Math.sin(2 * Math.PI * index / total)) + 'px',
left: (9 * Math.cos(2 * Math.PI * index / total)) + 'px',
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
}
}
}
},
crescent: {
dur: 750,
circles: 1,
fn (dur) {
return {
r: 26,
style: {}
}
}
},
dots: {
dur: 750,
circles: 3,
fn (dur, index, total) {
const animationDelay = -(110 * index) + 'ms'
return {
r: 6,
style: {
left: (9 - (9 * index)) + 'px',
animationDelay: animationDelay,
webkitAnimationDelay: animationDelay
}
}
}
}
}
</script>