@gmcb/uv-ui 0.2.26

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

@@ -0,0 +1,96 @@
+<template>
+	<view class="uv-loading-page uv-flex-column" v-if="showLoading" :style="[loadingPageStyle]">
+		<image v-if="image!=''" :src="image" class="uv-loading-page__img" mode="widthFit" :style="[{
+			width: $uv.addUnit(iconSize),
+			height: $uv.addUnit(iconSize)
+		}]"></image>
+		<uv-loading-icon v-else :mode="loadingMode" :size="iconSize" :color="loadingColor"></uv-loading-icon>
+		<slot>
+			<text class="uv-loading-page__text" :style="[{
+				fontSize: $uv.addUnit(fontSize),
+				color: color
+			}]">{{ loadingText }}</text>
+		</slot>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from "./props.js";
+	/**
+	 * loadingPage 加载动画
+	 * @description 警此组件为一个小动画，目前用在uvui的loadmore加载更多和switch开关等组件的正在加载状态场景。
+	 * @tutorial https://www.uvui.cn/components/loading.html
+	 * 
+	 * @property {Boolean}	loading  是否加载中 （默认 false ）
+	 * @property {String | Number}	loadingText		提示内容  (默认 '正在加载' )
+	 * @property {String}  image  文字上方用于替换loading动画的图片
+	 * @property {String}  loadingMode  加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形 （默认 'circle' ）
+	 * @property {String}  bgColor  背景色 （默认 '#ffffff' ）
+	 * @property {String}  color  文字颜色 （默认 '#C8C8C8' ）
+	 * @property {String | Number}	fontSize  文字大小 （默认 19 ）
+	 * @property {String | Number}	iconSize  图标大小 （默认 28 ）
+	 * @property {String}  loadingColor	加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ）
+	 * @property {String | Number}	duration  关闭加载时的过渡时间，单位ms （默认 300 ）
+	 * 
+	 * @example <uv-loading mode="circle"></uv-loading>
+	 */
+	export default {
+		name: "uv-loading-page",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				showLoading: false,
+				opacity: 1
+			}
+		},
+		watch: {
+			loading: {
+				immediate: true,
+				handler(newVal) {
+					if (newVal) {
+						this.showLoading = true;
+						this.opacity = 1;
+					} else {
+						this.opacity = 0;
+						this.$nextTick(() => {
+							this.$uv.sleep(this.duration).then(res => {
+								this.showLoading = false;
+							})
+						})
+					}
+				}
+			}
+		},
+		computed: {
+			loadingPageStyle() {
+				const style = {
+					'position': 'fixed',
+					'top': '0',
+					'left': '0',
+					'right': '0',
+					'bottom': '0',
+					'zIndex': '999',
+					'background-color': this.bgColor,
+					'transition-duration': `${this.duration}ms`,
+					'opacity': this.opacity
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		}
+	}
+</script>
+<style scoped lang="scss">
+	@import '../../libs/css/components.scss';
+	$uv-loading-icon-margin-bottom: 10px !default;
+	.uv-loading-page {
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+		padding-bottom: 150px;
+		transition-property: opacity;
+		&__text {
+			margin-top: $uv-loading-icon-margin-bottom;
+		}
+	}
+</style>

package/components/uv-modal/props.js

@@ -0,0 +1,90 @@
+export default {
+	props: {
+		// 标题
+		title: {
+			type: [String],
+			default: ''
+		},
+		// 弹窗内容
+		content: {
+			type: String,
+			default: ''
+		},
+		// 确认文案
+		confirmText: {
+			type: String,
+			default: '确认'
+		},
+		// 取消文案
+		cancelText: {
+			type: String,
+			default: '取消'
+		},
+		// 是否显示确认按钮
+		showConfirmButton: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示取消按钮
+		showCancelButton: {
+			type: Boolean,
+			default: false
+		},
+		// 确认按钮颜色
+		confirmColor: {
+			type: String,
+			default: '#2979ff'
+		},
+		// 取消文字颜色
+		cancelColor: {
+			type: String,
+			default: '#606266'
+		},
+		// 对调确认和取消的位置
+		buttonReverse: {
+			type: Boolean,
+			default: false
+		},
+		// 是否开启缩放效果
+		zoom: {
+			type: Boolean,
+			default: true
+		},
+		// 层级
+		zIndex: {
+			type: [String, Number],
+			default: 10075
+		},
+		// 是否异步关闭，只对确定按钮有效
+		asyncClose: {
+			type: Boolean,
+			default: false
+		},
+		// 是否允许点击遮罩关闭modal
+		closeOnClickOverlay: {
+			type: Boolean,
+			default: true
+		},
+		// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+		negativeTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// modal宽度，不支持百分比，可以数值，px，rpx单位
+		width: {
+			type: [String, Number],
+			default: '650rpx'
+		},
+		// 文本对齐方式，默认left
+		align: {
+			type: String,
+			default: 'left'
+		},
+		// 文本自定义样式
+		textStyle: {
+			type: [Object, String],
+			default: ''
+		},
+		...uni.$uv?.props?.modal
+	}
+}

package/components/uv-modal/uv-modal.vue

@@ -0,0 +1,245 @@
+<template>
+	<uv-popup
+		ref="modalPopup"
+		mode="center"
+		:zoom="zoom"
+    :zIndex="zIndex"
+		:customStyle="{
+			borderRadius: '6px', 
+			overflow: 'hidden',
+			marginTop: `-${$uv.addUnit(negativeTop)}`
+		}"
+		:closeOnClickOverlay="closeOnClickOverlay"
+		:safeAreaInsetBottom="false"
+		:duration="400"
+		@change="popupChange"
+	>
+		<view
+			class="uv-modal"
+			:style="{
+				width: $uv.addUnit(width),
+			}"
+		>
+			<text
+				class="uv-modal__title"
+				v-if="title"
+			>{{ title }}</text>
+			<view
+				class="uv-modal__content"
+				:style="{
+					paddingTop: `${title ? 12 : 25}px`
+				}"
+			>
+				<slot>
+					<text 
+						class="uv-modal__content__text"
+						:style="[
+							{
+								textAlign: align
+							},
+							nvueStyle,
+							$uv.addStyle(textStyle)
+						]"
+					>{{ content }}</text>
+				</slot>
+			</view>
+			<slot name="confirmButton">
+				<uv-line></uv-line>
+				<view
+					v-if="showConfirmButton || showCancelButton"
+					class="uv-modal__button-group"
+					:style="{
+						flexDirection: buttonReverse ? 'row-reverse' : 'row'
+					}"
+				>
+					<view
+						class="uv-modal__button-group__wrapper uv-modal__button-group__wrapper--cancel"
+						:hover-stay-time="150"
+						hover-class="uv-modal__button-group__wrapper--hover"
+						:class="[showCancelButton && !showConfirmButton && 'uv-modal__button-group__wrapper--only-cancel']"
+						v-if="showCancelButton"
+						@tap="cancelHandler"
+					>
+						<text
+							class="uv-modal__button-group__wrapper__text"
+							:style="{
+								color: cancelColor
+							}"
+						>{{ cancelText }}</text>
+					</view>
+					<uv-line
+						direction="column"
+						v-if="showConfirmButton && showCancelButton"
+					></uv-line>
+					<view
+						class="uv-modal__button-group__wrapper uv-modal__button-group__wrapper--confirm"
+						:hover-stay-time="150"
+						hover-class="uv-modal__button-group__wrapper--hover"
+						:class="[!showCancelButton && showConfirmButton && 'uv-modal__button-group__wrapper--only-confirm']"
+						v-if="showConfirmButton"
+						@tap="confirmHandler"
+					>
+						<uv-loading-icon v-if="loading"></uv-loading-icon>
+						<text
+							v-else
+							class="uv-modal__button-group__wrapper__text"
+							:style="{
+								color: confirmColor
+							}"
+						>{{ confirmText }}</text>
+					</view>
+				</view>
+			</slot>
+		</view>
+	</uv-popup>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * Modal 模态框
+	 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
+	 * @tutorial https://www.uvui.cn/components/modul.html
+	 * @property {String}			title				标题内容
+	 * @property {String}			content				模态框内容，如传入slot内容，则此参数无效
+	 * @property {String}			confirmText			确认按钮的文字 （默认 '确认' ）
+	 * @property {String}			cancelText			取消按钮的文字 （默认 '取消' ）
+	 * @property {Boolean}			showConfirmButton	是否显示确认按钮 （默认 true ）
+	 * @property {Boolean}			showCancelButton	是否显示取消按钮 （默认 false ）
+	 * @property {String}			confirmColor		确认按钮的颜色 （默认 '#2979ff' ）
+	 * @property {String}			cancelColor			取消按钮的颜色 （默认 '#606266' ）
+	 * @property {Boolean}			buttonReverse		对调确认和取消的位置 （默认 false ）
+	 * @property {Boolean}			zoom				是否开启缩放模式 （默认 true ）
+	 * @property {Boolean}			asyncClose			是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
+	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭该组件 （默认 true ）
+	 * @property {String | Number}	negativeTop			往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
+	 * @property {String | Number}	width				modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
+	 * @property {String} align 文本对齐方式 （默认'left'） 
+	 * @property {String | Object} textStyle 文本扩展样式
+	 * @event {Function} confirm	点击确认按钮时触发
+	 * @event {Function} cancel		点击取消按钮时触发
+	 * @event {Function} close		点击遮罩关闭出发，closeOnClickOverlay为true有效
+	 * @example <uv-modal ref="modalPopup" title="title" content="content"></uv-modal>
+	 */
+	export default {
+		name: 'uv-modal',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				loading: false
+			}
+		},
+		computed: {
+			nvueStyle() {
+				const style = {};
+				// 避免nvue中不能换行的问题
+				// #ifdef APP-NVUE
+				style.width = this.$uv.addUnit(this.$uv.getPx(this.width) - 50,'px');
+				// #endif
+				return style;
+			}
+		},
+		methods: {
+			open() {
+				this.$refs.modalPopup.open();
+				if (this.loading) this.loading = false;
+			},
+			close() {
+				this.$refs.modalPopup.close();
+			},
+			popupChange(e) {
+				if(!e.show) this.$emit('close');
+			},
+			// 点击确定按钮
+			confirmHandler() {
+				if(!this.loading) {
+					this.$emit('confirm');
+				}
+				// 如果配置了异步关闭，将按钮值为loading状态
+				if (this.asyncClose) {
+					this.loading = true;
+				} else {
+					this.close();
+				}
+			},
+			// 点击取消按钮
+			cancelHandler() {
+				this.$emit('cancel');
+				this.close();
+			},
+			closeLoading() {
+				this.$nextTick(()=>{
+					this.loading = false;
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-modal-border-radius: 6px;
+
+	.uv-modal {
+		width: 650rpx;
+		border-radius: $uv-modal-border-radius;
+		overflow: hidden;
+	
+		&__title {
+			font-size: 16px;
+			font-weight: bold;
+			color: $uv-content-color;
+			text-align: center;
+			padding-top: 25px;
+		}
+	
+		&__content {
+			padding: 12px 25px 25px 25px;
+			@include flex;
+			justify-content: center;
+	
+			&__text {
+				line-height: 48rpx;
+				font-size: 15px;
+				color: $uv-content-color;
+				flex: 1;
+			}
+		}
+	
+		&__button-group {
+			@include flex;
+			height: 48px;
+	
+			&__wrapper {
+				flex: 1;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+				height: 48px;
+				
+				&--confirm,
+				&--only-cancel {
+					border-bottom-right-radius: $uv-modal-border-radius;
+				}
+				
+				&--cancel,
+				&--only-confirm {
+					border-bottom-left-radius: $uv-modal-border-radius;
+				}
+	
+				&--hover {
+					background-color: $uv-bg-color;
+				}
+	
+				&__text {
+					color: $uv-content-color;
+					font-size: 16px;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

package/components/uv-navbar/props.js

@@ -0,0 +1,89 @@
+export default {
+	props: {
+		// 是否开启顶部安全区适配
+		safeAreaInsetTop: {
+			type: Boolean,
+			default: true
+		},
+		// 固定在顶部时，是否生成一个等高元素，以防止塌陷
+		placeholder: {
+			type: Boolean,
+			default: false
+		},
+		// 是否固定在顶部
+		fixed: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示下边框
+		border: {
+			type: Boolean,
+			default: false
+		},
+		// 左边的图标
+		leftIcon: {
+			type: String,
+			default: 'arrow-left'
+		},
+		// 左边的提示文字
+		leftText: {
+			type: String,
+			default: ''
+		},
+		// 左右的提示文字
+		rightText: {
+			type: String,
+			default: ''
+		},
+		// 右边的图标
+		rightIcon: {
+			type: String,
+			default: ''
+		},
+		// 标题
+		title: {
+			type: [String, Number],
+			default: ''
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		},
+		imgMode: {
+			type: String,
+			default: 'aspectFill'
+		},
+		// 标题的宽度
+		titleWidth: {
+			type: [String, Number],
+			default: '400rpx'
+		},
+		// 导航栏高度
+		height: {
+			type: [String, Number],
+			default: '44px'
+		},
+		// 左侧返回图标的大小
+		leftIconSize: {
+			type: [String, Number],
+			default: 20
+		},
+		// 左侧返回图标的颜色
+		leftIconColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 点击左侧区域(返回图标)，是否自动返回上一页
+		autoBack: {
+			type: Boolean,
+			default: false
+		},
+		// 标题的样式，对象或字符串
+		titleStyle: {
+			type: [String, Object],
+			default: ''
+		},
+		...uni.$uv?.props?.navbar
+	}
+}