uview-ui-wjf 1.0.0

package/components/u-picker/u-picker.vue

@@ -0,0 +1,286 @@
+<template>
+	<u-popup
+		:show="show"
+		@close="closeHandler"
+	>
+		<view class="u-picker">
+			<u-toolbar
+				v-if="showToolbar"
+				:cancelColor="cancelColor"
+				:confirmColor="confirmColor"
+				:cancelText="cancelText"
+				:confirmText="confirmText"
+				:title="title"
+				@cancel="cancel"
+				@confirm="confirm"
+			></u-toolbar>
+			<picker-view
+				class="u-picker__view"
+				:indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
+				:value="innerIndex"
+				:immediateChange="immediateChange"
+				:style="{
+					height: `${$u.addUnit(visibleItemCount * itemHeight)}`
+				}"
+				@change="changeHandler"
+			>
+				<picker-view-column
+					v-for="(item, index) in innerColumns"
+					:key="index"
+					class="u-picker__view__column"
+				>
+					<text
+						v-if="$u.test.array(item)"
+						class="u-picker__view__column__item u-line-1"
+						v-for="(item1, index1) in item"
+						:key="index1"
+						:style="{
+							height: $u.addUnit(itemHeight),
+							lineHeight: $u.addUnit(itemHeight),
+							fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
+							display: 'block'
+						}"
+					>{{ getItemText(item1) }}</text>
+				</picker-view-column>
+			</picker-view>
+			<view
+				v-if="loading"
+				class="u-picker--loading"
+			>
+				<u-loading-icon mode="circle"></u-loading-icon>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+/**
+ * u-picker
+ * @description 选择器
+ * @property {Boolean}			show				是否显示picker弹窗（默认 false ）
+ * @property {Boolean}			showToolbar			是否显示顶部的操作栏（默认 true ）
+ * @property {String}			title				顶部标题
+ * @property {Array}			columns				对象数组，设置每一列的数据
+ * @property {Boolean}			loading				是否显示加载中状态（默认 false ）
+ * @property {String | Number}	itemHeight			各列中，单个选项的高度（默认 44 ）
+ * @property {String}			cancelText			取消按钮的文字（默认 '取消' ）
+ * @property {String}			confirmText			确认按钮的文字（默认 '确定' ）
+ * @property {String}			cancelColor			取消按钮的颜色（默认 '#909193' ）
+ * @property {String}			confirmColor		确认按钮的颜色（默认 '#3c9cff' ）
+ * @property {String | Number}	visibleItemCount	每列中可见选项的数量（默认 5 ）
+ * @property {String}			keyName				选项对象中，需要展示的属性键名（默认 'text' ）
+ * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭选择器（默认 false ）
+ * @property {Array}			defaultIndex		各列的默认索引
+ * @property {Boolean}			immediateChange		是否在手指松开时立即触发change事件（默认 false ）
+ * @event {Function} close		关闭选择器时触发
+ * @event {Function} cancel		点击取消按钮触发
+ * @event {Function} change		当选择值变化时触发
+ * @event {Function} confirm	点击确定按钮，返回当前选择的值
+ */
+import props from './props.js';
+export default {
+	name: 'u-picker',
+	mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+	data() {
+		return {
+			// 上一次选择的列索引
+			lastIndex: [],
+			// 索引值 ，对应picker-view的value
+			innerIndex: [],
+			// 各列的值
+			innerColumns: [],
+			// 上一次的变化列索引
+			columnIndex: 0,
+		}
+	},
+	watch: {
+		// 监听默认索引的变化，重新设置对应的值
+		defaultIndex: {
+			immediate: true,
+			handler(n) {
+				this.setIndexs(n, true)
+			}
+		},
+		// 监听columns参数的变化
+		columns: {
+			immediate: true,
+			handler(n) {
+				this.setColumns(n)
+			}
+		},
+	},
+	methods: {
+		// 获取item需要显示的文字，判别为对象还是文本
+		getItemText(item) {
+			if (uni.$u.test.object(item)) {
+				return item[this.keyName]
+			} else {
+				return item
+			}
+		},
+		// 关闭选择器
+		closeHandler() {
+			if (this.closeOnClickOverlay) {
+				this.$emit('close')
+			}
+		},
+		// 点击工具栏的取消按钮
+		cancel() {
+			this.$emit('cancel')
+		},
+		// 点击工具栏的确定按钮
+		confirm() {
+			this.$emit('confirm', {
+				indexs: this.innerIndex,
+				value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
+				values: this.innerColumns
+			})
+		},
+		// 选择器某一列的数据发生变化时触发
+		changeHandler(e) {
+			const {
+				value
+			} = e.detail
+			let index = 0,
+				columnIndex = 0
+			// 通过对比前后两次的列索引，得出当前变化的是哪一列
+			for (let i = 0; i < value.length; i++) {
+				let item = value[i]
+				if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
+					// 设置columnIndex为当前变化列的索引
+					columnIndex = i
+					// index则为变化列中的变化项的索引
+					index = item
+					break // 终止循环，即使少一次循环，也是性能的提升
+				}
+			}
+			this.columnIndex = columnIndex
+			const values = this.innerColumns
+			// 将当前的各项变化索引，设置为"上一次"的索引变化值
+			this.setLastIndex(value)
+			this.setIndexs(value)
+
+			this.$emit('change', {
+				// #ifndef MP-WEIXIN || MP-LARK || MP-TOUTIAO
+				// 微信小程序不能传递this，会因为循环引用而报错
+				picker: this,
+				// #endif
+				value: this.innerColumns.map((item, index) => item[value[index]]),
+				index,
+				indexs: value,
+				// values为当前变化列的数组内容
+				values,
+				columnIndex
+			})
+		},
+		// 设置index索引，此方法可被外部调用设置
+		setIndexs(index, setLastIndex) {
+			this.innerIndex = uni.$u.deepClone(index)
+			if (setLastIndex) {
+				this.setLastIndex(index)
+			}
+		},
+		// 记录上一次的各列索引位置
+		setLastIndex(index) {
+			// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
+			// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
+			this.lastIndex = uni.$u.deepClone(index)
+		},
+		// 设置对应列选项的所有值
+		setColumnValues(columnIndex, values) {
+			// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
+			this.innerColumns.splice(columnIndex, 1, values)
+			// 替换完成之后将修改列之后的已选值置空
+			this.setLastIndex(this.innerIndex.slice(0,columnIndex))
+			// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
+			let tmpIndex = uni.$u.deepClone(this.innerIndex)
+			for (let i = 0; i < this.innerColumns.length; i++) {
+				if (i > this.columnIndex) {
+					tmpIndex[i] = 0
+				}
+			}
+			// 一次性赋值，不能单个修改，否则无效
+			this.setIndexs(tmpIndex)
+		},
+		// 获取对应列的所有选项
+		getColumnValues(columnIndex) {
+			// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
+			// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
+			(async () => {
+				await uni.$u.sleep()
+			})()
+			return this.innerColumns[columnIndex]
+		},
+		// 设置整体各列的columns的值
+		setColumns(columns) {
+			this.innerColumns = uni.$u.deepClone(columns)
+			// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
+			if (this.innerIndex.length === 0) {
+				this.innerIndex = new Array(columns.length).fill(0)
+			}
+		},
+		// 获取各列选中值对应的索引
+		getIndexs() {
+			return this.innerIndex
+		},
+		// 获取各列选中的值
+		getValues() {
+			// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
+			// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
+			(async () => {
+				await uni.$u.sleep()
+			})()
+			return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-picker {
+		position: relative;
+
+		&__view {
+
+			&__column {
+				@include flex;
+				flex: 1;
+				justify-content: center;
+
+				&__item {
+					@include flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 16px;
+					text-align: center;
+					/* #ifndef APP-NVUE */
+					display: block;
+					/* #endif */
+					color: $u-main-color;
+
+					&--disabled {
+						/* #ifndef APP-NVUE */
+						cursor: not-allowed;
+						/* #endif */
+						opacity: 0.35;
+					}
+				}
+			}
+		}
+
+		&--loading {
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			bottom: 0;
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			background-color: rgba(255, 255, 255, 0.87);
+			z-index: 1000;
+		}
+	}
+</style>

package/components/u-picker-column/props.js

@@ -0,0 +1,5 @@
+export default {
+    props: {
+
+    }
+}

package/components/u-picker-column/u-picker-column.vue

@@ -0,0 +1,27 @@
+<template>
+	<picker-view-column>
+		<view class="u-picker-column">
+
+		</view>
+	</picker-view-column>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * PickerColumn 
+	 * @description 
+	 * @tutorial url
+	 * @property {String}
+	 * @event {Function}
+	 * @example
+	 */
+	export default {
+		name: 'u-picker-column',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+</style>

package/components/u-popup/props.js

@@ -0,0 +1,79 @@
+export default {
+    props: {
+        // 是否展示弹窗
+        show: {
+            type: Boolean,
+            default: uni.$u.props.popup.show
+        },
+        // 是否显示遮罩
+        overlay: {
+            type: Boolean,
+            default: uni.$u.props.popup.overlay
+        },
+        // 弹出的方向，可选值为 top bottom right left center
+        mode: {
+            type: String,
+            default: uni.$u.props.popup.mode
+        },
+        // 动画时长，单位ms
+        duration: {
+            type: [String, Number],
+            default: uni.$u.props.popup.duration
+        },
+        // 是否显示关闭图标
+        closeable: {
+            type: Boolean,
+            default: uni.$u.props.popup.closeable
+        },
+        // 自定义遮罩的样式
+        overlayStyle: {
+            type: [Object, String],
+            default: uni.$u.props.popup.overlayStyle
+        },
+        // 点击遮罩是否关闭弹窗
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: uni.$u.props.popup.closeOnClickOverlay
+        },
+        // 层级
+        zIndex: {
+            type: [String, Number],
+            default: uni.$u.props.popup.zIndex
+        },
+        // 是否为iPhoneX留出底部安全距离
+        safeAreaInsetBottom: {
+            type: Boolean,
+            default: uni.$u.props.popup.safeAreaInsetBottom
+        },
+        // 是否留出顶部安全距离（状态栏高度）
+        safeAreaInsetTop: {
+            type: Boolean,
+            default: uni.$u.props.popup.safeAreaInsetTop
+        },
+        // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
+        closeIconPos: {
+            type: String,
+            default: uni.$u.props.popup.closeIconPos
+        },
+        // 是否显示圆角
+        round: {
+            type: [Boolean, String, Number],
+            default: uni.$u.props.popup.round
+        },
+        // mode=center，也即中部弹出时，是否使用缩放模式
+        zoom: {
+            type: Boolean,
+            default: uni.$u.props.popup.zoom
+        },
+        // 弹窗背景色，设置为transparent可去除白色背景
+        bgColor: {
+            type: String,
+            default: uni.$u.props.popup.bgColor
+        },
+        // 遮罩的透明度，0-1之间
+        overlayOpacity: {
+            type: [Number, String],
+            default: uni.$u.props.popup.overlayOpacity
+        }
+    }
+}

package/components/u-popup/u-popup.vue

@@ -0,0 +1,304 @@
+<template>
+	<view class="u-popup">
+		<u-overlay
+			:show="show"
+			@click="overlayClick"
+			v-if="overlay"
+			:duration="overlayDuration"
+			:customStyle="overlayStyle"
+			:opacity="overlayOpacity"
+		></u-overlay>
+		<u-transition
+			:show="show"
+			:customStyle="transitionStyle"
+			:mode="position"
+			:duration="duration"
+			@afterEnter="afterEnter"
+			@click="clickHandler"
+		>
+			<view
+				class="u-popup__content"
+				:style="[contentStyle]"
+				@tap.stop="noop"
+			>
+				<u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
+				<slot></slot>
+				<view
+					v-if="closeable"
+					@tap.stop="close"
+					class="u-popup__content__close"
+					:class="['u-popup__content__close--' + closeIconPos]"
+					hover-class="u-popup__content__close--hover"
+					hover-stay-time="150"
+				>
+					<u-icon
+						name="close"
+						color="#909399"
+						size="18"
+						bold
+					></u-icon>
+				</view>
+				<u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
+			</view>
+		</u-transition>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+
+	/**
+	 * popup 弹窗
+	 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
+	 * @tutorial https://www.uviewui.com/components/popup.html
+	 * @property {Boolean}			show				是否展示弹窗 (默认 false )
+	 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
+	 * @property {String}			mode				弹出方向（默认 'bottom' ）
+	 * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
+	 * @property {String | Number}	overlayDuration			遮罩层动画时长，单位ms （默认 350 ）
+	 * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
+	 * @property {Object | String}	overlayStyle		自定义遮罩的样式
+	 * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）
+	 * @property {Boolean}			closeOnClickOverlay	点击遮罩是否关闭弹窗 （默认  true ）
+	 * @property {String | Number}	zIndex				层级 （默认 10075 ）
+	 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
+	 * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
+	 * @property {String}			closeIconPos		自定义关闭图标位置（默认 'top-right' ）
+	 * @property {String | Number}	round				圆角值（默认 0）
+	 * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
+	 * @property {Object}			customStyle			组件的样式，对象形式
+	 * @event {Function} open 弹出层打开
+	 * @event {Function} close 弹出层收起
+	 * @example <u-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
+	 */
+	export default {
+		name: 'u-popup',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				overlayDuration: Number(this.duration) + 50
+			}
+		},
+		watch: {
+			show(newValue, oldValue) {
+				if (newValue === true) {
+					// #ifdef MP-WEIXIN
+					const children = this.$children
+					this.retryComputedComponentRect(children)
+					// #endif
+				}
+			}
+		},
+		computed: {
+			transitionStyle() {
+				const style = {
+					zIndex: this.zIndex,
+					position: 'fixed',
+					display: 'flex',
+				}
+				style[this.mode] = 0
+				if (this.mode === 'left') {
+					return uni.$u.deepMerge(style, {
+						bottom: 0,
+						top: 0,
+					})
+				} else if (this.mode === 'right') {
+					return uni.$u.deepMerge(style, {
+						bottom: 0,
+						top: 0,
+					})
+				} else if (this.mode === 'top') {
+					return uni.$u.deepMerge(style, {
+						left: 0,
+						right: 0
+					})
+				} else if (this.mode === 'bottom') {
+					return uni.$u.deepMerge(style, {
+						left: 0,
+						right: 0,
+					})
+				} else if (this.mode === 'center') {
+					return uni.$u.deepMerge(style, {
+						alignItems: 'center',
+						'justify-content': 'center',
+						top: 0,
+						left: 0,
+						right: 0,
+						bottom: 0
+					})
+				}
+			},
+			contentStyle() {
+				const style = {}
+				// 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
+				// 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
+				const {
+					safeAreaInsets
+				} = uni.$u.sys()
+				if (this.mode !== 'center') {
+					style.flex = 1
+				}
+				// 背景色，一般用于设置为transparent，去除默认的白色背景
+				if (this.bgColor) {
+					style.backgroundColor = this.bgColor
+				}
+				if(this.round) {
+					const value = uni.$u.addUnit(this.round)
+					if(this.mode === 'top') {
+						style.borderBottomLeftRadius = value
+						style.borderBottomRightRadius = value
+					} else if(this.mode === 'bottom') {
+						style.borderTopLeftRadius = value
+						style.borderTopRightRadius = value
+					} else if(this.mode === 'center') {
+						style.borderRadius = value
+					} 
+				}
+				return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+			},
+			position() {
+				if (this.mode === 'center') {
+					return this.zoom ? 'fade-zoom' : 'fade'
+				}
+				if (this.mode === 'left') {
+					return 'slide-left'
+				}
+				if (this.mode === 'right') {
+					return 'slide-right'
+				}
+				if (this.mode === 'bottom') {
+					return 'slide-up'
+				}
+				if (this.mode === 'top') {
+					return 'slide-down'
+				}
+			},
+		},
+		methods: {
+			// 点击遮罩
+			overlayClick() {
+				if (this.closeOnClickOverlay) {
+					this.$emit('close')
+				}
+			},
+			close(e) {
+				this.$emit('close')
+			},
+			afterEnter() {
+				this.$emit('open')
+			},
+			clickHandler() {
+				// 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
+				if(this.mode === 'center') {
+					this.overlayClick()
+				}
+				this.$emit('click')
+			},
+			// #ifdef MP-WEIXIN
+			retryComputedComponentRect(children) {
+				// 组件内部需要计算节点的组件
+				const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list',
+					'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list',
+					'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar',
+					'u-tabs', 'u-tooltip'
+				]
+				// 历遍所有的子组件节点
+				for (let i = 0; i < children.length; i++) {
+					const child = children[i]
+					// 拿到子组件的子组件
+					const grandChild = child.$children
+					// 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
+					if (names.includes(child.$options.name) && typeof child?.init === 'function') {
+						// 需要进行一定的延时，因为初始化页面需要时间
+						uni.$u.sleep(50).then(() => {
+							child.init()
+						})
+					}
+					// 如果子组件还有孙组件，进行递归历遍
+					if (grandChild.length) {
+						this.retryComputedComponentRect(grandChild)
+					}
+				}
+			}
+			// #endif
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$u-popup-flex:1 !default;
+	$u-popup-content-background-color: #fff !default;
+
+	.u-popup {
+		flex: $u-popup-flex;
+
+		&__content {
+			background-color: $u-popup-content-background-color;
+			position: relative;
+
+			&--round-top {
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+				border-bottom-left-radius: 10px;
+				border-bottom-right-radius: 10px;
+			}
+
+			&--round-left {
+				border-top-left-radius: 0;
+				border-top-right-radius: 10px;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 10px;
+			}
+
+			&--round-right {
+				border-top-left-radius: 10px;
+				border-top-right-radius: 0;
+				border-bottom-left-radius: 10px;
+				border-bottom-right-radius: 0;
+			}
+
+			&--round-bottom {
+				border-top-left-radius: 10px;
+				border-top-right-radius: 10px;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			&--round-center {
+				border-top-left-radius: 10px;
+				border-top-right-radius: 10px;
+				border-bottom-left-radius: 10px;
+				border-bottom-right-radius: 10px;
+			}
+
+			&__close {
+				position: absolute;
+
+				&--hover {
+					opacity: 0.4;
+				}
+			}
+
+			&__close--top-left {
+				top: 15px;
+				left: 15px;
+			}
+
+			&__close--top-right {
+				top: 15px;
+				right: 15px;
+			}
+
+			&__close--bottom-left {
+				bottom: 15px;
+				left: 15px;
+			}
+
+			&__close--bottom-right {
+				right: 15px;
+				bottom: 15px;
+			}
+		}
+	}
+</style>