From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue | 686 ++++++++++++++++++++++++++++----------------------------
1 files changed, 343 insertions(+), 343 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue b/minipro_standard/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue
index 9f247ab..2ede5c3 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue
@@ -1,343 +1,343 @@
-<template>
- <view
- class="u-loading-icon"
- :style="[$u.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: $u.addUnit(size),
- height: $u.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鍜宧eight閰嶇疆浜嗕篃鏃犳晥 -->
- <loading-indicator
- v-if="!webviewHide"
- class="u-loading-indicator"
- :animating="true"
- :style="{
- color: color,
- width: $u.addUnit(size),
- height: $u.addUnit(size)
- }"
- />
- <!-- #endif -->
- </block>
- </view>
- <text
- v-if="text"
- class="u-loading-icon__text"
- :style="{
- fontSize: $u.addUnit(textSize),
- color: textColor,
- }"
- >{{text}}</text>
- </view>
-</template>
-
-<script>
- import props from './props.js';
- // #ifdef APP-NVUE
- const animation = weex.requireModule('animation');
- // #endif
- /**
- * loading 鍔犺浇鍔ㄧ敾
- * @description 璀︽缁勪欢涓轰竴涓皬鍔ㄧ敾锛岀洰鍓嶇敤鍦╱View鐨刲oadmore鍔犺浇鏇村鍜宻witch寮�鍏崇瓑缁勪欢鐨勬鍦ㄥ姞杞界姸鎬佸満鏅��
- * @tutorial https://www.uviewui.com/components/loading.html
- * @property {Boolean} show 鏄惁鏄剧ず缁勪欢 (榛樿 true)
- * @property {String} color 鍔ㄧ敾娲诲姩鍖哄煙鐨勯鑹诧紝鍙 mode = flower 妯″紡鏈夋晥锛堥粯璁olor['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: [uni.$u.mpMixin, uni.$u.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涓婏紝浼氬欢杩熶竴涓猟uration鍛ㄦ湡鍚庢墠鎵ц
- // 鍦╥OS nvue涓婏紝鍒欎細涓�寮�濮嬮粯璁ゆ墽琛屼袱涓懆鏈熺殑鍔ㄧ敾
- aniAngel: 360, // 鍔ㄧ敾鏃嬭浆瑙掑害
- webviewHide: false, // 鐩戝惉webview鐨勭姸鎬侊紝濡傛灉闅愯棌浜嗛〉闈紝鍒欏仠姝㈠姩鐢伙紝浠ュ厤鎬ц兘娑堣��
- loading: false, // 鏄惁杩愯涓紝閽堝nvue浣跨敤
- }
- },
- computed: {
- // 褰撲负circle绫诲瀷鏃讹紝缁欏叾鍙﹀涓夎竟璁剧疆涓�涓洿杞讳竴浜涚殑棰滆壊
- // 涔嬫墍浠ラ渶瑕佽繖涔堝仛鐨勫師鍥犳槸锛屾瘮濡傜埗缁勪欢浼犱簡color涓虹孩鑹诧紝閭ｄ箞闇�瑕佸彟澶栫殑涓変釜杈逛负娴呯孩鑹�
- // 鑰屼笉鑳芥槸鍥哄畾鐨勬煇涓�涓叾浠栭鑹�(鍥犱负杩欎釜鍥哄畾鐨勯鑹插彲鑳芥祬钃濓紝瀵艰嚧鏁堟灉娌℃湁閭ｄ箞缁嗚吇鑹ソ)
- otherBorderColor() {
- const lightColor = uni.$u.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涓簍rue锛屼笖涓洪潪loading鐘舵�侊紝灏遍噸鏂版墽琛屽姩鐢绘ā鍧�
- // #ifdef APP-NVUE
- if (n && !this.loading) {
- setTimeout(() => {
- this.startAnimate()
- }, 30)
- }
- // #endif
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- 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]
- // 褰撳墠椤甸潰鐨剋ebview瀹炰緥
- const currentWebview = page.$getAppWebview()
- // 鐩戝惉webview鐨勬樉绀轰笌闅愯棌锛屼粠鑰屽仠姝㈡垨鑰呭紑濮嬪姩鐢�(涓轰簡鎬ц兘)
- currentWebview.addEventListener('hide', () => {
- this.webviewHide = true
- })
- currentWebview.addEventListener('show', () => {
- this.webviewHide = false
- })
- },
- // #ifdef APP-NVUE
- nvueAnimate() {
- // nvue涓嬶紝闈瀞pinner绫诲瀷鏃舵墠闇�瑕佹棆杞紝鍥犱负nvue鐨剆pinner绫诲瀷锛屼娇鐢ㄤ簡weex鐨�
- // loading-indicator缁勪欢锛岃嚜甯︽棆杞姛鑳�
- this.mode !== 'spinner' && this.startAnimate()
- },
- // 鎵цnvue鐨刟nimate妯″潡鍔ㄧ敾
- 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
- // 鍔ㄧ敾缁撴潫鍚庯紝缁х画寰幆鎵ц鍔ㄧ敾锛岄渶瑕佸悓鏃跺垽鏂瓀ebviewHide鍙橀噺
- // nvue瀹夊崜锛岄〉闈㈤殣钘忓悗渚濈劧浼氱户缁墽琛宻tartAnimate鏂规硶
- 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>
+<template>
+ <view
+ class="u-loading-icon"
+ :style="[$u.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: $u.addUnit(size),
+ height: $u.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鍜宧eight閰嶇疆浜嗕篃鏃犳晥 -->
+ <loading-indicator
+ v-if="!webviewHide"
+ class="u-loading-indicator"
+ :animating="true"
+ :style="{
+ color: color,
+ width: $u.addUnit(size),
+ height: $u.addUnit(size)
+ }"
+ />
+ <!-- #endif -->
+ </block>
+ </view>
+ <text
+ v-if="text"
+ class="u-loading-icon__text"
+ :style="{
+ fontSize: $u.addUnit(textSize),
+ color: textColor,
+ }"
+ >{{text}}</text>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ // #ifdef APP-NVUE
+ const animation = weex.requireModule('animation');
+ // #endif
+ /**
+ * loading 鍔犺浇鍔ㄧ敾
+ * @description 璀︽缁勪欢涓轰竴涓皬鍔ㄧ敾锛岀洰鍓嶇敤鍦╱View鐨刲oadmore鍔犺浇鏇村鍜宻witch寮�鍏崇瓑缁勪欢鐨勬鍦ㄥ姞杞界姸鎬佸満鏅��
+ * @tutorial https://www.uviewui.com/components/loading.html
+ * @property {Boolean} show 鏄惁鏄剧ず缁勪欢 (榛樿 true)
+ * @property {String} color 鍔ㄧ敾娲诲姩鍖哄煙鐨勯鑹诧紝鍙 mode = flower 妯″紡鏈夋晥锛堥粯璁olor['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: [uni.$u.mpMixin, uni.$u.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涓婏紝浼氬欢杩熶竴涓猟uration鍛ㄦ湡鍚庢墠鎵ц
+ // 鍦╥OS nvue涓婏紝鍒欎細涓�寮�濮嬮粯璁ゆ墽琛屼袱涓懆鏈熺殑鍔ㄧ敾
+ aniAngel: 360, // 鍔ㄧ敾鏃嬭浆瑙掑害
+ webviewHide: false, // 鐩戝惉webview鐨勭姸鎬侊紝濡傛灉闅愯棌浜嗛〉闈紝鍒欏仠姝㈠姩鐢伙紝浠ュ厤鎬ц兘娑堣��
+ loading: false, // 鏄惁杩愯涓紝閽堝nvue浣跨敤
+ }
+ },
+ computed: {
+ // 褰撲负circle绫诲瀷鏃讹紝缁欏叾鍙﹀涓夎竟璁剧疆涓�涓洿杞讳竴浜涚殑棰滆壊
+ // 涔嬫墍浠ラ渶瑕佽繖涔堝仛鐨勫師鍥犳槸锛屾瘮濡傜埗缁勪欢浼犱簡color涓虹孩鑹诧紝閭ｄ箞闇�瑕佸彟澶栫殑涓変釜杈逛负娴呯孩鑹�
+ // 鑰屼笉鑳芥槸鍥哄畾鐨勬煇涓�涓叾浠栭鑹�(鍥犱负杩欎釜鍥哄畾鐨勯鑹插彲鑳芥祬钃濓紝瀵艰嚧鏁堟灉娌℃湁閭ｄ箞缁嗚吇鑹ソ)
+ otherBorderColor() {
+ const lightColor = uni.$u.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涓簍rue锛屼笖涓洪潪loading鐘舵�侊紝灏遍噸鏂版墽琛屽姩鐢绘ā鍧�
+ // #ifdef APP-NVUE
+ if (n && !this.loading) {
+ setTimeout(() => {
+ this.startAnimate()
+ }, 30)
+ }
+ // #endif
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ 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]
+ // 褰撳墠椤甸潰鐨剋ebview瀹炰緥
+ const currentWebview = page.$getAppWebview()
+ // 鐩戝惉webview鐨勬樉绀轰笌闅愯棌锛屼粠鑰屽仠姝㈡垨鑰呭紑濮嬪姩鐢�(涓轰簡鎬ц兘)
+ currentWebview.addEventListener('hide', () => {
+ this.webviewHide = true
+ })
+ currentWebview.addEventListener('show', () => {
+ this.webviewHide = false
+ })
+ },
+ // #ifdef APP-NVUE
+ nvueAnimate() {
+ // nvue涓嬶紝闈瀞pinner绫诲瀷鏃舵墠闇�瑕佹棆杞紝鍥犱负nvue鐨剆pinner绫诲瀷锛屼娇鐢ㄤ簡weex鐨�
+ // loading-indicator缁勪欢锛岃嚜甯︽棆杞姛鑳�
+ this.mode !== 'spinner' && this.startAnimate()
+ },
+ // 鎵цnvue鐨刟nimate妯″潡鍔ㄧ敾
+ 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
+ // 鍔ㄧ敾缁撴潫鍚庯紝缁х画寰幆鎵ц鍔ㄧ敾锛岄渶瑕佸悓鏃跺垽鏂瓀ebviewHide鍙橀噺
+ // nvue瀹夊崜锛岄〉闈㈤殣钘忓悗渚濈劧浼氱户缁墽琛宻tartAnimate鏂规硶
+ 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>
--
Gitblit v1.9.3