@gmcb/uv-ui 0.2.26

package/components/uv-sticky/uv-sticky.vue

@@ -0,0 +1,223 @@
+<template>
+	<view
+		class="uv-sticky"
+		:id="elId"
+		:style="[style]"
+	>
+		<view
+			:style="[stickyContent]"
+			class="uv-sticky__content"
+		>
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';;
+	/**
+	 * sticky 吸顶
+	 * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+	 * @tutorial https://www.uvui.cn/components/sticky.html
+	 * @property {String ｜ Number}	offsetTop		吸顶时与顶部的距离，单位px（默认 0 ）
+	 * @property {String ｜ Number}	customNavHeight	自定义导航栏的高度 （h5 默认44  其他默认 0 ）
+	 * @property {Boolean}			disabled		是否开启吸顶功能 （默认 false ）
+	 * @property {String}			bgColor			组件背景颜色（默认 '#ffffff' ）
+	 * @property {String ｜ Number}	zIndex			吸顶时的z-index值
+	 * @property {String ｜ Number}	index			自定义标识，用于区分是哪一个组件
+	 * @property {Object}			customStyle		组件的样式，对象形式
+	 * @example <uv-sticky offsetTop="200"><view>塞下秋来风景异，衡阳雁去无留意</view></uv-sticky>
+	 */
+	export default {
+		name: 'uv-sticky',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				cssSticky: false, // 是否使用css的sticky实现
+				stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
+				elId: '',
+				left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
+				width: 'auto',
+				height: 'auto',
+				fixed: false, // js模式时，是否处于吸顶模式
+			}
+		},
+		computed: {
+			style() {
+				const style = {}
+				if(!this.disabled) {
+					if (this.cssSticky) {
+						style.position = 'sticky'
+						style.zIndex = this.uZindex
+						style.top = this.$uv.addUnit(this.stickyTop)
+					} else {
+						style.height = this.fixed ? this.height + 'px' : 'auto'
+					}
+				} else {
+					// 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
+					// #ifdef APP-NVUE
+					style.position = 'relative'
+					// #endif
+					// #ifndef APP-NVUE
+					style.position = 'static'
+					// #endif
+				}
+				style.backgroundColor = this.bgColor
+				return this.$uv.deepMerge(this.$uv.addStyle(this.customStyle), style)
+			},
+			// 吸顶内容的样式
+			stickyContent() {
+				const style = {}
+				if (!this.cssSticky) {
+					style.position = this.fixed ? 'fixed' : 'static'
+					style.top = this.stickyTop + 'px'
+					style.left = this.left + 'px'
+					style.width = this.width == 'auto' ? 'auto' : this.width + 'px'
+					style.zIndex = this.uZindex
+				}
+				return style
+			},
+			uZindex() {
+				return this.zIndex ? this.zIndex : 970
+			}
+		},
+		created() {
+			this.elId = this.$uv.guid();
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.getStickyTop()
+				// 判断使用的模式
+				this.checkSupportCssSticky()
+				// 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
+				if (!this.cssSticky) {
+					!this.disabled && this.initObserveContent()
+				}
+			},
+			initObserveContent() {
+				// 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
+				this.$uvGetRect('#' + this.elId).then((res) => {
+					this.height = res.height
+					this.left = res.left
+					this.width = res.width
+					this.$nextTick(() => {
+						this.observeContent()
+					})
+				})
+			},
+			observeContent() {
+				// 先断掉之前的观察
+				this.disconnectObserver('contentObserver')
+				const contentObserver = uni.createIntersectionObserver({
+					// 检测的区间范围
+					thresholds: [0.95, 0.98, 1]
+				})
+				// 到屏幕顶部的高度时触发
+				contentObserver.relativeToViewport({
+					top: -this.stickyTop
+				})
+				// 绑定观察的元素
+				contentObserver.observe(`#${this.elId}`, res => {
+					this.setFixed(res.boundingClientRect.top)
+				})
+				this.contentObserver = contentObserver
+			},
+			setFixed(top) {
+				// 判断是否出于吸顶条件范围
+				const fixed = top <= this.stickyTop
+				this.fixed = fixed
+			},
+			disconnectObserver(observerName) {
+				// 断掉观察，释放资源
+				const observer = this[observerName]
+				observer && observer.disconnect()
+			},
+			getStickyTop() {
+				this.stickyTop = this.$uv.getPx(this.offsetTop) + this.$uv.getPx(this.customNavHeight)
+			},
+			async checkSupportCssSticky() {
+				// #ifdef H5
+				// H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
+				if (this.checkCssStickyForH5()) {
+					this.cssSticky = true
+				}
+				// #endif
+
+				// 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
+				if (this.$uv.os() === 'android' && Number(this.$uv.sys().system) > 8) {
+					this.cssSticky = true
+				}
+
+				// APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
+				// #ifdef APP-VUE || MP-WEIXIN
+				this.cssSticky = await this.checkComputedStyle()
+				// #endif
+
+				// ios上，从ios6开始，都是支持css sticky的
+				if (this.$uv.os() === 'ios') {
+					this.cssSticky = true
+				}
+
+				// nvue，是支持css sticky的
+				// #ifdef APP-NVUE
+				this.cssSticky = true
+				// #endif
+			},
+			// 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
+			checkComputedStyle() {
+				// 方法内进行判断，避免在其他平台生成无用代码
+				// #ifdef APP-VUE || MP-WEIXIN
+				return new Promise(resolve => {
+					uni.createSelectorQuery().in(this).select('.uv-sticky').fields({
+						computedStyle: ["position"]
+					}).exec(e => {
+						resolve('sticky' === e[0].position)
+					})
+				})
+				// #endif
+			},
+			// H5通过创建元素的形式嗅探是否支持css sticky
+			// 判断浏览器是否支持sticky属性
+			checkCssStickyForH5() {
+				// 方法内进行判断，避免在其他平台生成无用代码
+				// #ifdef H5
+				const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
+					vendorListLength = vendorList.length,
+					stickyElement = document.createElement('div')
+				for (let i = 0; i < vendorListLength; i++) {
+					stickyElement.style.position = vendorList[i] + 'sticky'
+					if (stickyElement.style.position !== '') {
+						return true
+					}
+				}
+				return false;
+				// #endif
+			}
+		},
+		// #ifdef VUE2
+		beforeDestroy() {
+			this.disconnectObserver('contentObserver')
+		},
+		// #endif
+		// #ifdef VUE3
+		unmounted() {
+			this.disconnectObserver('contentObserver')
+		}
+		// #endif
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	.uv-sticky {
+		/* #ifdef APP-VUE || MP-WEIXIN */
+		// 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
+		position: sticky;
+		/* #endif */
+	}
+</style>

