uview-plus 3.0.3

package/components/u-loading-page/props.js

@@ -0,0 +1,49 @@
+export default {
+    props: {
+        // 提示内容
+        loadingText: {
+            type: [String, Number],
+            default: uni.$u.props.loadingPage.loadingText
+        },
+        // 文字上方用于替换loading动画的图片
+        image: {
+            type: String,
+            default: uni.$u.props.loadingPage.image
+        },
+        // 加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形
+        loadingMode: {
+            type: String,
+            default: uni.$u.props.loadingPage.loadingMode
+        },
+        // 是否加载中
+        loading: {
+            type: Boolean,
+            default: uni.$u.props.loadingPage.loading
+        },
+        // 背景色
+        bgColor: {
+            type: String,
+            default: uni.$u.props.loadingPage.bgColor
+        },
+        // 文字颜色
+        color: {
+            type: String,
+            default: uni.$u.props.loadingPage.color
+        },
+        // 文字大小
+        fontSize: {
+            type: [String, Number],
+            default: uni.$u.props.loadingPage.fontSize
+        },
+		// 图标大小
+		iconSize: {
+		    type: [String, Number],
+		    default: uni.$u.props.loadingPage.fontSize
+		},
+        // 加载中图标的颜色，只能rgb或者十六进制颜色值
+        loadingColor: {
+            type: String,
+            default: uni.$u.props.loadingPage.loadingColor
+        }
+    }
+}

package/components/u-loading-page/u-loading-page.vue

