From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uni_modules/wu-loading-icon/components/wu-loading-icon/wu-loading-icon.vue | 345 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 345 insertions(+), 0 deletions(-)
diff --git a/uni_modules/wu-loading-icon/components/wu-loading-icon/wu-loading-icon.vue b/uni_modules/wu-loading-icon/components/wu-loading-icon/wu-loading-icon.vue
new file mode 100644
index 0000000..3c096df
--- /dev/null
+++ b/uni_modules/wu-loading-icon/components/wu-loading-icon/wu-loading-icon.vue
@@ -0,0 +1,345 @@
+<template>
+ <view
+ class="wu-loading-icon"
+ :style="[$w.addStyle(customStyle)]"
+ :class="[vertical && 'wu-loading-icon--vertical']"
+ v-if="show"
+ >
+ <view
+ v-if="!webviewHide"
+ class="wu-loading-icon__spinner"
+ :class="[`wu-loading-icon__spinner--${mode}`]"
+ ref="ani"
+ :style="{
+ color: color,
+ width: $w.addUnit(size),
+ height: $w.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="wu-loading-icon__dot"
+ >
+ </view>
+ <!-- #endif -->
+ <!-- #ifdef APP-NVUE -->
+ <!-- 姝ょ粍浠跺唴閮ㄥ浘鏍囬儴鍒嗘棤娉曡缃楂橈紝鍗充娇閫氳繃width鍜宧eight閰嶇疆浜嗕篃鏃犳晥 -->
+ <loading-indicator
+ v-if="!webviewHide"
+ class="wu-loading-indicator"
+ :animating="true"
+ :style="{
+ color: color,
+ width: $w.addUnit(size),
+ height: $w.addUnit(size)
+ }"
+ />
+ <!-- #endif -->
+ </block>
+ </view>
+ <text
+ v-if="text"
+ class="wu-loading-icon__text"
+ :style="{
+ fontSize: $w.addUnit(textSize),
+ color: textColor,
+ }"
+ >{{text}}</text>
+ </view>
+</template>
+
+<script>
+ import mpMixin from '@/uni_modules/wu-ui-tools/libs/mixin/mpMixin.js'
+ import mixin from '@/uni_modules/wu-ui-tools/libs/mixin/mixin.js'
+ import props from './props.js';
+ // #ifdef APP-NVUE
+ const animation = weex.requireModule('animation');
+ // #endif
+ /**
+ * loading 鍔犺浇鍔ㄧ敾
+ * @description 璀︽缁勪欢涓轰竴涓皬鍔ㄧ敾锛岀洰鍓嶇敤鍦╳uui鐨刲oadmore鍔犺浇鏇村鍜宻witch寮�鍏崇瓑缁勪欢鐨勬鍦ㄥ姞杞界姸鎬佸満鏅��
+ * @tutorial https://wuui.cn/zh-CN/components/loadgin-icon.html
+ * @property {Boolean} show 鏄惁鏄剧ず缁勪欢 (榛樿 true)
+ * @property {String} color 鍔ㄧ敾娲诲姩鍖哄煙鐨勯鑹诧紝鍙 mode = flower 妯″紡鏈夋晥锛堥粯璁�#909193锛�
+ * @property {String} textColor 鎻愮ず鏂囨湰鐨勯鑹诧紙榛樿#909193锛�
+ * @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 <wu-loading mode="circle"></wu-loading>
+ */
+ export default {
+ name: 'wu-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涓婏紝浼氬欢杩熶竴涓猟uration鍛ㄦ湡鍚庢墠鎵ц
+ // 鍦╥OS nvue涓婏紝鍒欎細涓�寮�濮嬮粯璁ゆ墽琛屼袱涓懆鏈熺殑鍔ㄧ敾
+ aniAngel: 360, // 鍔ㄧ敾鏃嬭浆瑙掑害
+ webviewHide: false, // 鐩戝惉webview鐨勭姸鎬侊紝濡傛灉闅愯棌浜嗛〉闈紝鍒欏仠姝㈠姩鐢伙紝浠ュ厤鎬ц兘娑堣��
+ loading: false, // 鏄惁杩愯涓紝閽堝nvue浣跨敤
+ }
+ },
+ computed: {
+ // 褰撲负circle绫诲瀷鏃讹紝缁欏叾鍙﹀涓夎竟璁剧疆涓�涓洿杞讳竴浜涚殑棰滆壊
+ // 涔嬫墍浠ラ渶瑕佽繖涔堝仛鐨勫師鍥犳槸锛屾瘮濡傜埗缁勪欢浼犱簡color涓虹孩鑹诧紝閭ｄ箞闇�瑕佸彟澶栫殑涓変釜杈逛负娴呯孩鑹�
+ // 鑰屼笉鑳芥槸鍥哄畾鐨勬煇涓�涓叾浠栭鑹�(鍥犱负杩欎釜鍥哄畾鐨勯鑹插彲鑳芥祬钃濓紝瀵艰嚧鏁堟灉娌℃湁閭ｄ箞缁嗚吇鑹ソ)
+ otherBorderColor() {
+ const lightColor = this.$w.Color.gradient(this.color, '#ffffff', 100)[80]
+ if (this.mode === 'circle') {
+ return this.inactiveColor ? this.inactiveColor : lightColor
+ } else {
+ return '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 '@/uni_modules/wu-ui-tools/libs/css/components.scss';
+ @import '@/uni_modules/wu-ui-tools/libs/css/color.scss';
+ $wu-loading-icon-color: #c8c9cc !default;
+ $wu-loading-icon-text-margin-left:4px !default;
+ $wu-loading-icon-text-color:$wu-content-color !default;
+ $wu-loading-icon-text-font-size:14px !default;
+ $wu-loading-icon-text-line-height:20px !default;
+ $wu-loading-width:30px !default;
+ $wu-loading-height:30px !default;
+ $wu-loading-max-width:100% !default;
+ $wu-loading-max-height:100% !default;
+ $wu-loading-semicircle-border-width: 2px !default;
+ $wu-loading-semicircle-border-color:transparent !default;
+ $wu-loading-semicircle-border-top-right-radius: 100px !default;
+ $wu-loading-semicircle-border-top-left-radius: 100px !default;
+ $wu-loading-semicircle-border-bottom-left-radius: 100px !default;
+ $wu-loading-semicircle-border-bottom-right-radiu: 100px !default;
+ $wu-loading-semicircle-border-style: solid !default;
+ $wu-loading-circle-border-top-right-radius: 100px !default;
+ $wu-loading-circle-border-top-left-radius: 100px !default;
+ $wu-loading-circle-border-bottom-left-radius: 100px !default;
+ $wu-loading-circle-border-bottom-right-radiu: 100px !default;
+ $wu-loading-circle-border-width:2px !default;
+ $wu-loading-circle-border-top-color:#e5e5e5 !default;
+ $wu-loading-circle-border-right-color:$wu-loading-circle-border-top-color !default;
+ $wu-loading-circle-border-bottom-color:$wu-loading-circle-border-top-color !default;
+ $wu-loading-circle-border-left-color:$wu-loading-circle-border-top-color !default;
+ $wu-loading-circle-border-style:solid !default;
+ $wu-loading-icon-host-font-size:0px !default;
+ $wu-loading-icon-host-line-height:1 !default;
+ $wu-loading-icon-vertical-margin:6px 0 0 !default;
+ $wu-loading-icon-dot-top:0 !default;
+ $wu-loading-icon-dot-left:0 !default;
+ $wu-loading-icon-dot-width:100% !default;
+ $wu-loading-icon-dot-height:100% !default;
+ $wu-loading-icon-dot-before-width:2px !default;
+ $wu-loading-icon-dot-before-height:25% !default;
+ $wu-loading-icon-dot-before-margin:0 auto !default;
+ $wu-loading-icon-dot-before-background-color:currentColor !default;
+ $wu-loading-icon-dot-before-border-radius:40% !default;
+
+ .wu-loading-icon {
+ /* #ifndef APP-NVUE */
+ // display: inline-flex;
+ /* #endif */
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ color: $wu-loading-icon-color;
+
+ &__text {
+ margin-left: $wu-loading-icon-text-margin-left;
+ color: $wu-loading-icon-text-color;
+ font-size: $wu-loading-icon-text-font-size;
+ line-height: $wu-loading-icon-text-line-height;
+ }
+
+ &__spinner {
+ width: $wu-loading-width;
+ height: $wu-loading-height;
+ position: relative;
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ max-width: $wu-loading-max-width;
+ max-height: $wu-loading-max-height;
+ animation: wu-rotate 1s linear infinite;
+ /* #endif */
+ }
+
+ &__spinner--semicircle {
+ border-width: $wu-loading-semicircle-border-width;
+ border-color: $wu-loading-semicircle-border-color;
+ border-top-right-radius: $wu-loading-semicircle-border-top-right-radius;
+ border-top-left-radius: $wu-loading-semicircle-border-top-left-radius;
+ border-bottom-left-radius: $wu-loading-semicircle-border-bottom-left-radius;
+ border-bottom-right-radius: $wu-loading-semicircle-border-bottom-right-radiu;
+ border-style: $wu-loading-semicircle-border-style;
+ }
+
+ &__spinner--circle {
+ border-top-right-radius: $wu-loading-circle-border-top-right-radius;
+ border-top-left-radius: $wu-loading-circle-border-top-left-radius;
+ border-bottom-left-radius: $wu-loading-circle-border-bottom-left-radius;
+ border-bottom-right-radius: $wu-loading-circle-border-bottom-right-radiu;
+ border-width: $wu-loading-circle-border-width;
+ border-top-color: $wu-loading-circle-border-top-color;
+ border-right-color: $wu-loading-circle-border-right-color;
+ border-bottom-color: $wu-loading-circle-border-bottom-color;
+ border-left-color: $wu-loading-circle-border-left-color;
+ border-style: $wu-loading-circle-border-style;
+ }
+
+ &--vertical {
+ flex-direction: column
+ }
+ }
+
+ /* #ifndef APP-NVUE */
+ :host {
+ font-size: $wu-loading-icon-host-font-size;
+ line-height: $wu-loading-icon-host-line-height;
+ }
+
+ .wu-loading-icon {
+ &__spinner--spinner {
+ animation-timing-function: steps(12)
+ }
+
+ &__text:empty {
+ display: none
+ }
+
+ &--vertical &__text {
+ margin: $wu-loading-icon-vertical-margin;
+ color: $wu-content-color;
+ }
+
+ &__dot {
+ position: absolute;
+ top: $wu-loading-icon-dot-top;
+ left: $wu-loading-icon-dot-left;
+ width: $wu-loading-icon-dot-width;
+ height: $wu-loading-icon-dot-height;
+
+ &:before {
+ display: block;
+ width: $wu-loading-icon-dot-before-width;
+ height: $wu-loading-icon-dot-before-height;
+ margin: $wu-loading-icon-dot-before-margin;
+ background-color: $wu-loading-icon-dot-before-background-color;
+ border-radius: $wu-loading-icon-dot-before-border-radius;
+ content: " "
+ }
+ }
+ }
+
+ @for $i from 1 through 12 {
+ .wu-loading-icon__dot:nth-of-type(#{$i}) {
+ transform: rotate($i * 30deg);
+ opacity: 1 - 0.0625 * ($i - 1);
+ }
+ }
+
+ @keyframes wu-rotate {
+ 0% {
+ transform: rotate(0deg)
+ }
+
+ to {
+ transform: rotate(1turn)
+ }
+ }
+
+ /* #endif */
+</style>
--
Gitblit v1.9.3