package/components/uv-subsection/props.js

@@ -0,0 +1,54 @@
+export default {
+	props: {
+		// tab的数据
+		list: {
+			type: Array,
+			default: () => []
+		},
+		// 当前活动的tab的index
+		current: {
+			type: [String, Number],
+			default: 0
+		},
+		// 激活的颜色
+		activeColor: {
+			type: String,
+			default: '#3c9cff'
+		},
+		// 未激活的颜色
+		inactiveColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
+		mode: {
+			type: String,
+			default: 'button'
+		},
+		// 字体大小
+		fontSize: {
+			type: [String, Number],
+			default: 12
+		},
+		// 激活tab的字体是否加粗
+		bold: {
+			type: Boolean,
+			default: true
+		},
+		// mode = button时，组件背景颜色
+		bgColor: {
+			type: String,
+			default: '#eeeeef'
+		},
+		// 从list元素对象中读取的键名
+		keyName: {
+			type: String,
+			default: 'name'
+		},
+		customItemStyle: {
+			type: [String, Object],
+			default: ''
+		},
+		...uni.$uv?.props?.subsection
+	}
+}

package/components/uv-subsection/uv-subsection.vue

@@ -0,0 +1,269 @@
+<template>
+	<view 
+		class="uv-subsection"
+		ref="uv-subsection"
+		:class="[`uv-subsection--${mode}`]"
+		:style="[$uv.addStyle(customStyle), wrapperStyle]">
+		<view 
+			class="uv-subsection__bar"
+			ref="uv-subsection__bar"
+			:style="[barStyle]"
+			:class="[
+        mode === 'button' && 'uv-subsection--button__bar',
+        current === 0 && mode === 'subsection' && 'uv-subsection__bar--first',
+        current > 0 && current < list.length - 1 && mode === 'subsection' && 'uv-subsection__bar--center',
+        current === list.length - 1 && mode === 'subsection' && 'uv-subsection__bar--last'
+      ]"
+		></view>
+		<view class="uv-subsection__item"
+			:class="[
+        `uv-subsection__item--${index}`,
+        index < list.length - 1 && 'uv-subsection__item--no-border-right',
+        index === 0 && 'uv-subsection__item--first',
+        index === list.length - 1 && 'uv-subsection__item--last'
+      ]"
+			:ref="`uv-subsection__item--${index}`"
+			:style="[itemStyle(index)]"
+			@tap="clickHandler(index)"
+			v-for="(item, index) in list"
+			:key="index"
+		>
+			<text 
+				class="uv-subsection__item__text"
+				:style="[textStyle(index)]">{{ getText(item) }}
+			</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin("dom");
+	const animation = uni.requireNativePlugin("animation");
+	// #endif
+	import props from "./props.js";
+	/**
+	 * Subsection 分段器
+	 * @description 该分段器一般用于用户从几个选项中选择某一个的场景
+	 * @tutorial https://www.uvui.cn/components/subsection.html
+	 * @property {Array}			list			tab的数据
+	 * @property {String ｜ Number}	current			当前活动的tab的index（默认 0 ）
+	 * @property {String}			activeColor		激活时的颜色（默认 '#3c9cff' ）
+	 * @property {String}			inactiveColor	未激活时的颜色（默认 '#303133' ）
+	 * @property {String}			mode			模式选择，mode=button为按钮形式，mode=subsection时为分段模式（默认 'button' ）
+	 * @property {String ｜ Number}	fontSize		字体大小，单位px（默认 12 ）
+	 * @property {Boolean}			bold			激活选项的字体是否加粗（默认 true ）
+	 * @property {String}			bgColor			组件背景颜色，mode为button时有效（默认 '#eeeeef' ）
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * @property {String}	        keyName	        从`list`元素对象中读取的键名（默认 'name' ）
+	 *
+	 * @event {Function} change		分段器选项发生改变时触发  回调 index：选项的index索引值，从0开始
+	 * @example <uv-subsection :list="list" :current="curNow" @change="sectionChange"></uv-subsection>
+	 */
+	export default {
+		name: "uv-subsection",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				// 组件尺寸
+				itemRect: {
+					width: 0,
+					height: 0,
+				}
+			}
+		},
+		watch: {
+			list: {
+				deep: true,
+				handler(){
+					this.init();
+				}
+			},
+			current: {
+				immediate: true,
+				handler(n) {
+					// #ifdef APP-NVUE
+					// 在安卓nvue上，如果通过translateX进行位移，到最后一个时，会导致右侧无法绘制圆角
+					// 故用animation模块进行位移
+					const ref = this.$refs?.["uv-subsection__bar"]?.ref;
+					// 不存在ref的时候(理解为第一次初始化时，需要渲染dom，进行一定延时再获取ref)，这里的100ms是经过测试得出的结果(某些安卓需要延时久一点)，勿随意修改
+					this.$uv.sleep(ref ? 0 : 150).then(() => {
+						animation.transition(this.$refs["uv-subsection__bar"].ref, {
+							styles: {
+								transform: `translateX(${ n * this.itemRect.width }px)`,
+								transformOrigin: "center center"
+							},
+							duration: 300,
+						});
+					});
+					// #endif
+				}
+			}
+		},
+		computed: {
+			wrapperStyle() {
+				const style = {};
+				// button模式时，设置背景色
+				if (this.mode === "button") {
+					style.backgroundColor = this.bgColor;
+				}
+				return style;
+			},
+			// 滑块的样式
+			barStyle() {
+				const style = {};
+				style.width = `${this.itemRect.width}px`;
+				style.height = `${this.itemRect.height}px`;
+				// 通过translateX移动滑块，其移动的距离为索引*item的宽度
+				// #ifndef APP-NVUE
+				style.transform = `translateX(${ this.current * this.itemRect.width }px)`;
+				// #endif
+				if (this.mode === "subsection") {
+					// 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
+					style.backgroundColor = this.activeColor;
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customItemStyle));
+			},
+			// 分段器item的样式
+			itemStyle(index) {
+				return (index) => {
+					const style = {};
+					if (this.mode === "subsection") {
+						// 设置border的样式
+						style.borderColor = this.activeColor;
+						style.borderWidth = "1px";
+						style.borderStyle = "solid";
+					}
+					return style;
+				};
+			},
+			// 分段器文字颜色
+			textStyle(index) {
+				return (index) => {
+					const style = {};
+					style.fontWeight = this.bold && this.current === index ? "bold" : "normal";
+					style.fontSize = this.$uv.addUnit(this.fontSize);
+					// subsection模式下，激活时默认为白色的文字
+					if (this.mode === "subsection") {
+						style.color = this.current === index ? "#fff" : this.inactiveColor;
+					} else {
+						// button模式下，激活时文字颜色默认为activeColor
+						style.color = this.current === index ? this.activeColor : this.inactiveColor;
+					}
+					return style;
+				};
+			},
+		},
+		mounted() {
+			this.init();
+		},
+		methods: {
+			init() {
+				this.$uv.sleep().then(() => this.getRect());
+			},
+			// 判断展示文本
+			getText(item) {
+				return typeof item === 'object' ? item[this.keyName] : item
+			},
+			// 获取组件的尺寸
+			getRect() {
+				// #ifndef APP-NVUE
+				this.$uvGetRect(".uv-subsection__item--0").then((size) => {
+					this.itemRect = size;
+				});
+				// #endif
+
+				// #ifdef APP-NVUE
+				const ref = this.$refs["uv-subsection__item--0"][0];
+				ref && dom.getComponentRect(ref, (res) => {
+					this.itemRect = res.size;
+				});
+				// #endif
+			},
+			clickHandler(index) {
+				this.$emit("change", index);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	.uv-subsection {
+		@include flex;
+		position: relative;
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		box-sizing: border-box;
+		/* #endif */
+		&--button {
+			height: 32px;
+			background-color: rgb(238, 238, 239);
+			padding: 3px;
+			border-radius: 3px;
+			align-items: stretch;
+			&__bar {
+				background-color: #ffffff;
+			}
+		}
+		&--subsection {
+			height: 30px;
+		}
+		&__bar {
+			position: absolute;
+			/* #ifndef APP-NVUE */
+			transition-property: transform, color;
+			transition-duration: 0.3s;
+			transition-timing-function: ease-in-out;
+			/* #endif */
+			&--first {
+				border-top-left-radius: 3px;
+				border-bottom-left-radius: 3px;
+				border-top-right-radius: 0px;
+				border-bottom-right-radius: 0px;
+			}
+			&--center {
+				border-top-left-radius: 0px;
+				border-bottom-left-radius: 0px;
+				border-top-right-radius: 0px;
+				border-bottom-right-radius: 0px;
+			}
+			&--last {
+				border-top-left-radius: 0px;
+				border-bottom-left-radius: 0px;
+				border-top-right-radius: 3px;
+				border-bottom-right-radius: 3px;
+			}
+		}
+		&__item {
+			@include flex;
+			flex: 1;
+			justify-content: center;
+			align-items: center;
+			// vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
+			position: relative;
+			&--no-border-right {
+				border-right-width: 0 !important;
+			}
+			&--first {
+				border-top-left-radius: 3px;
+				border-bottom-left-radius: 3px;
+			}
+			&--last {
+				border-top-right-radius: 3px;
+				border-bottom-right-radius: 3px;
+			}
+			&__text {
+				font-size: 12px;
+				line-height: 12px;
+				@include flex;
+				align-items: center;
+				transition-property: color;
+				transition-duration: 0.3s;
+			}
+		}
+	}
+</style>

package/components/uv-swipe-action/props.js

@@ -0,0 +1,10 @@
+export default {
+	props: {
+		// 是否自动关闭其他swipe按钮组
+		autoClose: {
+			type: Boolean,
+			default: true
+		},
+		...uni.$uv?.props?.swipeAction
+	}
+}

package/components/uv-swipe-action/uv-swipe-action.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="uv-swipe-action">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * SwipeAction 滑动单元格 
+	 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
+	 * @tutorial https://www.uvui.cn/components/swipeAction.html
+	 * @property {Boolean}	autoClose	是否自动关闭其他swipe按钮组
+	 * @event {Function(index)}	click	点击组件时触发
+	 * @example	<uv-swipe-action><uv-swipe-action-item :rightOptions="options1" ></uv-swipe-action-item></uv-swipe-action>
+	 */
+	export default {
+		name: 'uv-swipe-action',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {}
+		},
+		provide() {
+			return {
+				swipeAction: this
+			}
+		},
+		computed: {
+			// 这里computed的变量，都是子组件uv-swipe-action-item需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+			// 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(uv-swipe-action-item)
+			// 拉取父组件新的变化后的参数
+			parentData() {
+				return [this.autoClose]
+			}
+		},
+		watch: {
+			// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+			parentData() {
+				if (this.children.length) {
+					this.children.map(child => {
+						// 判断子组件(uv-swipe-action-item)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+						typeof(child.updateParentData) === 'function' && child.updateParentData()
+					})
+				}
+			},
+		},
+		created() {
+			this.children = []
+		},
+		methods: {
+			closeOther(child) {
+				if (this.autoClose) {
+					// 历遍所有的单元格，找出非当前操作中的单元格，进行关闭
+					this.children.map((item, index) => {
+						if (child !== item) {
+							item.closeHandler()
+						}
+					})
+				}
+			}
+		}
+	}
+</script>