350 lines
12 KiB
Vue
350 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
class="u-loading-icon"
|
|||
|
|
:style="[addStyle(customStyle)]"
|
|||
|
|
:class="[vertical && 'u-loading-icon--vertical']"
|
|||
|
|
v-if="show"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-if="!webviewHide"
|
|||
|
|
class="u-loading-icon__spinner"
|
|||
|
|
:class="[`u-loading-icon__spinner--${mode}`]"
|
|||
|
|
ref="ani"
|
|||
|
|
:style="{
|
|||
|
|
color: color,
|
|||
|
|
width: addUnit(size),
|
|||
|
|
height: addUnit(size),
|
|||
|
|
borderTopColor: color,
|
|||
|
|
borderBottomColor: otherBorderColor,
|
|||
|
|
borderLeftColor: otherBorderColor,
|
|||
|
|
borderRightColor: otherBorderColor,
|
|||
|
|
'animation-duration': `${duration}ms`,
|
|||
|
|
'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<block v-if="mode === 'spinner'">
|
|||
|
|
<!-- #ifndef APP-NVUE -->
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in array12"
|
|||
|
|
:key="index"
|
|||
|
|
class="u-loading-icon__dot"
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef APP-NVUE -->
|
|||
|
|
<!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
|
|||
|
|
<loading-indicator
|
|||
|
|
v-if="!webviewHide"
|
|||
|
|
class="u-loading-indicator"
|
|||
|
|
:animating="true"
|
|||
|
|
:style="{
|
|||
|
|
color: color,
|
|||
|
|
width: addUnit(size),
|
|||
|
|
height: addUnit(size)
|
|||
|
|
}"
|
|||
|
|
/>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<text
|
|||
|
|
v-if="text"
|
|||
|
|
class="u-loading-icon__text"
|
|||
|
|
:style="{
|
|||
|
|
fontSize: addUnit(textSize),
|
|||
|
|
color: textColor,
|
|||
|
|
}"
|
|||
|
|
>{{text}}</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import props from './props';
|
|||
|
|
import mpMixin from '../../libs/mixin/mpMixin';
|
|||
|
|
import mixin from '../../libs/mixin/mixin';
|
|||
|
|
import { addUnit, addStyle } from '../../libs/function/index';
|
|||
|
|
import { colorGradient } from '../../libs/function/colorGradient';
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
const animation = weex.requireModule('animation');
|
|||
|
|
// #endif
|
|||
|
|
/**
|
|||
|
|
* loading 加载动画
|
|||
|
|
* @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
|
|||
|
|
* @tutorial https://ijry.github.io/uview-plus/components/loading.html
|
|||
|
|
* @property {Boolean} show 是否显示组件 (默认 true)
|
|||
|
|
* @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认color['u-tips-color']）
|
|||
|
|
* @property {String} textColor 提示文本的颜色（默认color['u-tips-color']）
|
|||
|
|
* @property {Boolean} vertical 文字和图标是否垂直排列 (默认 false )
|
|||
|
|
* @property {String} mode 模式选择，见官网说明（默认 'circle' ）
|
|||
|
|
* @property {String | Number} size 加载图标的大小，单位px （默认 24 ）
|
|||
|
|
* @property {String | Number} textSize 文字大小（默认 15 ）
|
|||
|
|
* @property {String | Number} text 文字内容
|
|||
|
|
* @property {String} timingFunction 动画模式 （默认 'ease-in-out' ）
|
|||
|
|
* @property {String | Number} duration 动画执行周期时间（默认 1200）
|
|||
|
|
* @property {String} inactiveColor mode=circle时的暗边颜色
|
|||
|
|
* @property {Object} customStyle 定义需要用到的外部样式
|
|||
|
|
* @example <u-loading mode="circle"></u-loading>
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
name: 'u-loading-icon',
|
|||
|
|
mixins: [mpMixin, mixin, props],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// Array.form可以通过一个伪数组对象创建指定长度的数组
|
|||
|
|
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
|
|||
|
|
array12: Array.from({
|
|||
|
|
length: 12
|
|||
|
|
}),
|
|||
|
|
// 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
|
|||
|
|
// 在iOS nvue上，则会一开始默认执行两个周期的动画
|
|||
|
|
aniAngel: 360, // 动画旋转角度
|
|||
|
|
webviewHide: false, // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
|
|||
|
|
loading: false, // 是否运行中，针对nvue使用
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 当为circle类型时，给其另外三边设置一个更轻一些的颜色
|
|||
|
|
// 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
|
|||
|
|
// 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
|
|||
|
|
otherBorderColor() {
|
|||
|
|
const lightColor = colorGradient(this.color, '#ffffff', 100)[80]
|
|||
|
|
if (this.mode === 'circle') {
|
|||
|
|
return this.inactiveColor ? this.inactiveColor : lightColor
|
|||
|
|
} else {
|
|||
|
|
return 'transparent'
|
|||
|
|
}
|
|||
|
|
// return this.mode === 'circle' ? this.inactiveColor ? this.inactiveColor : lightColor : 'transparent'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
show(n) {
|
|||
|
|
// nvue中，show为true，且为非loading状态，就重新执行动画模块
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
if (n && !this.loading) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.startAnimate()
|
|||
|
|
}, 30)
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.init()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
addUnit,
|
|||
|
|
addStyle,
|
|||
|
|
init() {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
this.show && this.nvueAnimate()
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.show && this.addEventListenerToWebview()
|
|||
|
|
// #endif
|
|||
|
|
}, 20)
|
|||
|
|
},
|
|||
|
|
// 监听webview的显示与隐藏
|
|||
|
|
addEventListenerToWebview() {
|
|||
|
|
// webview的堆栈
|
|||
|
|
const pages = getCurrentPages()
|
|||
|
|
// 当前页面
|
|||
|
|
const page = pages[pages.length - 1]
|
|||
|
|
// 当前页面的webview实例
|
|||
|
|
const currentWebview = page.$getAppWebview()
|
|||
|
|
// 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
|
|||
|
|
currentWebview.addEventListener('hide', () => {
|
|||
|
|
this.webviewHide = true
|
|||
|
|
})
|
|||
|
|
currentWebview.addEventListener('show', () => {
|
|||
|
|
this.webviewHide = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// #ifdef APP-NVUE
|
|||
|
|
nvueAnimate() {
|
|||
|
|
// nvue下，非spinner类型时才需要旋转，因为nvue的spinner类型，使用了weex的
|
|||
|
|
// loading-indicator组件，自带旋转功能
|
|||
|
|
this.mode !== 'spinner' && this.startAnimate()
|
|||
|
|
},
|
|||
|
|
// 执行nvue的animate模块动画
|
|||
|
|
startAnimate() {
|
|||
|
|
this.loading = true
|
|||
|
|
const ani = this.$refs.ani
|
|||
|
|
if (!ani) return
|
|||
|
|
animation.transition(ani, {
|
|||
|
|
// 进行角度旋转
|
|||
|
|
styles: {
|
|||
|
|
transform: `rotate(${this.aniAngel}deg)`,
|
|||
|
|
transformOrigin: 'center center'
|
|||
|
|
},
|
|||
|
|
duration: this.duration,
|
|||
|
|
timingFunction: this.timingFunction,
|
|||
|
|
// delay: 10
|
|||
|
|
}, () => {
|
|||
|
|
// 每次增加360deg，为了让其重新旋转一周
|
|||
|
|
this.aniAngel += 360
|
|||
|
|
// 动画结束后，继续循环执行动画，需要同时判断webviewHide变量
|
|||
|
|
// nvue安卓，页面隐藏后依然会继续执行startAnimate方法
|
|||
|
|
this.show && !this.webviewHide ? this.startAnimate() : this.loading = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import "../../libs/css/components.scss";
|
|||
|
|
$u-loading-icon-color: #c8c9cc !default;
|
|||
|
|
$u-loading-icon-text-margin-left:4px !default;
|
|||
|
|
$u-loading-icon-text-color:$u-content-color !default;
|
|||
|
|
$u-loading-icon-text-font-size:14px !default;
|
|||
|
|
$u-loading-icon-text-line-height:20px !default;
|
|||
|
|
$u-loading-width:30px !default;
|
|||
|
|
$u-loading-height:30px !default;
|
|||
|
|
$u-loading-max-width:100% !default;
|
|||
|
|
$u-loading-max-height:100% !default;
|
|||
|
|
$u-loading-semicircle-border-width: 2px !default;
|
|||
|
|
$u-loading-semicircle-border-color:transparent !default;
|
|||
|
|
$u-loading-semicircle-border-top-right-radius: 100px !default;
|
|||
|
|
$u-loading-semicircle-border-top-left-radius: 100px !default;
|
|||
|
|
$u-loading-semicircle-border-bottom-left-radius: 100px !default;
|
|||
|
|
$u-loading-semicircle-border-bottom-right-radiu: 100px !default;
|
|||
|
|
$u-loading-semicircle-border-style: solid !default;
|
|||
|
|
$u-loading-circle-border-top-right-radius: 100px !default;
|
|||
|
|
$u-loading-circle-border-top-left-radius: 100px !default;
|
|||
|
|
$u-loading-circle-border-bottom-left-radius: 100px !default;
|
|||
|
|
$u-loading-circle-border-bottom-right-radiu: 100px !default;
|
|||
|
|
$u-loading-circle-border-width:2px !default;
|
|||
|
|
$u-loading-circle-border-top-color:#e5e5e5 !default;
|
|||
|
|
$u-loading-circle-border-right-color:$u-loading-circle-border-top-color !default;
|
|||
|
|
$u-loading-circle-border-bottom-color:$u-loading-circle-border-top-color !default;
|
|||
|
|
$u-loading-circle-border-left-color:$u-loading-circle-border-top-color !default;
|
|||
|
|
$u-loading-circle-border-style:solid !default;
|
|||
|
|
$u-loading-icon-host-font-size:0px !default;
|
|||
|
|
$u-loading-icon-host-line-height:1 !default;
|
|||
|
|
$u-loading-icon-vertical-margin:6px 0 0 !default;
|
|||
|
|
$u-loading-icon-dot-top:0 !default;
|
|||
|
|
$u-loading-icon-dot-left:0 !default;
|
|||
|
|
$u-loading-icon-dot-width:100% !default;
|
|||
|
|
$u-loading-icon-dot-height:100% !default;
|
|||
|
|
$u-loading-icon-dot-before-width:2px !default;
|
|||
|
|
$u-loading-icon-dot-before-height:25% !default;
|
|||
|
|
$u-loading-icon-dot-before-margin:0 auto !default;
|
|||
|
|
$u-loading-icon-dot-before-background-color:currentColor !default;
|
|||
|
|
$u-loading-icon-dot-before-border-radius:40% !default;
|
|||
|
|
|
|||
|
|
.u-loading-icon {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
// display: inline-flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: $u-loading-icon-color;
|
|||
|
|
|
|||
|
|
&__text {
|
|||
|
|
margin-left: $u-loading-icon-text-margin-left;
|
|||
|
|
color: $u-loading-icon-text-color;
|
|||
|
|
font-size: $u-loading-icon-text-font-size;
|
|||
|
|
line-height: $u-loading-icon-text-line-height;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__spinner {
|
|||
|
|
width: $u-loading-width;
|
|||
|
|
height: $u-loading-height;
|
|||
|
|
position: relative;
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
max-width: $u-loading-max-width;
|
|||
|
|
max-height: $u-loading-max-height;
|
|||
|
|
animation: u-rotate 1s linear infinite;
|
|||
|
|
/* #endif */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__spinner--semicircle {
|
|||
|
|
border-width: $u-loading-semicircle-border-width;
|
|||
|
|
border-color: $u-loading-semicircle-border-color;
|
|||
|
|
border-top-right-radius: $u-loading-semicircle-border-top-right-radius;
|
|||
|
|
border-top-left-radius: $u-loading-semicircle-border-top-left-radius;
|
|||
|
|
border-bottom-left-radius: $u-loading-semicircle-border-bottom-left-radius;
|
|||
|
|
border-bottom-right-radius: $u-loading-semicircle-border-bottom-right-radiu;
|
|||
|
|
border-style: $u-loading-semicircle-border-style;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__spinner--circle {
|
|||
|
|
border-top-right-radius: $u-loading-circle-border-top-right-radius;
|
|||
|
|
border-top-left-radius: $u-loading-circle-border-top-left-radius;
|
|||
|
|
border-bottom-left-radius: $u-loading-circle-border-bottom-left-radius;
|
|||
|
|
border-bottom-right-radius: $u-loading-circle-border-bottom-right-radiu;
|
|||
|
|
border-width: $u-loading-circle-border-width;
|
|||
|
|
border-top-color: $u-loading-circle-border-top-color;
|
|||
|
|
border-right-color: $u-loading-circle-border-right-color;
|
|||
|
|
border-bottom-color: $u-loading-circle-border-bottom-color;
|
|||
|
|
border-left-color: $u-loading-circle-border-left-color;
|
|||
|
|
border-style: $u-loading-circle-border-style;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--vertical {
|
|||
|
|
flex-direction: column
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
:host {
|
|||
|
|
font-size: $u-loading-icon-host-font-size;
|
|||
|
|
line-height: $u-loading-icon-host-line-height;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-loading-icon {
|
|||
|
|
&__spinner--spinner {
|
|||
|
|
animation-timing-function: steps(12)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__text:empty {
|
|||
|
|
display: none
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--vertical &__text {
|
|||
|
|
margin: $u-loading-icon-vertical-margin;
|
|||
|
|
color: $u-content-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__dot {
|
|||
|
|
position: absolute;
|
|||
|
|
top: $u-loading-icon-dot-top;
|
|||
|
|
left: $u-loading-icon-dot-left;
|
|||
|
|
width: $u-loading-icon-dot-width;
|
|||
|
|
height: $u-loading-icon-dot-height;
|
|||
|
|
|
|||
|
|
&:before {
|
|||
|
|
display: block;
|
|||
|
|
width: $u-loading-icon-dot-before-width;
|
|||
|
|
height: $u-loading-icon-dot-before-height;
|
|||
|
|
margin: $u-loading-icon-dot-before-margin;
|
|||
|
|
background-color: $u-loading-icon-dot-before-background-color;
|
|||
|
|
border-radius: $u-loading-icon-dot-before-border-radius;
|
|||
|
|
content: " "
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@for $i from 1 through 12 {
|
|||
|
|
.u-loading-icon__dot:nth-of-type(#{$i}) {
|
|||
|
|
transform: rotate($i * 30deg);
|
|||
|
|
opacity: 1 - 0.0625 * ($i - 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-rotate {
|
|||
|
|
0% {
|
|||
|
|
transform: rotate(0deg)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: rotate(1turn)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #endif */
|
|||
|
|
</style>
|