@@ -0,0 +1,115 @@
+<template>
+    <u-transition
+        :show="loading"
+        :custom-style="{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: bgColor,
+            display: 'flex',
+        }"
+    >
+        <view class="u-loading-page">
+            <view class="u-loading-page__warpper">
+                <view class="u-loading-page__warpper__loading-icon">
+                    <image
+                        v-if="image"
+                        :src="image"
+                        class="u-loading-page__warpper__loading-icon__img"
+                        mode="widthFit"
+						:style="{
+							width: $u.addUnit(iconSize),
+						    height: $u.addUnit(iconSize)
+						}"
+                    ></image>
+                    <u-loading-icon
+                        v-else
+                        :mode="loadingMode"
+                        :size="$u.addUnit(iconSize)"
+                        :color="loadingColor"
+                    ></u-loading-icon>
+                </view>
+                <slot>
+                    <text
+                        class="u-loading-page__warpper__text"
+                        :style="{
+                            fontSize: $u.addUnit(fontSize),
+                            color: color,
+                        }"
+                        >{{ loadingText }}</text
+                    >
+                </slot>
+            </view>
+        </view>
+    </u-transition>
+</template>
+
+<script>
+import props from "./props.js";
+/**
+ * loadingPage 加载动画
+ * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+ * @tutorial https://www.uviewui.com/components/loading.html
+ * @property {String | Number}	loadingText		提示内容  (默认 '正在加载' )
+ * @property {String}			image			文字上方用于替换loading动画的图片
+ * @property {String}			loadingMode		加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形 （默认 'circle' ）
+ * @property {Boolean}			loading			是否加载中 （默认 false ）
+ * @property {String}			bgColor			背景色 （默认 '#ffffff' ）
+ * @property {String}			color			文字颜色 （默认 '#C8C8C8' ）
+ * @property {String | Number}	fontSize		文字大小 （默认 19 ）
+ * @property {String | Number}	iconSize		图标大小 （默认 28 ）
+ * @property {String}			loadingColor	加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ）
+ * @property {Object}			customStyle		自定义样式
+ * @example <u-loading mode="circle"></u-loading>
+ */
+export default {
+    name: "u-loading-page",
+    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+    data() {
+        return {};
+    },
+    methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+$text-color: rgb(200, 200, 200) !default;
+$text-size: 19px !default;
+$u-loading-icon-margin-bottom: 10px !default;
+
+.u-loading-page {
+    @include flex(column);
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+
+    &__warpper {
+        margin-top: -150px;
+        justify-content: center;
+        align-items: center;
+        /* #ifndef APP-NVUE */
+        color: $text-color;
+        font-size: $text-size;
+        /* #endif */
+        @include flex(column);
+
+        &__loading-icon {
+            margin-bottom: $u-loading-icon-margin-bottom;
+
+            &__img {
+                width: 40px;
+                height: 40px;
+            }
+        }
+
+        &__text {
+            font-size: $text-size;
+            color: $text-color;
+        }
+    }
+}
+</style>

package/components/u-loadmore/props.js

@@ -0,0 +1,94 @@
+export default {
+    props: {
+        // 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
+        status: {
+            type: String,
+            default: uni.$u.props.loadmore.status
+        },
+        // 组件背景色
+        bgColor: {
+            type: String,
+            default: uni.$u.props.loadmore.bgColor
+        },
+        // 是否显示加载中的图标
+        icon: {
+            type: Boolean,
+            default: uni.$u.props.loadmore.icon
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: uni.$u.props.loadmore.fontSize
+        },
+		    // 图标大小
+        iconSize: {
+            type: [String, Number],
+            default: uni.$u.props.loadmore.iconSize
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: uni.$u.props.loadmore.color
+        },
+        // 加载中状态的图标，spinner-花朵状图标，circle-圆圈状，semicircle-半圆
+        loadingIcon: {
+            type: String,
+            default: uni.$u.props.loadmore.loadingIcon
+        },
+        // 加载前的提示语
+        loadmoreText: {
+            type: String,
+            default: uni.$u.props.loadmore.loadmoreText
+        },
+        // 加载中提示语
+        loadingText: {
+            type: String,
+            default: uni.$u.props.loadmore.loadingText
+        },
+        // 没有更多的提示语
+        nomoreText: {
+            type: String,
+            default: uni.$u.props.loadmore.nomoreText
+        },
+        // 在“没有更多”状态下，是否显示粗点
+        isDot: {
+            type: Boolean,
+            default: uni.$u.props.loadmore.isDot
+        },
+        // 加载中图标的颜色
+        iconColor: {
+            type: String,
+            default: uni.$u.props.loadmore.iconColor
+        },
+        // 上边距
+        marginTop: {
+            type: [String, Number],
+            default: uni.$u.props.loadmore.marginTop
+        },
+        // 下边距
+        marginBottom: {
+            type: [String, Number],
+            default: uni.$u.props.loadmore.marginBottom
+        },
+        // 高度，单位px
+        height: {
+            type: [String, Number],
+            default: uni.$u.props.loadmore.height
+        },
+        // 是否显示左边分割线
+        line: {
+            type: Boolean,
+            default: uni.$u.props.loadmore.line
+        },
+        // 线条颜色
+        lineColor: {
+            type: String,
+            default: uni.$u.props.loadmore.lineColor
+        },
+        // 是否虚线，true-虚线，false-实线
+        dashed: {
+            type: Boolean,
+            default: uni.$u.props.loadmore.dashed
+        }
+    }
+}

package/components/u-loadmore/u-loadmore.vue

@@ -0,0 +1,150 @@
+<template>
+	<view
+	    class="u-loadmore"
+	    :style="[
+			$u.addStyle(customStyle),
+			{
+				backgroundColor: bgColor,
+				marginBottom: $u.addUnit(marginBottom),
+				marginTop: $u.addUnit(marginTop),
+				height: $u.addUnit(height),
+			},
+		]"
+	>
+		<u-line
+		    length="140rpx"
+		    :color="lineColor"
+		    :hairline="false"
+			:dashed="dashed"
+			v-if="line"
+		></u-line>
+		<!-- 加载中和没有更多的状态才显示两边的横线 -->
+		<view
+		    :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''"
+		    class="u-loadmore__content"
+		>
+			<view
+			    class="u-loadmore__content__icon-wrap"
+			    v-if="status === 'loading' && icon"
+			>
+				<u-loading-icon
+				    :color="iconColor"
+				    :size="iconSize"
+				    :mode="loadingIcon"
+				></u-loading-icon>
+			</view>
+			<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
+			<text
+			    class="u-line-1"
+			    :style="[loadTextStyle]"
+			    :class="[(status == 'nomore' && isDot == true) ? 'u-loadmore__content__dot-text' : 'u-loadmore__content__text']"
+			    @tap="loadMore"
+			>{{ showText }}</text>
+		</view>
+		<u-line
+		    length="140rpx"
+		    :color="lineColor"
+			:hairline="false"
+			:dashed="dashed"
+			v-if="line"
+		></u-line>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+
+	/**
+	 * loadmore 加载更多
+	 * @description 此组件一般用于标识页面底部加载数据时的状态。
+	 * @tutorial https://www.uviewui.com/components/loadMore.html
+	 * @property {String}			status			组件状态（默认 'loadmore' ）
+	 * @property {String}			bgColor			组件背景颜色，在页面是非白色时会用到（默认 'transparent' ）
+	 * @property {Boolean}			icon			加载中时是否显示图标（默认 true ）
+	 * @property {String | Number}	fontSize		字体大小（默认 14 ）
+	 * @property {String | Number}	iconSize		图标大小（默认 17 ）
+	 * @property {String}			color			字体颜色（默认 '#606266' ）
+	 * @property {String}			loadingIcon		加载图标（默认 'circle' ）
+	 * @property {String}			loadmoreText	加载前的提示语（默认 '加载更多' ）
+	 * @property {String}			loadingText		加载中提示语（默认 '正在加载...' ）
+	 * @property {String}			nomoreText		没有更多的提示语（默认 '没有更多了' ）
+	 * @property {Boolean}			isDot			到上一个相邻元素的距离 （默认 false ）
+	 * @property {String}			iconColor		加载中图标的颜色 （默认 '#b7b7b7' ）
+	 * @property {String}			lineColor		线条颜色（默认 #E6E8EB ）
+	 * @property {String | Number}	marginTop		上边距 （默认 10 ）
+	 * @property {String | Number}	marginBottom	下边距 （默认 10 ）
+	 * @property {String | Number}	height			高度，单位px （默认 'auto' ）
+	 * @property {Boolean}			line			是否显示左边分割线  （默认 false ）
+	 * @property {Boolean}			dashed		// 是否虚线，true-虚线，false-实线  （默认 false ）
+	 * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
+	 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
+	 */
+	export default {
+		name: "u-loadmore",
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		data() {
+			return {
+				// 粗点
+				dotText: "●"
+			}
+		},
+		computed: {
+			// 加载的文字显示的样式
+			loadTextStyle() {
+				return {
+					color: this.color,
+					fontSize: uni.$u.addUnit(this.fontSize),
+					lineHeight: uni.$u.addUnit(this.fontSize),
+					backgroundColor: this.bgColor,
+				}
+			},
+			// 显示的提示文字
+			showText() {
+				let text = '';
+				if (this.status == 'loadmore') text = this.loadmoreText
+				else if (this.status == 'loading') text = this.loadingText
+				else if (this.status == 'nomore' && this.isDot) text = this.dotText;
+				else text = this.nomoreText;
+				return text;
+			}
+		},
+		methods: {
+			loadMore() {
+				// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
+				if (this.status == 'loadmore') this.$emit('loadmore');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-loadmore {
+		@include flex(row);
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+
+		&__content {
+			margin: 0 15px;
+			@include flex(row);
+			align-items: center;
+			justify-content: center;
+
+			&__icon-wrap {
+				margin-right: 8px;
+			}
+
+			&__text {
+				font-size: 14px;
+				color: $u-content-color;
+			}
+
+			&__dot-text {
+				font-size: 15px;
+				color: $u-tips-color;
+			}
+		}
+	}
+</style>

package/components/u-modal/props.js

@@ -0,0 +1,84 @@
+export default {
+    props: {
+        // 是否展示modal
+        show: {
+            type: Boolean,
+            default: uni.$u.props.modal.show
+        },
+        // 标题
+        title: {
+            type: [String],
+            default: uni.$u.props.modal.title
+        },
+        // 弹窗内容
+        content: {
+            type: String,
+            default: uni.$u.props.modal.content
+        },
+        // 确认文案
+        confirmText: {
+            type: String,
+            default: uni.$u.props.modal.confirmText
+        },
+        // 取消文案
+        cancelText: {
+            type: String,
+            default: uni.$u.props.modal.cancelText
+        },
+        // 是否显示确认按钮
+        showConfirmButton: {
+            type: Boolean,
+            default: uni.$u.props.modal.showConfirmButton
+        },
+        // 是否显示取消按钮
+        showCancelButton: {
+            type: Boolean,
+            default: uni.$u.props.modal.showCancelButton
+        },
+        // 确认按钮颜色
+        confirmColor: {
+            type: String,
+            default: uni.$u.props.modal.confirmColor
+        },
+        // 取消文字颜色
+        cancelColor: {
+            type: String,
+            default: uni.$u.props.modal.cancelColor
+        },
+        // 对调确认和取消的位置
+        buttonReverse: {
+            type: Boolean,
+            default: uni.$u.props.modal.buttonReverse
+        },
+        // 是否开启缩放效果
+        zoom: {
+            type: Boolean,
+            default: uni.$u.props.modal.zoom
+        },
+        // 是否异步关闭，只对确定按钮有效
+        asyncClose: {
+            type: Boolean,
+            default: uni.$u.props.modal.asyncClose
+        },
+        // 是否允许点击遮罩关闭modal
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: uni.$u.props.modal.closeOnClickOverlay
+        },
+        // 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+        negativeTop: {
+            type: [String, Number],
+            default: uni.$u.props.modal.negativeTop
+        },
+        // modal宽度，不支持百分比，可以数值，px，rpx单位
+        width: {
+            type: [String, Number],
+            default: uni.$u.props.modal.width
+        },
+        // 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮
+        confirmButtonShape: {
+            type: String,
+            default: uni.$u.props.modal.confirmButtonShape
+        }
+    }
+}