@gmcb/uv-ui 0.2.26

package/components/uv-skeleton/props.js

@@ -0,0 +1,65 @@
+export default {
+	props: {
+		// 是否展示骨架组件
+		loading: {
+			type: Boolean,
+			default: true
+		},
+		// 是否开启动画效果
+		animate: {
+			type: Boolean,
+			default: true
+		},
+		// 段落占位图行数
+		rows: {
+			type: [String, Number],
+			default: 0
+		},
+		// 段落占位图的宽度
+		rowsWidth: {
+			type: [String, Number, Array],
+			default: '100%'
+		},
+		// 段落占位图的高度
+		rowsHeight: {
+			type: [String, Number, Array],
+			default: 18
+		},
+		// 段落占位图的左边距
+		rowsLeft: {
+			type: [String, Number, Array],
+			default: 0
+		},
+		// 是否展示标题占位图
+		title: {
+			type: Boolean,
+			default: true
+		},
+		// 段落标题的宽度
+		titleWidth: {
+			type: [String, Number],
+			default: '50%'
+		},
+		// 段落标题的高度
+		titleHeight: {
+			type: [String, Number],
+			default: 18
+		},
+		// 是否展示头像占位图
+		avatar: {
+			type: Boolean,
+			default: false
+		},
+		// 头像占位图大小
+		avatarSize: {
+			type: [String, Number],
+			default: 32
+		},
+		// 头像占位图的形状，circle-圆形，square-方形
+		avatarShape: {
+			type: String,
+			default: 'circle'
+		},
+		...uni.$uv?.props?.skeleton
+	}
+}

package/components/uv-skeleton/uv-skeleton.vue

