From f8959da7ef2ad55af9e54f4440dd6f10d4f2b320 Mon Sep 17 00:00:00 2001
From: jry <ijry@qq.com>
Date: Thu, 12 Sep 2024 21:23:00 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E6=96=B0=E5=A2=9Eup-picker/up-toolbar?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6uni-app-x=E7=89=88=E6=9C=AC=E5=8F=8A=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/up-icon/up-icon.uvue           |   4 +-
 .../up-loading-icon/up-loading-icon.uvue      |   2 +-
 .../components/up-picker-column/props.uts     |   7 +
 .../up-picker-column/up-picker-column.uvue    |  28 ++
 .../components/up-picker/picker.uts           |  30 ++
 .../uview-plus/components/up-picker/props.uts | 114 ++++++
 .../components/up-picker/up-picker.uvue       | 387 ++++++++++++++++++
 .../components/up-picker/up-picker.vue        |   4 +-
 .../components/up-popup/up-popup.uvue         |   4 +-
 .../components/up-toolbar/props.uts           |  43 ++
 .../components/up-toolbar/toolbar.uts         |  20 +
 .../components/up-toolbar/up-toolbar.uvue     | 125 ++++++
 .../up-transition/up-transition.uvue          |  14 +-
 .../uview-plus/libs/css/common.scss           |   9 +-
 src/uni_modules/uview-plus/libs/css/flex.scss |   4 +-
 src/uni_modules/uview-plus/libs/css/vue.scss  |   2 +
 .../uview-plus/libs/function/index.uts        |  30 +-
 .../uview-plus/libs/mixin/mixin.uts           |   6 +-
 uni-app-x/pages.json                          |  16 +-
 .../picker/{picker.nvue => picker.uvue}       |  71 ++--
 20 files changed, 837 insertions(+), 83 deletions(-)
 create mode 100644 src/uni_modules/uview-plus/components/up-picker-column/props.uts
 create mode 100644 src/uni_modules/uview-plus/components/up-picker-column/up-picker-column.uvue
 create mode 100644 src/uni_modules/uview-plus/components/up-picker/picker.uts
 create mode 100644 src/uni_modules/uview-plus/components/up-picker/props.uts
 create mode 100644 src/uni_modules/uview-plus/components/up-picker/up-picker.uvue
 create mode 100644 src/uni_modules/uview-plus/components/up-toolbar/props.uts
 create mode 100644 src/uni_modules/uview-plus/components/up-toolbar/toolbar.uts
 create mode 100644 src/uni_modules/uview-plus/components/up-toolbar/up-toolbar.uvue
 rename uni-app-x/pages/componentsC/picker/{picker.nvue => picker.uvue} (71%)

diff --git a/src/uni_modules/uview-plus/components/up-icon/up-icon.uvue b/src/uni_modules/uview-plus/components/up-icon/up-icon.uvue
index 96b9e774a..d7a68d7dd 100644
--- a/src/uni_modules/uview-plus/components/up-icon/up-icon.uvue
+++ b/src/uni_modules/uview-plus/components/up-icon/up-icon.uvue
@@ -120,8 +120,8 @@
 			imgStyle(): any {
 				let style = {}
 				// 如果设置width和height属性，则优先使用，否则使用size属性
-				style['width'] = this.width != '' ? addUnit(this.width) : addUnit(this.size.toString())
-				style['height'] = this.height != '' ? addUnit(this.height) : addUnit(this.size.toString())
+				style['width'] = this.width != '' ? addUnit(this.width) : addUnit(this.size!!.toString())
+				style['height'] = this.height != '' ? addUnit(this.height) : addUnit(this.size!!.toString())
 				return style
 			},
 			// 通过图标名，查找对应的图标
