uview-ultra-plus 1.0.0

package/uview-ultra/components/up-picker/props.uts

@@ -0,0 +1,114 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-09-12 15:25:27
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 15:25:27
+ * @FilePath     : /uview-ultra/libs/config/props/picker
+ */
+import { defineMixin } from '../../libs/vue'
+import defProps from './picker'
+let crtProp = defProps['picker'] as UTSJSONObject
+
+export const propsPicker = defineMixin({
+    props: {
+        modelValue: {
+            type: Array,
+            default: [] as Array<any>
+        },
+        hasInput: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: '请选择'
+        },
+        // 是否展示picker弹窗
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+    	// 弹出的方向，可选值为 top bottom right left center
+        popupMode: {
+            type: String,
+            default: crtProp['popupMode']
+        },
+        // 是否展示顶部的操作栏
+        showToolbar: {
+            type: Boolean,
+            default: crtProp['showToolbar']
+        },
+        // 顶部标题
+        title: {
+            type: String,
+            default: crtProp['title']
+        },
+        // 对象数组，设置每一列的数据
+        columns: {
+            type: Array,
+            default: crtProp['columns']
+        },
+        // 是否显示加载中状态
+        loading: {
+            type: Boolean,
+            default: crtProp['loading']
+        },
+        // 各列中，单个选项的高度
+        itemHeight: {
+            type: [String, Number],
+            default: crtProp['itemHeight']
+        },
+        // 取消按钮的文字
+        cancelText: {
+            type: String,
+            default: crtProp['cancelText']
+        },
+        // 确认按钮的文字
+        confirmText: {
+            type: String,
+            default: crtProp['confirmText']
+        },
+        // 取消按钮的颜色
+        cancelColor: {
+            type: String,
+            default: crtProp['cancelColor']
+        },
+        // 确认按钮的颜色
+        confirmColor: {
+            type: String,
+            default: crtProp['confirmColor']
+        },
+        // 每列中可见选项的数量
+        visibleItemCount: {
+            type: [String, Number],
+            default: crtProp['visibleItemCount']
+        },
+        // 选项对象中，需要展示的属性键名
+        keyName: {
+            type: String,
+            default: crtProp['keyName']
+        },
+        // 是否允许点击遮罩关闭选择器
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: crtProp['closeOnClickOverlay']
+        },
+        // 各列的默认索引
+        defaultIndex: {
+            type: Array,
+            default: crtProp['defaultIndex']
+        },
+    	// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
+    	immediateChange: {
+    		type: Boolean,
+    		default: crtProp['immediateChange']
+    	},
+        // 工具栏右侧插槽是否开启
+        toolbarRightSlot: {
+    		type: Boolean,
+    		default: false
+    	},
+    }
+})

package/uview-ultra/components/up-picker/up-picker.uvue