@@ -0,0 +1,250 @@
+<template>
+	<view class="uv-skeleton">
+		<view
+		    class="uv-skeleton__wrapper"
+		    ref="uv-skeleton__wrapper"
+		    v-if="loading"
+			style="display: flex; flex-direction: row;"
+		>
+			<view
+			    class="uv-skeleton__wrapper__avatar"
+			    v-if="avatar"
+			    :class="[`uv-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
+			    :style="{
+						height: $uv.addUnit(avatarSize),
+						width: $uv.addUnit(avatarSize)
+					}"
+			></view>
+			<view
+			    class="uv-skeleton__wrapper__content"
+			    ref="uv-skeleton__wrapper__content"
+				style="flex: 1;"
+			>
+				<view
+				    class="uv-skeleton__wrapper__content__title"
+				    v-if="title"
+				    :style="{
+							width: uTitleWidth,
+							height: $uv.addUnit(titleHeight),
+						}"
+				    :class="[animate && 'animate']"
+				></view>
+				<view
+				    class="uv-skeleton__wrapper__content__rows"
+				    :class="[animate && 'animate']"
+				    v-for="(item, index) in rowsArray"
+				    :key="index"
+				    :style="{
+							 width: item.width,
+							 height: item.height,
+							 marginTop: item.marginTop,
+							 marginLeft: item.marginLeft
+						}"
+				>
+		
+				</view>
+			</view>
+		</view>
+		<slot v-else />
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+	const dom = uni.requireNativePlugin('dom')
+	const animation = uni.requireNativePlugin('animation')
+	// #endif
+	/**
+	 * Skeleton 骨架屏
+	 * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
+	 * @tutorial https://www.uvui.cn/components/skeleton.html
+	 * @property {Boolean}					loading		是否显示骨架占位图，设置为false将会展示子组件内容 (默认 true )
+	 * @property {Boolean}					animate		是否开启动画效果 (默认 true )
+	 * @property {String | Number}			rows		段落占位图行数 (默认 0 )
+	 * @property {String | Number | Array}	rowsWidth	段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 (默认 '100%' )
+	 * @property {String | Number | Array}	rowsHeight	段落的高度 (默认 18 )
+	 * @property {String | Number | Array}	rowsLeft	段落的左边距 (默认 0 )
+	 * @property {Boolean}					title		是否展示标题占位图 (默认 true )
+	 * @property {String | Number}			titleWidth	标题的宽度 (默认 '50%' )
+	 * @property {String | Number}			titleHeight	标题的高度 (默认 18 )
+	 * @property {Boolean}					avatar		是否展示头像占位图 (默认 false )
+	 * @property {String | Number}			avatarSize	头像占位图大小 (默认 32 )
+	 * @property {String}					avatarShape	头像占位图的形状，circle-圆形，square-方形 (默认 'circle' )
+	 * @example <uv-skeleton :loading="true" :animate="true"></uv-skeleton>
+	 */
+	export default {
+		name: 'uv-skeleton',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				width: 0,
+			}
+		},
+		watch: {
+			loading() {
+				this.getComponentWidth()
+			}
+		},
+		computed: {
+			rowsArray() {
+				if (/%$/.test(this.rowsHeight)) {
+					this.$uv.error('rowsHeight参数不支持百分比单位')
+				}
+				const rows = []
+				for (let i = 0; i < this.rows; i++) {
+					let item = {},
+						// 需要预防超出数组边界的情况
+						rowWidth = this.$uv.test.array(this.rowsWidth) ? (this.rowsWidth[i] || (i === this.row - 1 ? '70%' : '100%')) : i ===
+						this.rows - 1 ? '70%' : this.rowsWidth,
+						rowHeight = this.$uv.test.array(this.rowsHeight) ? (this.rowsHeight[i] || '18px') : this.rowsHeight,
+						rowLeft = this.$uv.test.array(this.rowsLeft) ? (this.rowsLeft[i] || 0) : this.rowsLeft;
+					// 如果有title占位图，第一个段落占位图的外边距需要大一些，如果没有title占位图，第一个段落占位图则无需外边距
+					// 之所以需要这么做，是因为weex的无能，以提升性能为借口不支持css的一些伪类
+					item.marginTop = !this.title && i === 0 ? 0 : this.title && i === 0 ? '20px' : '12px'
+					// 如果设置的为百分比的宽度，转换为px值，因为nvue不支持百分比单位
+					if (/%$/.test(rowWidth)) {
+						// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
+						item.width = this.$uv.addUnit(this.width * parseInt(rowWidth) / 100)
+					} else {
+						item.width = this.$uv.addUnit(rowWidth)
+					}
+					item.height = this.$uv.addUnit(rowHeight)
+					item.marginLeft = this.$uv.addUnit(rowLeft)
+					rows.push(item)
+				}
+				// console.log(rows);
+				return rows
+			},
+			uTitleWidth() {
+				let tWidth = 0
+				if (/%$/.test(this.titleWidth)) {
+					// 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
+					tWidth = this.$uv.addUnit(this.width * parseInt(this.titleWidth) / 100)
+				} else {
+					tWidth = this.$uv.addUnit(this.titleWidth)
+				}
+				return this.$uv.addUnit(tWidth)
+			},
+			
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.getComponentWidth()
+				// #ifdef APP-NVUE
+				this.loading && this.animate && this.setNvueAnimation()
+				// #endif
+			},
+			async setNvueAnimation() {
+				// #ifdef APP-NVUE
+				// 为了让opacity:1的状态保持一定时间，这里做一个延时
+				await this.$uv.sleep(500)
+				const skeleton = this.$refs['uv-skeleton__wrapper'];
+				skeleton && this.loading && this.animate && animation.transition(skeleton, {
+					styles: {
+						opacity: 0.5
+					},
+					duration: 600,
+				}, () => {
+					// 这里无需判断是否loading和开启动画状态，因为最终的状态必须达到opacity: 1，否则可能
+					// 会停留在opacity: 0.5的状态中
+					animation.transition(skeleton, {
+						styles: {
+							opacity: 1
+						},
+						duration: 600,
+					}, () => {
+						// 只有在loading中时，才执行动画
+						this.loading && this.animate && this.setNvueAnimation()
+					})
+				})
+				// #endif
+			},
+			// 获取组件的宽度
+			async getComponentWidth() {
+				// 延时一定时间，以获取dom尺寸
+				await this.$uv.sleep(20)
+				// #ifndef APP-NVUE
+				this.$uvGetRect('.uv-skeleton__wrapper__content').then(size => {
+					this.width = size.width
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				const ref = this.$refs['uv-skeleton__wrapper__content']
+				ref && dom.getComponentRect(ref, (res) => {
+					this.width = res.size.width
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	@mixin background {
+		/* #ifdef APP-NVUE */
+		background-color: #F1F2F4;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
+		background-size: 400% 100%;
+		/* #endif */
+	}
+
+	.uv-skeleton {
+		flex: 1;
+		
+		&__wrapper {
+			@include flex(row);
+			
+			&__avatar {
+				@include background;
+				margin-right: 15px;
+			
+				&--circle {
+					border-radius: 100px;
+				}
+			
+				&--square {
+					border-radius: 4px;
+				}
+			}
+			
+			&__content {
+				flex: 1;
+			
+				&__rows,
+				&__title {
+					@include background;
+					border-radius: 3px;
+				}
+			}
+		}
+	}
+
+	/* #ifndef APP-NVUE */
+	.animate {
+		animation: skeleton 1.8s ease infinite
+	}
+
+	@keyframes skeleton {
+		0% {
+			background-position: 100% 50%
+		}
+
+		100% {
+			background-position: 0 50%
+		}
+	}
+
+	/* #endif */
+</style>

package/components/uv-skeletons/uv-skeletons.vue

@@ -0,0 +1,247 @@
+<template>
+	<view class="uv-skeleton">
+		<view v-if="loading">
+			<view v-for="(item, index) in elements" :key="index">
+				<!-- 横向并列布局 -->
+				<view class="uv-skeleton__group" :style="[style(item)]" v-if="item.type=='flex'">
+					<view v-for="(item2,index2) in item.children" :class="[item2.clas]" :style="[style(item2)]" :key="index2">
+						<view v-for="(item3,index3) in item2.elements" :key="index3">
+							<!-- 垂直高度站位 -->
+							<view :style="{height: $uv.addUnit(item3.height,'rpx')}" v-if="item3.type=='gap'"></view>
+							<view :class="[item3.clas, roundClass, animateClass]" :style="[style(item3)]" v-else ref="skeleton"></view>
+						</view>
+					</view>
+				</view>
+				<!-- 自定义骨架屏内容 -->
+				<!-- ps 自定义扩展说明： -->
+				<!-- 如果你需要自定义模板，可以参照这个custom的写法，增加一个skeleton配置类型，编写布局和样式就可以了 -->
+				<!-- 注意事项：为了保证骨架效果和动态效果的一致，扩展时，在你希望实际展示在页面中的元素上加上 :class="[style, animateClass]" 和 :style="[style(item)]" 和 ref="skeleton" -->
+				<view :class="[item.clas, animateClass]" :style="[style(item)]" ref="skeleton" v-else-if="item.type == 'custom'"></view>
+				<!-- 垂直高度站位 -->
+				<view :style="{height: $uv.addUnit(item.height,'rpx')}" v-else-if="item.type=='gap'"></view>
+				<!-- 其他基本单位 line avatar 等 -->
+				<view :class="[item.clas, roundClass, animateClass]" :style="[style(item)]" v-else ref="skeleton"></view>
+			</view>
+		</view>
+		<view v-else>
+			<slot />
+		</view>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	// #ifdef APP-NVUE
+	const animation = weex.requireModule('animation');
+	// #endif
+	export default {
+		name: 'uv-skeletons',
+		mixins: [mpMixin, mixin],
+		props: {
+			// 是否显示骨架
+			loading: {
+				type: Boolean,
+				default: true
+			},
+			// 骨架内容 具体说明参考文档：
+			skeleton: {
+				type: Array,
+				default: () => []
+			},
+			// 是否开启动画效果
+			animate: {
+				type: Boolean,
+				default: true
+			},
+			// 是否圆角骨架风格
+			round: {
+				type: Boolean,
+				default: false
+			},
+			...uni.$uv?.props?.skeleton
+		},
+		data() {
+			return {
+				elements: [],
+				opacity: 0.5,
+				duration: 600
+			}
+		},
+		computed: {
+			animateClass() {
+				return this.animate ? 'uv-skeleton--animation' : 'uv-skeleton--static';
+			},
+			roundClass() {
+				return this.round ? 'uv-skeleton--round' : 'uv-skeleton--radius';
+			},
+			style(item) {
+				return item => {
+					const style = {};
+					return this.$uv.deepMerge(style, this.$uv.addStyle(item.style));
+				}
+			}
+		},
+		created() {
+			this.init();
+			// #ifdef APP-NVUE
+			if (this.loading && this.animate) {
+				this.$uv.sleep(50).then(res => {
+					this.createAnimation(this.opacity);
+				})
+			}
+			// #endif
+		},
+		methods: {
+			/**
+			 * 初始化数据
+			 */
+			init() {
+				let elements = [];
+				if (!this.$uv.test.array(this.skeleton)) return this.$uv.error('skeleton参数必须为数组形式，参考文档示例：');
+				this.skeleton.forEach(el => {
+					const elClass = this.getElCounts(el);
+					elements = elements.concat(elClass);
+				})
+				this.elements = [...elements];
+			},
+			/**
+			 * 处理骨架屏参数内容
+			 * @param {Object} el 每项数据
+			 */
+			getElCounts(el) {
+				let elements = [];
+				let children = [];
+				if (this.$uv.test.number(el)) {
+					elements.push({
+						type: 'gap',
+						height: el
+					});
+					return elements;
+				} else {
+					const type = el.type ? el.type : 'line';
+					const num = el.num ? el.num : 1;
+					const style = el.style ? el.style : {};
+					const styleIsArray = this.$uv.test.array(style);
+					const gap = el.gap ? el.gap : '20rpx';
+					const child = el.children ? el.children : [];
+					for (let i = 0; i < child.length; i++) {
+						children[i] = {
+							clas: child[i].type.indexOf('avatar') > -1 || child[i].type.indexOf('custom') > -1 ? '' : 'uv-skeleton__group__sub',
+							elements: this.getElCounts(child[i])
+						};
+					}
+					for (let i = 0; i < num; i++) {
+						if (gap && i < num && i > 0) {
+							elements.push({
+								type: 'gap',
+								height: gap
+							});
+						}
+						elements.push({
+							clas: `uv-skeleton__${type}`,
+							type,
+							style: styleIsArray ? style[i] : style,
+							gap,
+							children
+						});
+					}
+					return elements;
+				}
+			},
+			/**
+			 * 创建动画
+			 */
+			createAnimation(opacity = 1) {
+				// loading结束之后或未开启动画不执行
+				if (!this.loading || !this.animate) return;
+				let count = 0;
+				const skeletons = this.$refs.skeleton;
+				skeletons.forEach(item => {
+					animation.transition(item, {
+						styles: {
+							opacity: opacity,
+						},
+						duration: this.duration
+					}, () => {
+						count++;
+						if (count >= skeletons.length) {
+							setTimeout(() => {
+								this.createAnimation(opacity < 1 ? 1 : this.opacity);
+							}, 200)
+						}
+					});
+				})
+			}
+		}
+	}
+</script>
+<style scoped lang="scss">
+	@import '../../libs/css/components.scss';
+	@mixin background {
+		/* #ifdef APP-NVUE */
+		background-color: #e6e6e6;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
+		background-size: 400% 100%;
+		/* #endif */
+	}
+	.uv-skeleton__line {
+		height: 32rpx;
+		// margin-bottom: 30rpx;
+	}
+	.uv-skeleton__line--sm {
+		height: 24rpx;
+		margin-bottom: 30rpx;
+	}
+	.uv-skeleton__line--lg {
+		height: 48rpx;
+		margin-bottom: 30rpx;
+	}
+	.uv-skeleton--static {
+		@include background;
+	}
+	.uv-skeleton--radius {
+		border-radius: 8rpx;
+	}
+	.uv-skeleton--round {
+		border-radius: 30rpx;
+	}
+	.uv-skeleton__avatar {
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50rpx;
+	}
+	.uv-skeleton__avatar--sm {
+		width: 50rpx;
+		height: 50rpx;
+		border-radius: 25rpx;
+	}
+	.uv-skeleton__avatar--lg {
+		width: 200rpx;
+		height: 200rpx;
+		border-radius: 100rpx;
+	}
+	.uv-skeleton__group {
+		@include flex;
+		&__sub {
+			flex: 1;
+		}
+	}
+	.uv-skeleton--animation {
+		@include background;
+		/* #ifndef APP-NVUE */
+		animation: skeleton 1.8s ease infinite
+			/* #endif */
+	}
+	/* #ifndef APP-NVUE */
+	@keyframes skeleton {
+		0% {
+			background-position: 100% 50%
+		}
+		100% {
+			background-position: 0 50%
+		}
+	}
+	/* #endif */
+</style>

package/components/uv-slider/props.js

@@ -0,0 +1,58 @@
+export default {
+	props: {
+		value: {
+			type: [Number, String],
+			default: 0
+		},
+		modelValue: {
+			type: [Number, String],
+			default: 0
+		},
+		// 最小可选值
+		min: {
+			type: [Number, String],
+			default: 0
+		},
+		// 最大可选值
+		max: {
+			type: [Number, String],
+			default: 100
+		},
+		// 步长，取值必须大于 0，并且可被(max - min)整除
+		step: {
+			type: [Number, String],
+			default: 1
+		},
+		// 滑块右侧已选择部分的背景色
+		activeColor: {
+			type: String,
+			default: '#2979ff'
+		},
+		// 滑块左侧未选择部分的背景色
+		backgroundColor: {
+			type: String,
+			default: '#c0c4cc'
+		},
+		// 滑块的大小，取值范围为 12 - 28
+		blockSize: {
+			type: [Number, String],
+			default: 18
+		},
+		// 滑块的颜色
+		blockColor: {
+			type: String,
+			default: '#ffffff'
+		},
+		// 禁用状态
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示当前的选择值
+		showValue: {
+			type: Boolean,
+			default: false
+		},
+		...uni.$uv?.props?.slider
+	}
+}

package/components/uv-slider/uv-slider.vue

@@ -0,0 +1,58 @@
+<template>
+	<view
+		class="uv-slider"
+		:style="[$uv.addStyle(customStyle)]"
+	>
+		<slider
+			:min="min"
+			:max="max"
+			:step="step"
+			:value="sliderValue"
+			:activeColor="activeColor"
+			:backgroundColor="backgroundColor"
+			:blockSize="$uv.getPx(blockSize)"
+			:blockColor="blockColor"
+			:showValue="showValue"
+			:disabled="disabled"
+			@changing="changingHandler"
+			@change="changeHandler"
+		></slider>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js'
+	export default {
+		name: 'uv-slider',
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			sliderValue(){
+				return this.value || this.modelValue;
+			}
+		},
+		methods: {
+			// 拖动过程中触发
+			changingHandler(e) {
+				const { value } = e.detail
+				// 更新v-model的值
+				this.$emit('input', value)
+				this.$emit('update:modelValue',value)
+				// 触发事件
+				this.$emit('changing', value)
+			},
+			// 滑动结束时触发
+			changeHandler(e) {
+				const {
+					value
+				} = e.detail
+				// 更新v-model的值
+				this.$emit('input', value)
+				this.$emit('update:modelValue',value)
+				// 触发事件
+				this.$emit('change', value)
+			}
+		}
+	}
+</script>
+

package/components/uv-status-bar/props.js

@@ -0,0 +1,8 @@
+export default {
+    props: {
+        bgColor: {
+            type: String,
+            default: 'transparent'
+        }
+    }
+}