diff --git a/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.uvue b/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.uvue
index ef115f355..7ba3d62c2 100644
--- a/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.uvue
+++ b/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.uvue
@@ -140,7 +140,7 @@
 				this.array12.forEach((ele, index) => {
 					const angle = index * (360 / 12); // 计算角度  
 					const angleRad = angle * (Math.PI / 180); // 转换为弧度  
-					const banjing = this.calculateSquareRadius(parseInt(getPx(parseInt(this.size.toString()) * 2)));  // 半径
+					const banjing = this.calculateSquareRadius(parseInt(getPx(parseInt(this.size!!.toString()) * 2)));  // 半径
 					const xOffset = banjing * Math.cos(angleRad);
 					const yOffset = banjing * Math.sin(angleRad);  
 					// 假设.loading-container的position是relative，并且宽度和高度都是100% 
diff --git a/src/uni_modules/uview-plus/components/up-picker-column/props.uts b/src/uni_modules/uview-plus/components/up-picker-column/props.uts
new file mode 100644
index 000000000..6997c8961
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-picker-column/props.uts
@@ -0,0 +1,7 @@
+import { defineMixin } from '../../libs/vue'
+
+export const propsPickerColumn = defineMixin({
+    props: {
+
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-picker-column/up-picker-column.uvue b/src/uni_modules/uview-plus/components/up-picker-column/up-picker-column.uvue
new file mode 100644
index 000000000..5d6c61fdb
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-picker-column/up-picker-column.uvue
@@ -0,0 +1,28 @@
+<template>
+	<picker-view-column>
+		<view class="up-picker-column">
+		</view>
+	</picker-view-column>
+</template>
+
+<script>
+	import { propsPickerColumn } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	/**
+	 * PickerColumn 
+	 * @description 
+	 * @tutorial url
+	 * @property {String}
+	 * @event {Function}
+	 * @example
+	 */
+	export default {
+		name: 'up-picker-column',
+		mixins: [mpMixin, mixin, propsPickerColumn],
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-picker/picker.uts b/src/uni_modules/uview-plus/components/up-picker/picker.uts
new file mode 100644
index 000000000..8db7896af
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-picker/picker.uts
@@ -0,0 +1,30 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-09-12 15:25:27
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 15:25:27
+ * @FilePath     : /uview-plus/libs/config/props/picker
+ */
+export default {
+    // picker
+    picker: {
+        show: false,
+		popupMode: 'bottom',
+        showToolbar: true,
+        title: '',
+        columns: [] as Array<Array<any>>,
+        loading: false,
+        itemHeight: 44,
+        cancelText: '取消',
+        confirmText: '确定',
+        cancelColor: '#909193',
+        confirmColor: '#3c9cff',
+        visibleItemCount: 5,
+        keyName: 'text',
+        closeOnClickOverlay: false,
+        defaultIndex: [] as number[],
+		immediateChange: true
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-picker/props.uts b/src/uni_modules/uview-plus/components/up-picker/props.uts
new file mode 100644
index 000000000..b276ca395
--- /dev/null
+++ b/src/uni_modules/uview-plus/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-plus/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
+    	},
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-picker/up-picker.uvue b/src/uni_modules/uview-plus/components/up-picker/up-picker.uvue
new file mode 100644
index 000000000..1eda930fe
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-picker/up-picker.uvue
@@ -0,0 +1,387 @@
+<template>
+    <view class="up-picker-warrper">
+        <view v-if="hasInput"
+			class="up-picker-input cursor-pointer"
+			@click="showByClickInput = !showByClickInput">
+            <slot>
+                <view>
+					{{ inputLabel != null && 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 {
+			let tmp = parseInt(this.visibleItemCount.toString())
+				* 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') {
+					if (element != null) {
+						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>
diff --git a/src/uni_modules/uview-plus/components/up-picker/up-picker.vue b/src/uni_modules/uview-plus/components/up-picker/up-picker.vue
index f82f85924..ff9121980 100644
--- a/src/uni_modules/uview-plus/components/up-picker/up-picker.vue
+++ b/src/uni_modules/uview-plus/components/up-picker/up-picker.vue
@@ -1,6 +1,8 @@
 <template>
     <view class="up-picker-warrper">
-        <view v-if="hasInput" class="up-picker-input cursor-pointer" @click="showByClickInput = !showByClickInput">
+        <view v-if="hasInput"
+			class="up-picker-input cursor-pointer"
+			@click="showByClickInput = !showByClickInput">
             <slot>
                 <view>
 					{{ inputLabel && inputLabel.length ? inputLabel.join('/') : placeholder }}
diff --git a/src/uni_modules/uview-plus/components/up-popup/up-popup.uvue b/src/uni_modules/uview-plus/components/up-popup/up-popup.uvue
index a87953db7..2095a3999 100644
--- a/src/uni_modules/uview-plus/components/up-popup/up-popup.uvue
+++ b/src/uni_modules/uview-plus/components/up-popup/up-popup.uvue
@@ -83,7 +83,7 @@
 			}
 		},
 		created() {
-			this.overlayDuration = parseInt(this.duration.toString()) + 50
+			this.overlayDuration = parseInt(this.duration!!.toString()) + 50
 		},
 		watch: {
 			show(newValue, oldValue) {
@@ -98,7 +98,7 @@
 		computed: {
 			transitionStyle():any {
 				const style = {
-					zIndex: parseInt(this.zIndex.toString()),
+					zIndex: parseInt(this.zIndex!!.toString()),
 					position: 'fixed',
 					display: 'flex',
 				}
diff --git a/src/uni_modules/uview-plus/components/up-toolbar/props.uts b/src/uni_modules/uview-plus/components/up-toolbar/props.uts
new file mode 100644
index 000000000..dd4b248a9
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-toolbar/props.uts
@@ -0,0 +1,43 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './toolbar'
+let crtProp = defProps['toolbar'] as UTSJSONObject
+
+export const propsToolbar = defineMixin({
+    props: {
+        // 是否展示工具条
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 取消按钮的文字
+        cancelText: {
+            type: String,
+            default: crtProp['cancelText']
+        },
+        // 确认按钮的文字
+        confirmText: {
+            type: String,
+            default: crtProp['confirmText']
+        },
+        // 取消按钮的颜色
+        cancelColor: {
+            type: String,
+            default: crtProp['cancelColor']
+        },
+        // 确认按钮的颜色
+        confirmColor: {
+            type: String,
+            default: crtProp['confirmColor']
+        },
+        // 标题文字
+        title: {
+            type: String,
+            default: crtProp['title']
+        },
+        // 开启右侧插槽
+        rightSlot: {
+            type: Boolean,
+            default: false
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-toolbar/toolbar.uts b/src/uni_modules/uview-plus/components/up-toolbar/toolbar.uts
new file mode 100644
index 000000000..adb3130b7
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-toolbar/toolbar.uts
@@ -0,0 +1,20 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-08912 15:46:58
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 15:46:58
+ * @FilePath     : /uview-plus/libs/config/props/toolbar
+ */
+export default {
+    // toolbar 组件
+    toolbar: {
+        show: true,
+        cancelText: '取消',
+        confirmText: '确认',
+        cancelColor: '#909193',
+        confirmColor: '#3c9cff',
+        title: ''
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-toolbar/up-toolbar.uvue b/src/uni_modules/uview-plus/components/up-toolbar/up-toolbar.uvue
new file mode 100644
index 000000000..005a209d0
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-toolbar/up-toolbar.uvue
@@ -0,0 +1,125 @@
+<template>
+	<view
+		class="up-toolbar"
+		@touchmove.stop="noop"
+		v-if="show"
+	>
+		<view
+			class="up-toolbar__left"
+		>
+			<view
+				class="up-toolbar__cancel__wrapper"
+				hover-class="up-hover-class"
+			>
+				<text
+					class="up-toolbar__wrapper__cancel"
+					@tap="cancel"
+					:style="{
+						color: cancelColor
+					}"
+				>{{ cancelText }}</text>
+			</view>
+		</view>
+		<text
+			class="up-toolbar__title up-line-1"
+			v-if="title"
+		>{{ title }}</text>
+		<view
+			class="up-toolbar__right"
+		>
+			<view
+				v-if="!rightSlot"
+				class="up-toolbar__confirm__wrapper"
+				hover-class="up-hover-class"
+			>
+				<text
+					class="up-toolbar__wrapper__confirm"
+					@tap="confirm"
+					:style="{
+					color: confirmColor
+				}"
+				>{{ confirmText }}</text>
+			</view>
+			<template v-else>
+				<slot name="right">
+				</slot>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { propsToolbar } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	/**
+	 * Toolbar 工具条
+	 * @description 
+	 * @tutorial https://ijry.github.io/uview-plus/components/toolbar.html
+	 * @property {Boolean}	show			是否展示工具条（默认 true ）
+	 * @property {String}	cancelText		取消按钮的文字（默认 '取消' ）
+	 * @property {String}	confirmText		确认按钮的文字（默认 '确认' ）
+	 * @property {String}	cancelColor		取消按钮的颜色（默认 '#909193' ）
+	 * @property {String}	confirmColor	确认按钮的颜色（默认 '#3c9cff' ）
+	 * @property {String}	title			标题文字
+	 * @event {Function} 
+	 * @example 
+	 */
+	export default {
+		name: 'up-toolbar',
+		mixins: [mpMixin, mixin, propsToolbar],
+		emits: ["confirm", "cancel"],
+		created() {
+			// console.log(this.$slots)
+		},
+		methods: {
+			// 点击取消按钮
+			cancel(): void {
+				this.$emit('cancel')
+			},
+			// 点击确定按钮
+			confirm(): void {
+				this.$emit('confirm')
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-toolbar {
+		height: 42px;
+		@include flex;
+		justify-content: space-between;
+		align-items: center;
+
+		&__wrapper {
+			&__cancel {
+				color: $up-tips-color;
+				font-size: 15px;
+				padding: 0 15px;
+			}
+		}
+
+		&__title {
+			color: $up-main-color;
+			padding: 0 60rpx;
+			font-size: 16px;
+			flex: 1;
+			text-align: center;
+		}
+
+		&__wrapper {
+			&__left,
+			&__right {
+				@include flex;
+			}
+			&__confirm {
+				color: $up-primary;
+				font-size: 15px;
+				padding: 0 15px;
+			}
+		}
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-transition/up-transition.uvue b/src/uni_modules/uview-plus/components/up-transition/up-transition.uvue
index 49251f3ef..26bcd6878 100644
--- a/src/uni_modules/uview-plus/components/up-transition/up-transition.uvue
+++ b/src/uni_modules/uview-plus/components/up-transition/up-transition.uvue
@@ -41,9 +41,9 @@ const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
 // 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
 const getClassNames = function (name: string): UTSJSONObject {
 	return {
-		enter: `up-${name}-enter up-${name}-enter-active`,
+		'enter': `up-${name}-enter up-${name}-enter-active`,
 		'enter-to': `up-${name}-enter-to up-${name}-enter-active`,
-		leave: `up-${name}-leave up-${name}-leave-active`,
+		'leave': `up-${name}-leave up-${name}-leave-active`,
 		'leave-to': `up-${name}-leave-to up-${name}-leave-active`
 	}
 }
@@ -103,7 +103,7 @@ export default {
 	        this.$emit('beforeEnter')
 	        this.inited = true
 	        this.display = true
-	        this.classes = classNames['enter'] as String
+	        this.classes = classNames['enter']!!.toString()
 			nextTick(() => {
 				// https://github.com/umicro/uView2.0/issues/545
 				// await sleep(20)
@@ -113,7 +113,7 @@ export default {
 				// 组件动画进入后触发的事件
 				this.$emit('afterEnter')
 				// 赋予组件enter-to类名
-				this.classes = classNames['enter-to'] as String
+				this.classes = classNames['enter-to']!!.toString()
 			})
 	    },
 	    // 动画离场处理
@@ -125,15 +125,15 @@ export default {
 	        this.status = 'leave'
 	        this.$emit('beforeLeave')
 	        // 获得类名
-	        this.classes = classNames['leave'] as String
+	        this.classes = classNames['leave']!!.toString()
 	
 	        nextTick(() => {
 				// 动画正在离场的状态
 				this.transitionEnded = false
 				this.$emit('leave')
 				 // 组件执行动画，到了执行的执行时间后，执行一些额外处理
-				 setTimeout(this.onTransitionEnd, this.duration as Number)
-				 this.classes = classNames['leave-to'] as String
+				 setTimeout(this.onTransitionEnd, parseInt(this.duration!!.toString()))
+				 this.classes = classNames['leave-to']!!.toString()
 			})
 	    },
 	    // 完成过渡后触发
diff --git a/src/uni_modules/uview-plus/libs/css/common.scss b/src/uni_modules/uview-plus/libs/css/common.scss
index 9057d3d62..02aebae48 100644
--- a/src/uni_modules/uview-plus/libs/css/common.scss
+++ b/src/uni_modules/uview-plus/libs/css/common.scss
@@ -15,15 +15,20 @@
 		// vue下，单行和多行显示省略号需要单独处理
 		@if $i == '1' {
 			overflow: hidden;
+			/* #ifndef UNI-APP-X */
 			white-space: nowrap;
 			text-overflow: ellipsis;
+			/* #endif */
 		} @else {
+			/* #ifndef UNI-APP-X */
 			display: -webkit-box!important;
-			overflow: hidden;
 			text-overflow: ellipsis;
 			word-break: break-all;
 			-webkit-line-clamp: $i;
 			-webkit-box-orient: vertical!important;
+			/* #endif */
+			overflow: hidden;
+			
 		}
 		/* #endif */
 	}
@@ -84,10 +89,12 @@
 	padding: 0;
 	background-color: transparent;
 	/* #ifndef APP-PLUS */
+	/* #ifndef UNI-APP-X */
 	font-size: inherit;
 	line-height: inherit;
 	color: inherit;
 	/* #endif */
+	/* #endif */
 	/* #ifdef APP-NVUE */
 	border-width: 0;
 	/* #endif */
diff --git a/src/uni_modules/uview-plus/libs/css/flex.scss b/src/uni_modules/uview-plus/libs/css/flex.scss
index 9ba1e06bd..6e4bbbc07 100644
--- a/src/uni_modules/uview-plus/libs/css/flex.scss
+++ b/src/uni_modules/uview-plus/libs/css/flex.scss
@@ -216,8 +216,10 @@
 // 交叉轴第一行文字基线对齐
 .u-flex-items-baseline,
 .up-flex-items-baseline {
-	/* #ifndef APP-NVUE */
+	/* #ifndef APP-NVUE */
+	/* #ifndef UNI-APP-X */
 	align-items: baseline;
+	/* #endif */
 	/* #endif */
 }
 
diff --git a/src/uni_modules/uview-plus/libs/css/vue.scss b/src/uni_modules/uview-plus/libs/css/vue.scss
index 07c0d4505..59bd32557 100644
--- a/src/uni_modules/uview-plus/libs/css/vue.scss
+++ b/src/uni_modules/uview-plus/libs/css/vue.scss
@@ -19,6 +19,7 @@ uni-toast .uni-toast {
 /* #endif */
 
 // 隐藏scroll-view的滚动条
+/* #ifdef H5 */
 ::-webkit-scrollbar {
     display: none;  
     width: 0 !important;  
@@ -26,3 +27,4 @@ uni-toast .uni-toast {
     -webkit-appearance: none;  
     background: transparent;  
 }
+/* #endif */
diff --git a/src/uni_modules/uview-plus/libs/function/index.uts b/src/uni_modules/uview-plus/libs/function/index.uts
index 034060676..943849da6 100644
--- a/src/uni_modules/uview-plus/libs/function/index.uts
+++ b/src/uni_modules/uview-plus/libs/function/index.uts
@@ -196,26 +196,16 @@ export function addUnit(pvalue: any|null, punit = 'px'): string {
     return testNumber(valueStr) ? `${valueStr}${unit}` : valueStr
 }
 
-// /**
-//  * @description 深度克隆
-//  * @param {object} obj 需要深度克隆的对象
-//  * @returns {*} 克隆后的对象或者原值（不是对象）
-//  */
-// export function deepClone(obj: object): any {
-//     // 对常见的“非”值，直接返回原来值
-//     // if ([null, undefined, NaN, false].includes(obj)) return obj
-//     if (typeof obj !== 'object' && typeof obj !== 'function') {
-//         // 原始类型直接返回
-//         return obj
-//     }
-//     const o = testArray(obj) ? [] : {}
-//     // for (const i in obj) {
-//     //     if (obj.hasOwnProperty(i)) {
-//     //         o[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
-//     //     }
-//     // }
-//     return o
-// }
+/**
+ * @description 深度克隆
+ * @param {object} obj 需要深度克隆的对象
+ * @returns {*} 克隆后的对象或者原值（不是对象）
+ */
+export function deepClone(obj: object): any|null {
+    // 对常见的“非”值，直接返回原来值
+    // if ([null, undefined, NaN, false].includes(obj)) return obj
+    return JSON.parse(JSON.stringify(obj))
+}
 
 /**
  * @description JS对象深度合并
diff --git a/src/uni_modules/uview-plus/libs/mixin/mixin.uts b/src/uni_modules/uview-plus/libs/mixin/mixin.uts
index aa64e3d83..1e389c455 100644
--- a/src/uni_modules/uview-plus/libs/mixin/mixin.uts
+++ b/src/uni_modules/uview-plus/libs/mixin/mixin.uts
@@ -113,7 +113,7 @@ export const mixin = defineMixin({
             })
         },
         getParent(name: string): ComponentPublicInstance|null {
-            let parent = this.$parent
+            let parent = this?.$parent
             // 通过while历遍，这里主要是为了H5需要多层解析的问题
             // while (parent) {
             //     // 父组件
@@ -140,14 +140,14 @@ export const mixin = defineMixin({
             // 此处并不会自动更新子组件的数据，而是依赖父组件up-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
             // this.parent = this.getParent(parentName)
             // console.log('this.parent', this.parent)
-            if (this.$parent?.$data?.['children'] != null) {
+            if (this?.$parent?.$data?.['children'] != null) {
                 // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
                 //if (this.parent?.$data?.['children'].indexOf(this) === -1) {
 					console.log(this.$parent?.$data?.['children'])
 					this.$parent!.$callMethod('addChild', this)
                 //}
             }
-            if (this.$parent != null) {
+            if (this?.$parent != null) {
                 // 历遍parentData中的属性，将parent中的同名属性赋值给parentData
                 UTSJSONObject.keys(this.parentData).map((key: string) => {
                     if (this.$parent?.$props?.[key] != null) {
diff --git a/uni-app-x/pages.json b/uni-app-x/pages.json
index 729fa3ebf..4fd1b31d2 100644
--- a/uni-app-x/pages.json
+++ b/uni-app-x/pages.json
@@ -406,13 +406,15 @@
 		// 		"navigationBarTitleText": "模态框",
 		// 		"navigationStyle": "custom"
 		// 	}
-		// }, {
-		// 	"path": "picker/picker",
-		// 	"style": {
-		// 		"navigationBarTitleText": "选择器",
-		// 		"navigationStyle": "custom"
-		// 	}
-		// }, {
+		// }
+		, {
+			"path": "picker/picker",
+			"style": {
+				"navigationBarTitleText": "选择器",
+				"navigationStyle": "custom"
+			}
+		}
+		//, {
 		// 	"path": "calendar/calendar",
 		// 	"style": {
 		// 		"navigationBarTitleText": "日历",
diff --git a/uni-app-x/pages/componentsC/picker/picker.nvue b/uni-app-x/pages/componentsC/picker/picker.uvue
similarity index 71%
rename from uni-app-x/pages/componentsC/picker/picker.nvue
rename to uni-app-x/pages/componentsC/picker/picker.uvue
index 67b89581a..53c79da7f 100644
--- a/uni-app-x/pages/componentsC/picker/picker.nvue
+++ b/uni-app-x/pages/componentsC/picker/picker.uvue
@@ -10,7 +10,7 @@
 		<up-cell-group>
 			<up-cell
 				@click="showPicker(index)"
-				:title="item.title"
+				:title="item['title']"
 				v-for="(item, index) in list"
 				:key="index"
 				isLink
@@ -18,7 +18,7 @@
 				<template #icon>
 					<image
 						class="u-cell-icon"
-						:src="item.iconUrl"
+						:src="item['iconUrl']"
 						mode="widthFix"
 					></image>
 				</template>
@@ -76,11 +76,12 @@
 	</view>
 </template>
 
-<script>
+<script>
+	import { sleep } from '@/uni_modules/uview-plus/libs/function/index'
 	export default {
 		data() {
 			return {
-				index: 0,
+				index: '0',
 				loading: false,
 				columnData: [
 					['深圳', '厦门', '上海', '拉萨'],
@@ -152,59 +153,53 @@
 			}
 		},
 		methods: {
-			changeHandler1(e) {
-				this.change(e)
-				const {
-					columnIndex,
-					value,
-					values,
-					index,
-					// 微信小程序无法将picker实例传出来，只能通过ref操作
-					picker = this.$refs.uPicker3
-				} = e
+			changeHandler1(e: UTSJSONObject): void {
+				this.change(e)
+				let columnIndex = e.getNumber('columnIndex')
+				let value = e.getArray('value')
+				let values = e.getArray('values')
+				let index = e.getNumber('index')
+				let picker = this.$refs['uPicker3']
 				if (columnIndex === 0) {
-					picker.setColumnValues(1, this.columnData[index])
+					// picker.setColumnValues(1, this.columnData[index])
 				}
 			},
-			changeHandler2(e) {
+			changeHandler2(e: UTSJSONObject): void {
 				this.change(e)
-				const {
-					columnIndex,
-					value,
-					values,
-					index,
-					// 微信小程序无法将picker实例传出来，只能通过ref操作
-					picker = this.$refs.uPicker4
-				} = e
+				let columnIndex = e.getNumber('columnIndex')
+				let value = e.getArray('value')
+				let values = e.getArray('values')
+				let index = e.getNumber('index')
+				let picker = this.$refs['uPicker4']
 				if (columnIndex === 0) {
 					this.loading = true
-					uni.$u.sleep(1500).then(() => {
-						picker.setColumnValues(1, this.columnData[index])
+					//sleep(1500).then(() => {
+						// picker.setColumnValues(1, this.columnData[index])
 						this.loading = false
-					})
+					//})
 				}
 			},
-			navigateBack() {
+			navigateBack(): void {
 				uni.navigateBack()
 			},
-			change(e) {
+			change(e: any): void {
 				// console.log('change', e);
 			},
-			showPicker(index) {
-				this.index = index + 1
-				this[`show${index + 1}`] = true
+			showPicker(index: number): void {
+				this.index = (parseInt(index.toString()) + 1).toString()
+				this.$data[`show${this.index}`] = true
 			},
-			close() {
+			close(): void {
 				// console.log('close');
-				this[`show${this.index}`] = false
+				this.$data[`show${this.index}`] = false
 			},
-			confirm(e) {
+			confirm(e: any): void {
 				// console.log('confirm', e);
-				this[`show${this.index}`] = false
+				this.$data[`show${this.index}`] = false
 			},
-			cancel() {
+			cancel(): void {
 				// console.log('cancel');
-				this[`show${this.index}`] = false
+				this.$data[`show${this.index}`] = false
 			}
 		},
 	}