From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 20 Oct 2023 15:21:35 +0800
Subject: [PATCH] fix:立行立改Uniapp小程序新建项目
---
uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue | 343 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 343 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue b/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue
new file mode 100644
index 0000000..2ede5c3
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-loading-icon/u-loading-icon.vue
@@ -0,0 +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���height������������������ -->
+ <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 ���������������������������������������������uView���loadmore���������������switch���������������������������������������������
+ * @tutorial https://www.uviewui.com/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: [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���������������������duration������������������
+ // ���iOS 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���true������������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]
+ // ���������������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>
--
Gitblit v1.8.0