@@ -0,0 +1,391 @@
+<template>
+    <view class="up-picker-warrper">
+        <view v-if="hasInput"
+			class="up-picker-input cursor-pointer"
+			@click="showByClickInput = !showByClickInput">
+            <slot>
+                <view>
+					{{ inputLabel.length > 0 ? inputLabel.join('/') : placeholder }}
+				</view>
+            </slot>
+        </view>
+		<up-popup
+			:show="show || (hasInput && showByClickInput)"
+			:mode="popupMode"
+			@close="closeHandler"
+		>
+			<view class="up-picker">
+				<up-toolbar
+					v-if="showToolbar"
+					:cancelColor="cancelColor"
+					:confirmColor="confirmColor"
+					:cancelText="cancelText"
+					:confirmText="confirmText"
+					:title="title"
+					:rightSlot="toolbarRightSlot ? true : false"
+					@cancel="cancel"
+					@confirm="confirm"
+				>
+					<template #right>
+						<slot name="toolbar-right"></slot>
+					</template>
+				</up-toolbar>
+				<slot name="toolbar-bottom"></slot>
+				<picker-view
+					class="up-picker__view"
+					:indicatorStyle="`height: ${addUnit(itemHeight)}`"
+					:value="innerIndex"
+					:immediateChange="immediateChange"
+					:style="{
+						height: pickerViewHeight
+					}"
+					@change="changeHandler"
+				>
+					<picker-view-column
+						v-for="(item, index) in innerColumns"
+						:key="index"
+						class="up-picker__view__column"
+					>
+						<view
+							v-if="testArray(item)"
+							class="up-picker__view__column__item up-line-1"
+							v-for="(item1 , index1) in item"
+							:key="index1"
+							:style="{
+								height: addUnit(itemHeight)
+							}"
+						>
+							<text class="up-picker__view__column__item__text"
+								:style="{
+									lineHeight: addUnit(itemHeight),
+									fontWeight: (innerIndex.length -1  >= index && index1 === innerIndex[index]) ? 'bold' : 'normal',
+								}">
+								{{ getItemText(item1) }}
+							</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<view
+					v-if="loading"
+					class="up-picker--loading"
+				>
+					<up-loading-icon mode="circle"></up-loading-icon>
+				</view>
+			</view>
+		</up-popup>
+    </view>
+</template>
+
+<script>
+/**
+ * up-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事件（默认 true ）
+ * @event {Function} close		关闭选择器时触发
+ * @event {Function} cancel		点击取消按钮触发
+ * @event {Function} change		当选择值变化时触发
+ * @event {Function} confirm	点击确定按钮，返回当前选择的值
+ */
+import { propsPicker } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, deepClone, sleep } from '../../libs/function/index';
+import { array as testArray, object as testObject } from '../../libs/function/test';
+export default {
+	name: 'up-picker',
+	mixins: [mpMixin, mixin, propsPicker],
+	data() {
+		return {
+			// 上一次选择的列索引
+			lastIndex: [] as number[],
+			// 索引值 ，对应picker-view的value
+			innerIndex: [] as number[],
+			// 各列的值
+			innerColumns: [] as Array<Array<any>>,
+			// 上一次的变化列索引
+			columnIndex: 0,
+            showByClickInput: false,
+		}
+	},
+	watch: {
+		// 监听默认索引的变化，重新设置对应的值
+		defaultIndex: {
+			immediate: true,
+			deep:true,
+			handler(n: number[]) {
+				this.setIndexs(n, true)
+			}
+		},
+		// 监听columns参数的变化
+		columns: {
+			immediate: true,
+			deep:true,
+			handler(n: Array<Array<any>>) {
+				this.setColumns(n)
+			}
+		},
+	},
+	emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue'],
+    computed: {
+		pickerViewHeight(): string {
+			// @ts-ignore
+			let tmp = parseInt(this.visibleItemCount.toString())
+			// @ts-ignore
+				* parseInt(this.itemHeight.toString())
+			return addUnit(tmp)
+		},
+        inputLabel(): string[] {
+			let items: Array<any> = []
+			this.innerColumns.map((item, index) => {
+				items.push(item[this.innerIndex[index]])
+			})
+            let res: string[] = []
+            items.forEach(element => {
+				if (typeof element == 'object') {
+					// @ts-ignore
+					// if (element != null) {
+						// @ts-ignore
+						res.push((element as UTSJSONObject)[this.keyName].toString())
+					// }
+				}
+            });
+            return res
+        },
+        inputValue(): Array<any> {
+			// items里面可能是字符串也可能是对象
+            let items: Array<any> = []
+			this.innerColumns.map((item, index) => {
+				items.push(item[this.innerIndex[index]])
+			})
+            let res: any[] = []
+            items.forEach(element => {
+				if (typeof element == 'string') {
+					res.push(element.toString())
+				} else {
+					let ele1 = (element as UTSJSONObject)['id']
+					if (ele1 != null) {
+						res.push(ele1)
+					}
+				}
+            });
+            return res
+        }
+    },
+	methods: {
+		addUnit(str: any): string {
+			return addUnit(str);
+		},
+		testArray(obj: any): boolean {
+			return testArray(obj);
+		},
+		// 获取item需要显示的文字，判别为对象还是文本
+		getItemText(item: any): any|null {
+			if (typeof item == 'object') {
+				let ele1 = (item as UTSJSONObject)[this.keyName]
+				if (ele1 != null) {
+					return ele1.toString()
+				}
+				return ""
+			} else {
+				return item
+			}
+		},
+		// 关闭选择器
+		closeHandler(): void {
+			if (this.closeOnClickOverlay) {
+                if (this.hasInput) {
+                    this.showByClickInput = false
+                }
+				this.$emit('close')
+			}
+		},
+		// 点击工具栏的取消按钮
+		cancel(): void {
+            if (this.hasInput) {
+                this.showByClickInput = false
+            }
+			this.$emit('cancel')
+		},
+		// 点击工具栏的确定按钮
+		confirm(): void {
+            this.$emit('update:modelValue', this.inputValue)
+            if (this.hasInput) {
+                this.showByClickInput = false
+            }
+			this.$emit('confirm', {
+				indexs: this.innerIndex,
+				value: this.innerColumns.map((item, index) => {
+					// return item[this.innerIndex[index]]
+				}),
+				values: this.innerColumns
+			})
+		},
+		// 选择器某一列的数据发生变化时触发
+		changeHandler(e: UniPickerViewChangeEvent): void {
+			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] != null ? 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, false)
+
+            this.$emit('update:modelValue', this.inputValue)
+
+			// 获取原始值
+			let valueOrigin: Array<any> = [];
+			this.innerColumns.map((item, index) => {
+				valueOrigin.push(item[value[index]])
+			})
+			this.$emit('change', {
+				value: valueOrigin,
+				index,
+				indexs: value,
+				// values为当前变化列的数组内容
+				values,
+				columnIndex
+			})
+		},
+		// 设置index索引，此方法可被外部调用设置
+		setIndexs(index: number[] | null, setLastIndex: boolean): void {
+			this.innerIndex = index != null ? [...index]: []
+			if (setLastIndex) {
+				this.setLastIndex(this.innerIndex)
+			}
+		},
+		// 记录上一次的各列索引位置
+		setLastIndex(index: number[]): void {
+			// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
+			// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
+			this.lastIndex = [...index]
+		},
+		// 设置对应列选项的所有值
+		setColumnValues(columnIndex: number, values: Array<any>): void {
+			// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
+			this.innerColumns.splice(columnIndex, 1, values)
+            // 替换完成之后将修改列之后的已选值置空
+			this.setLastIndex(this.innerIndex.slice(0, columnIndex))
+			// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
+			let tmpIndex = [...this.innerIndex]
+			for (let i = 0; i < this.innerColumns.length; i++) {
+				if (i > this.columnIndex) {
+					tmpIndex[i] = 0
+				}
+			}
+			// 一次性赋值，不能单个修改，否则无效
+			this.setIndexs(tmpIndex, false)
+		},
+		// 获取对应列的所有选项
+		getColumnValues(columnIndex: number): Array<any> {
+			// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
+			// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
+			// (async () => {
+			// 	await sleep()
+			// })()
+			return this.innerColumns[columnIndex]
+		},
+		// 设置整体各列的columns的值
+		setColumns(columns: Array<Array<any>>): void {
+			// console.log(columns)
+			// this.innerColumns = deepClone(columns)
+			this.innerColumns = (columns)
+			// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
+			if (this.innerIndex.length == 0) {
+				this.innerIndex = new Array(columns.length).fill(0)
+			}
+		},
+		// 获取各列选中值对应的索引
+		getIndexs(): number[] {
+			return this.innerIndex
+		},
+		// 获取各列选中的值
+		getValues(): Array<any> {
+			// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
+			// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
+			// (async () => {
+			// 	await sleep()
+			// })()
+			let res: Array<any> = []
+			return this.innerColumns.map((item: Array<any>, index) => {
+				res.push(item[this.innerIndex[index]])
+			})
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-picker {
+		position: relative;
+
+		&__view {
+
+			&__column {
+				@include flex;
+				flex: 1;
+				justify-content: center;
+
+				&__item {
+					@include flex;
+					justify-content: center;
+					align-items: center;
+					&__text {
+						font-size: 16px;
+						text-align: center;
+						color: $up-main-color;
+					}
+
+					&--disabled {
+						/* #ifdef H5 */
+						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>