uview-ultra-plus 1.0.0

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

@@ -0,0 +1,166 @@
+<template>
+	<up-popup
+		:overlay="overlay"
+		:closeOnClickOverlay="closeOnClickOverlay"
+		mode="bottom"
+		:popup="false"
+		:show="show"
+		:safeAreaInsetBottom="safeAreaInsetBottom"
+		@close="popupClose"
+		:zIndex="zIndex"
+		:customStyle="{
+			backgroundColor: 'rgb(214, 218, 220)'
+		}"
+	>
+		<view class="up-keyboard">
+			<slot />
+			<view
+				class="up-keyboard__tooltip"
+				v-if="tooltip"
+			>
+				<view
+					hover-class="up-hover-class"
+					:hover-stay-time="100"
+				>
+					<text
+						class="up-keyboard__tooltip__item up-keyboard__tooltip__cancel"
+						v-if="showCancel"
+						@tap="onCancel"
+					>{{showCancel && cancelText != ''}}</text>
+				</view>
+				<view>
+					<text
+						v-if="showTips"
+						class="up-keyboard__tooltip__item up-keyboard__tooltip__tips"
+					>{{tips != '' ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}</text>
+				</view>
+				<view
+					hover-class="up-hover-class"
+					:hover-stay-time="100"
+				>
+					<text
+						v-if="showConfirm"
+						@tap="onConfirm"
+						class="up-keyboard__tooltip__item up-keyboard__tooltip__submit"
+						hover-class="up-hover-class"
+					>{{showConfirm ? confirmText : ''}}</text>
+				</view>
+			</view>
+			<template v-if="mode == 'number' || mode == 'card'">
+				<up-number-keyboard
+					:random="random"
+					@backspace="backspace"
+					@change="change"
+					:mode="mode"
+					:dotDisabled="dotDisabled"
+				></up-number-keyboard>
+			</template>
+			<template v-else>
+				<up-car-keyboard
+					:random="random"
+					:autoChange="autoChange"
+					@backspace="backspace"
+					@change="change"
+				></up-car-keyboard>
+			</template>
+		</view>
+	</up-popup>
+</template>
+
+<script lang="uts">
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { propsKeyboard } from "./props";
+
+/**
+ * keyboard 键盘
+ * @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
+ * @tutorial https://ijry.github.io/uview-plus/components/keyboard.html
+ * @property {String}			mode				键盘类型，见官网基本使用的说明 （默认 'number' ）
+ * @property {Boolean}			dotDisabled			是否显示"."按键，只在mode=number时有效 （默认 false ）
+ * @property {Boolean}			tooltip				是否显示键盘顶部工具条 （默认 true ）
+ * @property {Boolean}			showTips			是否显示工具条中间的提示 （默认 true ）
+ * @property {String}			tips				工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
+ * @property {Boolean}			showCancel			是否显示工具条左边的"取消"按钮 （默认 true ）
+ * @property {Boolean}			showConfirm			是否显示工具条右边的"完成"按钮（ 默认 true ）
+ * @property {Boolean}			random				是否打乱键盘按键的顺序 （默认 false ）
+ * @property {Boolean}			safeAreaInsetBottom	是否开启底部安全区适配 （默认 true ）
+ * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩收起键盘 （默认 true ）
+ * @property {Boolean}			show				控制键盘的弹出与收起（默认 false ）
+ * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
+ * @property {String | Number}	zIndex				弹出键盘的z-index值 （默认 1075 ）
+ * @property {String}			cancelText			取消按钮的文字 （默认 '取消' ）
+ * @property {String}			confirmText			确认按钮的文字 （默认 '确认' ）
+ * @property {Object}			customStyle			自定义样式，对象形式
+ * @event {Function} change 按键被点击(不包含退格键被点击)
+ * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
+ * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
+ * @event {Function} backspace 键盘退格键被点击
+ * @example <up-keyboard mode="number" v-model="show"></up-keyboard>
+ */
+export default {
+	name: "up-keyboard",
+	data() {
+		return {
+			
+		}
+	},
+	mixins: [mpMixin, mixin, propsKeyboard],
+	methods: {
+		change(e: any) {
+			this.$emit('change', e);
+		},
+		// 键盘关闭
+		popupClose() {
+			this.$emit('close');
+		},
+		// 输入完成
+		onConfirm() {
+			this.$emit('confirm');
+		},
+		// 取消输入
+		onCancel() {
+			this.$emit('cancel');
+		},
+		// 退格键
+		backspace() {
+			this.$emit('backspace');
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-keyboard {
+
+		&__tooltip {
+			@include flex;
+			justify-content: space-between;
+			background-color: #FFFFFF;
+			padding: 14px 12px;
+
+			&__item {
+				color: #333333;
+				flex: 1;
+				text-align: center;
+				font-size: 15px;
+			}
+
+			&__submit {
+				text-align: right;
+				color: $up-primary;
+			}
+
+			&__cancel {
+				text-align: left;
+				color: #888888;
+			}
+
+			&__tips {
+				color: $up-tips-color;
+			}
+		}
+	}
+</style>

package/uview-ultra/components/up-keyboard/up-keyboard.vue

@@ -0,0 +1,167 @@
+<template>
+	<up-popup
+	    :overlay="overlay"
+	    :closeOnClickOverlay="closeOnClickOverlay"
+	    mode="bottom"
+	    :popup="false"
+	    :show="show"
+	    :safeAreaInsetBottom="safeAreaInsetBottom"
+	    @close="popupClose"
+	    :zIndex="zIndex"
+	    :customStyle="{
+			backgroundColor: 'rgb(214, 218, 220)'
+		}"
+	>
+		<view class="up-keyboard">
+			<slot />
+			<view
+			    class="up-keyboard__tooltip"
+			    v-if="tooltip"
+			>
+				<view
+				    hover-class="up-hover-class"
+				    :hover-stay-time="100"
+				>
+					<text
+					    class="up-keyboard__tooltip__item up-keyboard__tooltip__cancel"
+					    v-if="showCancel"
+					    @tap="onCancel"
+					>{{showCancel ? cancelText : ''}}</text>
+				</view>
+				<view>
+					<text
+					    v-if="showTips"
+					    class="up-keyboard__tooltip__item up-keyboard__tooltip__tips"
+					>{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}</text>
+				</view>
+				<view
+				    hover-class="up-hover-class"
+				    :hover-stay-time="100"
+				>
+					<text
+					    v-if="showConfirm"
+					    @tap="onConfirm"
+					    class="up-keyboard__tooltip__item up-keyboard__tooltip__submit"
+					    hover-class="up-hover-class"
+					>{{showConfirm && confirmText}}</text>
+				</view>
+			</view>
+			<template v-if="mode == 'number' || mode == 'card'">
+				<up-number-keyboard
+				    :random="random"
+				    @backspace="backspace"
+				    @change="change"
+				    :mode="mode"
+				    :dotDisabled="dotDisabled"
+				></up-number-keyboard>
+			</template>
+			<template v-else>
+				<up-car-keyboard
+				    :random="random"
+					:autoChange="autoChange"
+				    @backspace="backspace"
+				    @change="change"
+				></up-car-keyboard>
+			</template>
+		</view>
+	</up-popup>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+
+	/**
+	 * keyboard 键盘
+	 * @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
+	 * @tutorial https://ijry.github.io/uview-plus/components/keyboard.html
+	 * @property {String}			mode				键盘类型，见官网基本使用的说明 （默认 'number' ）
+	 * @property {Boolean}			dotDisabled			是否显示"."按键，只在mode=number时有效 （默认 false ）
+	 * @property {Boolean}			tooltip				是否显示键盘顶部工具条 （默认 true ）
+	 * @property {Boolean}			showTips			是否显示工具条中间的提示 （默认 true ）
+	 * @property {String}			tips				工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
+	 * @property {Boolean}			showCancel			是否显示工具条左边的"取消"按钮 （默认 true ）
+	 * @property {Boolean}			showConfirm			是否显示工具条右边的"完成"按钮（ 默认 true ）
+	 * @property {Boolean}			random				是否打乱键盘按键的顺序 （默认 false ）
+	 * @property {Boolean}			safeAreaInsetBottom	是否开启底部安全区适配 （默认 true ）
+	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩收起键盘 （默认 true ）
+	 * @property {Boolean}			show				控制键盘的弹出与收起（默认 false ）
+	 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
+	 * @property {String | Number}	zIndex				弹出键盘的z-index值 （默认 1075 ）
+	 * @property {String}			cancelText			取消按钮的文字 （默认 '取消' ）
+	 * @property {String}			confirmText			确认按钮的文字 （默认 '确认' ）
+	 * @property {Object}			customStyle			自定义样式，对象形式
+	 * @event {Function} change 按键被点击(不包含退格键被点击)
+	 * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
+	 * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
+	 * @event {Function} backspace 键盘退格键被点击
+	 * @example <up-keyboard mode="number" v-model="show"></up-keyboard>
+	 */
+	export default {
+		name: "up-keyboard",
+		data() {
+			return {
+
+			}
+		},
+		mixins: [mpMixin, mixin, props],
+		emits: ["change", "close", "confirm", "cancel", "backspace"],
+		methods: {
+			change(e) {
+				this.$emit('change', e);
+			},
+			// 键盘关闭
+			popupClose() {
+				this.$emit('close');
+			},
+			// 输入完成
+			onConfirm() {
+				this.$emit('confirm');
+			},
+			// 取消输入
+			onCancel() {
+				this.$emit('cancel');
+			},
+			// 退格键
+			backspace() {
+				this.$emit('backspace');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-keyboard {
+
+		&__tooltip {
+			@include flex;
+			justify-content: space-between;
+			background-color: #FFFFFF;
+			padding: 14px 12px;
+
+			&__item {
+				color: #333333;
+				flex: 1;
+				text-align: center;
+				font-size: 15px;
+			}
+
+			&__submit {
+				text-align: right;
+				color: $up-primary;
+			}
+
+			&__cancel {
+				text-align: left;
+				color: #888888;
+			}
+
+			&__tips {
+				color: $up-tips-color;
+			}
+		}
+	}
+</style>

package/uview-ultra/components/up-lazy-load/lazyLoad.uts

@@ -0,0 +1,19 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-12-17 12:47:50
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-17 12:47:50
+ * @FilePath     : /uview-ultra/libs/config/props/lazyLoad.uts
+ */
+export default {
+	// lazyLoad组件
+	lazyLoad: {
+		index: '',
+		image: '',
+		imgMode: 'widthFix',
+		loadingImg: ''
+		errorImg: ''
+	}
+} as UTSJSONObject

package/uview-ultra/components/up-lazy-load/props.uts

@@ -0,0 +1,74 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2025-12-17 12:47:51
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-17 12:47:51
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './lazyLoad.uts'
+
+let lazyLoadProp = defProps['lazyLoad'] as UTSJSONObject
+
+export const propsLazyLoad = defineMixin({
+	props: {
+		// 用户自定义值，在事件触发时回调，用以区分是哪个图片
+		index: {
+			type: [Number, String],
+			default: lazyLoadProp['index']
+		},
+		// 要显示的图片
+		image: {
+			type: String,
+			default: lazyLoadProp['image']
+		},
+		// 图片裁剪模式
+		imgMode: {
+			type: String,
+			default: lazyLoadProp['imgMode']
+		},
+		// 占位图片路径
+		loadingImg: {
+			type: String,
+			default: lazyLoadProp['loadingImg']
+		},
+		// 加载失败的错误占位图
+		errorImg: {
+			type: String,
+			default: lazyLoadProp['errorImg']
+		},
+		// 图片进入可见区域前多少像素时，单位rpx，开始加载图片
+		// 负数为图片超出屏幕底部多少距离后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发(图片还没出现在屏幕上)
+		threshold: {
+			type: [Number, String],
+			default: 100
+		},
+		// 淡入淡出动画的过渡时间
+		duration: {
+			type: [Number, String],
+			default: 500
+		},
+		// 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显
+		// linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
+		effect: {
+			type: String,
+			default: 'ease-in-out'
+		},
+		// 是否使用过渡效果
+		isEffect: {
+			type: Boolean,
+			default: true
+		},
+		// 圆角值
+		borderRadius: {
+			type: [Number, String],
+			default: 0
+		},
+		// 图片高度，单位rpx
+		height: {
+			type: [Number, String],
+			default: '200'
+		}
+	}
+});

package/uview-ultra/components/up-lazy-load/up-lazy-load.uvue

@@ -0,0 +1,211 @@
+<template>
+    <view class="up-wrap" :style="{
+		opacity: Number(opacity),
+		borderRadius: borderRadius + 'rpx',
+		// 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
+		transition: `opacity ${time / 1000}s ease-in-out`
+	}" :class="'up-lazy-item-' + elIndex">
+        <view :class="'up-lazy-item-' + elIndex">
+            <image :style="{ borderRadius: borderRadius + 'rpx', height: imgHeight }" v-if="!isError"
+                class="up-lazy-item" :src="isShow ? image : loadingImg" :mode="imgMode" @load="imgLoaded"
+                @error="loadError" @tap="clickImg">
+            </image>
+            <image :style="{ borderRadius: borderRadius + 'rpx', height: imgHeight }" class="up-lazy-item error" v-else
+                :src="errorImg" :mode="imgMode" @load="errorImgLoaded" @tap="clickImg"></image>
+        </view>
+    </view>
+</template>
+
+<script lang="uts">
+    import { addUnit, guid } from '../../libs/function/index.js';
+    import { mpMixin } from '../../libs/mixin/mpMixin';
+    import { mixin } from '../../libs/mixin/mixin';
+    import { propsLazyLoad } from "./props";
+    
+    /**
+     * lazyLoad 懒加载
+     * @description 懒加载使用的场景为：页面有很多图片时，APP会同时加载所有的图片，导致页面卡顿，各个位置的图片出现前后不一致等.
+     * @tutorial https://uview-plus.jiangruyi.com/components/lazy-load.html
+     * @property {String Number} index 用户自定义值，在事件触发时回调，用以区分是哪个图片
+     * @property {String} image 图片路径
+     * @property {String} loading-img 预加载时的占位图
+     * @property {String} error-img 图片加载出错时的占位图
+     * @property {String} threshold 触发加载时的位置，见上方说明，单位 rpx（默认300）
+     * @property {String Number} duration 图片加载成功时，淡入淡出时间，单位ms（默认）
+     * @property {String} effect 图片加载成功时，淡入淡出的css动画效果（默认ease-in-out）
+     * @property {Boolean} is-effect 图片加载成功时，是否启用淡入淡出效果（默认true）
+     * @property {String Number} border-radius 图片圆角值，单位rpx（默认0）
+     * @property {String Number} height 图片高度，注意：实际高度可能受img-mode参数影响（默认450）
+     * @property {String Number} mg-mode 图片的裁剪模式，详见image组件裁剪模式（默认widthFix）
+     * @event {Function} click 点击图片时触发
+     * @event {Function} load 图片加载成功时触发
+     * @event {Function} error 图片加载失败时触发
+     * @example <up-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></up-lazy-load>
+     */
+    export default {
+        name: 'up-lazy-load',
+        mixins: [mpMixin, mixin, propsLazyLoad],
+        data() {
+            return {
+                isShow: false,
+                opacity: 1,
+                time: this.duration,
+                loadStatus: '', // 默认是懒加载中的状态
+                isError: false, // 图片加载失败
+                elIndex: guid()
+            }
+        },
+        computed: {
+            // 将threshold从rpx转为px
+            getThreshold(): number {
+                // 先取绝对值，因为threshold可能是负数，最后根据this.threshold是正数或者负数，重新还原
+                let thresholdPx = uni.upx2px(Math.abs(this.threshold));
+                return this.threshold < 0 ? -thresholdPx : thresholdPx;
+            },
+            
+            // 计算图片的高度，可能为auto，带%，或者直接数值
+            imgHeight(): string {
+                return addUnit(this.height);
+            }
+        },
+        created() {
+            // 由于一些特殊原因，不能将此变量放到data中定义
+            this.observer = {};
+        },
+        watch: {
+            isShow(nVal: boolean) {
+                // 如果是不开启过渡效果，直接返回
+                if (!this.isEffect) return;
+                this.time = 0;
+                // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
+                this.opacity = 0;
+                // 延时30ms，否则在浏览器H5，过渡效果无效
+                setTimeout(() => {
+                    this.time = this.duration;
+                    this.opacity = 1;
+                }, 30)
+            },
+            
+            // 图片路径发生变化时，需要重新标记一些变量，否则会一直卡在某一个状态，比如isError
+            image(n: string) {
+                if (!n) {
+                    // 如果传入null或者''，或者undefined，标记为错误状态
+                    this.isError = true;
+                } else {
+                    this.init();
+                    this.isError = false;
+                }
+            }
+        },
+        methods: {
+            // 用于重新初始化
+            init(): void {
+                this.isError = false;
+                this.loadStatus = '';
+            },
+            
+            // 点击图片触发的事件,loadlazy-还是懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
+            clickImg(): void {
+                let whichImg = '';
+                // 如果isShow为false，意味着图片还没开始加载，点击的只能是最开始的占位图
+                if (this.isShow == false) whichImg = 'lazyImg';
+                // 如果isError为true，意味着图片加载失败，这是只剩下错误的占位图，所以点击的只能是错误占位图
+                // 当然，也可以给错误的占位图元素绑定点击事件，看你喜欢~
+                else if (this.isError == true) whichImg = 'errorImg';
+                // 总共三张图片，除了两个占位图，剩下的只能是正常的那张图片了
+                else whichImg = 'realImg';
+                // 只通知当前图片的index
+                this.$emit('click', this.index);
+            },
+            
+            // 图片加载完成事件，可能是加载占位图时触发，也可能是加载真正的图片完成时触发，通过isShow区分
+            imgLoaded(): void {
+                // 占位图加载完成
+                if (this.loadStatus == '') {
+                    this.loadStatus = 'lazyed';
+                }
+                // 真正的图片加载完成 
+                else if (this.loadStatus == 'lazyed') {
+                    this.loadStatus = 'loaded';
+                    this.$emit('load', this.index);
+                }
+            },
+            
+            // 错误的图片加载完成
+            errorImgLoaded(): void {
+                this.$emit('error', this.index);
+            },
+            
+            // 图片加载失败
+            loadError(): void {
+                this.isError = true;
+            },
+            
+            disconnectObserver(observerName: string): void {
+                const observer = this[observerName];
+                observer && observer.disconnect();
+            }
+        },
+        
+        beforeUnmount() {
+            // 销毁页面时，可能还没触发某张很底部的懒加载图片，所以把这个事件给去掉
+            //observer.disconnect();
+        },
+        
+        mounted() {
+            // 此uOnReachBottom事件由mixin.js发出，目的是让页面到底时，保证所有图片都进行加载，做到绝对稳定且可靠
+            this.$nextTick(() => {
+                uni.$once('uOnReachBottom', () => {
+                    if (!this.isShow) this.isShow = true;
+                });
+            })
+            // mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
+           
+            setTimeout(() => {
+                // #ifndef APP-NVUE
+                // 这里是组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver
+                // this.disconnectObserver('contentObserver');
+                // nvue 里不支持
+                const contentObserver = uni.createIntersectionObserver(this);
+                // 要理解这里怎么计算的，请看这个：
+                // https://blog.csdn.net/qq_25324335/article/details/83687695
+                contentObserver.relativeToViewport({
+                    bottom: this.getThreshold,
+                }).observe('.up-lazy-item-' + this.elIndex, (res: UTSJSONObject) => {
+                    // console.log('relativeToViewport', res)
+                    if (res.intersectionRatio > 0) {
+                        // 懒加载状态改变
+                        this.isShow = true;
+                        // 如果图片已经加载，去掉监听，减少性能的消耗
+                        this.disconnectObserver('contentObserver');
+                    }
+                })
+                this.contentObserver = contentObserver;
+                // #endif
+                // #ifdef APP-NVUE
+                this.isShow = true;
+                // #endif
+            }, 30)
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "../../libs/css/components.scss";
+
+    .up-wrap {
+        background-color: #eee;
+        overflow: hidden;
+    }
+
+    .up-lazy-item {
+        // 骗系统开启硬件加速
+        transform: transition3d(0, 0, 0);
+        /* #ifndef APP-NVUE */
+        // 防止图片加载“闪一下”
+        will-change: transform;
+        display: block;
+        width: 100%;
+        /* #endif */
+    }
+</style>