uview-ultra 4.5.46

package/components/up-number-keyboard/up-number-keyboard.uvue

@@ -0,0 +1,223 @@
+<template>
+	<view
+		class="up-keyboard"
+		@touchmove.stop.prevent="noop"
+	>
+		<view
+			class="up-keyboard__button-wrapper"
+			v-for="(item, index) in numList"
+			:key="index"
+		>
+			<view
+				class="up-keyboard__button-wrapper__button"
+				:style="[itemStyle(index)]"
+				@tap="keyboardClick(item)"
+				hover-class="up-hover-class"
+				:hover-stay-time="200"
+			>
+				<text class="up-keyboard__button-wrapper__button__text">{{ item }}</text>
+			</view>
+		</view>
+		<view
+			class="up-keyboard__button-wrapper"
+		>
+			<view
+				class="up-keyboard__button-wrapper__button up-keyboard__button-wrapper__button--gray"
+				hover-class="up-hover-class"
+				:hover-stay-time="200"
+				@tap="backspaceClick"
+				@touchstart.stop="backspaceTouchStart"
+				@touchend="clearTimer"
+			>
+				<up-icon
+					name="backspace"
+					color="#303133"
+					size="28"
+				></up-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { computed, ref } from 'vue'
+import defProps from './numberKeyboard.uts'
+import { randomArray } from '../../libs/function/index'
+
+/**
+ * up-number-keyboard 数字键盘组件
+ * @description 数字键盘组件，用于输入数字或身份证号码等场景
+ * @tutorial https://www.uviewui.com/components/numberKeyboard.html
+ * @property {String} mode = [number|card]  键盘的类型，number-数字键盘，card-身份证键盘
+ * @property {Boolean} dotDisabled = [true|false] 是否禁用小数点，默认为 true
+ * @property {Boolean} random = [true|false] 是否打乱键盘按键的顺序，默认为 false
+ * @event {Function} change 点击键盘按键时触发，返回按键值
+ * @event {Function} backspace 点击退格键时触发
+ * @example <up-number-keyboard :mode="mode" :dot-disabled="dotDisabled" @change="onChange" @backspace="onBackspace" />
+ */
+defineOptions({
+	styleIsolation: 'app-and-page',
+	name: 'up-number-keyboard'
+})
+
+const props = defineProps({
+	// 键盘的类型，number-数字键盘，card-身份证键盘
+	mode: {
+		type: String,
+		default: defProps.getString('numberKeyboard.mode')
+	},
+	// 是否显示键盘的"."符号
+	dotDisabled: {
+		type: Boolean,
+		default: defProps.getBoolean('numberKeyboard.dotDisabled')
+	},
+	// 是否打乱键盘按键的顺序
+	random: {
+		type: Boolean,
+		default: defProps.getBoolean('numberKeyboard.random')
+	}
+})
+
+const emit = defineEmits(['change', 'backspace'])
+
+const dot = '.' // 点
+const timer = ref<number | null>(null) // 长按多次删除的事件监听
+const cardX = 'X' // 身份证的X符号
+const noop = (): void => {}
+
+// 键盘需要显示的内容
+const numList = computed((): Array<string | number> => {
+	const tmp = [] as Array<string | number>
+	if (props.dotDisabled && props.mode == 'number') {
+		if (!props.random) {
+			return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
+		} else {
+			return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
+		}
+	} else if (!props.dotDisabled && props.mode == 'number') {
+		if (!props.random) {
+			return [1, 2, 3, 4, 5, 6, 7, 8, 9, dot, 0]
+		} else {
+			return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, dot, 0])
+		}
+	} else if (props.mode == 'card') {
+		if (!props.random) {
+			return [1, 2, 3, 4, 5, 6, 7, 8, 9, cardX, 0]
+		} else {
+			return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, cardX, 0])
+		}
+	}
+	return tmp
+})
+
+// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
+const itemStyle = (index: number): UTSJSONObject => {
+	const style = {} as UTSJSONObject
+	if (props.mode == 'number' && props.dotDisabled && index == 9) {
+		style['width'] = '464rpx'
+	}
+	return style
+}
+
+// 点击退格键，PC端浏览器(如电脑版微信内置浏览器)只有鼠标事件不触发touch，故由tap触发删除
+const backspaceClick = (): void => {
+	emit('backspace')
+}
+
+// 触摸退格键，一定时间后进入长按连续删除状态，短按时会在touchend前被清除
+const backspaceTouchStart = (): void => {
+	clearTimer() // 再次清空定时器，防止重复注册定时器
+	timer.value = setTimeout(() => {
+		emit('backspace')
+		backspaceLongPress()
+	}, 600)
+}
+
+// 长按状态下每隔一段时间删除一次
+const backspaceLongPress = (): void => {
+	clearTimer()
+	timer.value = setTimeout(() => {
+		emit('backspace')
+		backspaceLongPress()
+	}, 250)
+}
+
+const clearTimer = (): void => {
+	clearTimeout(timer.value ?? 0)
+	timer.value = null
+}
+
+// 获取键盘显示的内容
+const keyboardClick = (val: any): void => {
+	// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
+	if (!props.dotDisabled && val != dot && val != cardX) {
+		val = parseInt(val.toString())
+	}
+	emit('change', val)
+}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-number-keyboard-background-color:rgb(224, 228, 230) !default;
+	$up-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
+	$up-number-keyboard-button-width:222rpx !default;
+	$up-number-keyboard-button-margin:4px 6rpx !default;
+	$up-number-keyboard-button-border-top-left-radius:4px !default;
+	$up-number-keyboard-button-border-top-right-radius:4px !default;
+	$up-number-keyboard-button-border-bottom-left-radius:4px !default;
+	$up-number-keyboard-button-border-bottom-right-radius:4px !default;
+	$up-number-keyboard-button-height: 90rpx!default;
+	$up-number-keyboard-button-background-color:#FFFFFF !default;
+	$up-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
+	$up-number-keyboard-text-font-size:20px !default;
+	$up-number-keyboard-text-font-weight:400 !default;
+	$up-number-keyboard-text-color:$up-main-color !default;
+	$up-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
+	$up-number-keyboard-up-hover-class-background-color: #BBBCC6 !default;
+
+	.up-keyboard {
+		@include flex;
+		flex-direction: row;
+		justify-content: space-around;
+		background-color: $up-number-keyboard-background-color;
+		flex-wrap: wrap;
+		padding: $up-number-keyboard-padding;
+
+		&__button-wrapper {
+			box-shadow: $up-number-keyboard-button-box-shadow;
+			margin: $up-number-keyboard-button-margin;
+			border-top-left-radius: $up-number-keyboard-button-border-top-left-radius;
+			border-top-right-radius: $up-number-keyboard-button-border-top-right-radius;
+			border-bottom-left-radius: $up-number-keyboard-button-border-bottom-left-radius;
+			border-bottom-right-radius: $up-number-keyboard-button-border-bottom-right-radius;
+
+			&__button {
+				width: $up-number-keyboard-button-width;
+				height: $up-number-keyboard-button-height;
+				background-color: $up-number-keyboard-button-background-color;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+				border-top-left-radius: $up-number-keyboard-button-border-top-left-radius;
+				border-top-right-radius: $up-number-keyboard-button-border-top-right-radius;
+				border-bottom-left-radius: $up-number-keyboard-button-border-bottom-left-radius;
+				border-bottom-right-radius: $up-number-keyboard-button-border-bottom-right-radius;
+
+				&__text {
+					font-size: $up-number-keyboard-text-font-size;
+					font-weight: $up-number-keyboard-text-font-weight;
+					color: $up-number-keyboard-text-color;
+				}
+
+				&--gray {
+					background-color: $up-number-keyboard-gray-background-color;
+				}
+			}
+		}
+	}
+
+	.up-hover-class {
+		background-color: $up-number-keyboard-up-hover-class-background-color;
+	}
+</style>

package/components/up-number-keyboard/up-number-keyboard.vue

@@ -0,0 +1,234 @@
+<template>
+	<view
+		class="up-keyboard"
+		@touchmove.stop.prevent="noop"
+	>
+		<view
+			class="up-keyboard__button-wrapper"
+			v-for="(item, index) in numList"
+			:key="index"
+		>
+			<view
+				class="up-keyboard__button-wrapper__button"
+				:style="[itemStyle(index)]"
+				@tap="keyboardClick(item)"
+				hover-class="up-hover-class"
+				:hover-stay-time="200"
+			>
+				<text class="up-keyboard__button-wrapper__button__text">{{ item }}</text>
+			</view>
+		</view>
+		<view
+			class="up-keyboard__button-wrapper"
+		>
+			<view
+				class="up-keyboard__button-wrapper__button up-keyboard__button-wrapper__button--gray"
+				hover-class="up-hover-class"
+				:hover-stay-time="200"
+				@tap="backspaceClick"
+				@touchstart.stop="backspaceTouchStart"
+				@touchend="clearTimer"
+			>
+				<up-icon
+					name="backspace"
+					color="#303133"
+					size="28"
+				></up-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { computed, onBeforeUnmount, ref } from 'vue'
+	import { props as numberKeyboardProps } from './props.js'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+	import { randomArray } from '../../libs/function/index.js'
+	/**
+	 * keyboard 键盘组件
+	 * @description
+	 * @tutorial
+	 * @property {String}	mode		键盘的类型，number-数字键盘，card-身份证键盘
+	 * @property {Boolean}	dotDisabled	是否显示键盘的"."符号
+	 * @property {Boolean}	random		是否打乱键盘按键的顺序
+	 * @event {Function} change		点击键盘触发
+	 * @event {Function} backspace	点击退格键触发
+	 * @example
+	 */
+	defineOptions({
+		name: 'up-number-keyboard',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...numberKeyboardProps.props
+	})
+	const emit = defineEmits(["backspace", "change"])
+	const { noop } = useUltraUI(props)
+	const backspace = 'backspace' // 退格键内容
+	const dot = '.' // 点
+	const timer = ref(null) // 长按多次删除的事件监听
+	const cardX = 'X' // 身份证的X符号
+
+	// 键盘需要显示的内容
+	const numList = computed(() => {
+		if (props.dotDisabled && props.mode == 'number') {
+			if (!props.random) {
+				return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
+			} else {
+				return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
+			}
+		} else if (!props.dotDisabled && props.mode == 'number') {
+			if (!props.random) {
+				return [1, 2, 3, 4, 5, 6, 7, 8, 9, dot, 0]
+			} else {
+				return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, dot, 0])
+			}
+		} else if (props.mode == 'card') {
+			if (!props.random) {
+				return [1, 2, 3, 4, 5, 6, 7, 8, 9, cardX, 0]
+			} else {
+				return randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, cardX, 0])
+			}
+		}
+		return []
+	})
+
+	// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
+	function itemStyle(index) {
+		const style = {}
+		if (props.mode == 'number' && props.dotDisabled && index == 9) style.width = '464rpx'
+		return style
+	}
+
+	// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
+	function btnBgGray(index) {
+		if (!props.random && index == 9 && (props.mode != 'number' || (props.mode == 'number' && !props.dotDisabled))) return true
+		else return false
+	}
+
+	// 点击退格键，PC端浏览器(如电脑版微信内置浏览器)只有鼠标事件不触发touch，故由tap触发删除
+	function backspaceClick() {
+		emit('backspace')
+	}
+
+	// 触摸退格键，一定时间后进入长按连续删除状态，短按时会在touchend前被清除
+	function backspaceTouchStart() {
+		clearTimer() //再次清空定时器，防止重复注册定时器
+		timer.value = setTimeout(() => {
+			emit('backspace')
+			backspaceLongPress()
+		}, 600)
+	}
+
+	// 长按状态下每隔一段时间删除一次
+	function backspaceLongPress() {
+		clearTimer()
+		timer.value = setTimeout(() => {
+			emit('backspace')
+			backspaceLongPress()
+		}, 250)
+	}
+
+	function clearTimer() {
+		clearTimeout(timer.value)
+		timer.value = null
+	}
+
+	// 获取键盘显示的内容
+	function keyboardClick(val) {
+		// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
+		if (!props.dotDisabled && val != dot && val != cardX) val = Number(val)
+		emit('change', val)
+	}
+
+	onBeforeUnmount(() => {
+		clearTimer()
+	})
+
+	defineExpose({
+		backspace,
+		dot,
+		timer,
+		cardX,
+		noop,
+		numList,
+		itemStyle,
+		btnBgGray,
+		backspaceClick,
+		backspaceTouchStart,
+		backspaceLongPress,
+		clearTimer,
+		keyboardClick
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-number-keyboard-background-color:rgb(224, 228, 230) !default;
+	$up-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
+	$up-number-keyboard-button-width:222rpx !default;
+	$up-number-keyboard-button-margin:4px 6rpx !default;
+	$up-number-keyboard-button-border-top-left-radius:4px !default;
+	$up-number-keyboard-button-border-top-right-radius:4px !default;
+	$up-number-keyboard-button-border-bottom-left-radius:4px !default;
+	$up-number-keyboard-button-border-bottom-right-radius:4px !default;
+	$up-number-keyboard-button-height: 90rpx!default;
+	$up-number-keyboard-button-background-color:#FFFFFF !default;
+	$up-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
+	$up-number-keyboard-text-font-size:20px !default;
+	$up-number-keyboard-text-font-weight:500 !default;
+	$up-number-keyboard-text-color:$up-main-color !default;
+	$up-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
+	$up-number-keyboard-up-hover-class-background-color: #BBBCC6 !default;
+
+	.up-keyboard {
+		@include flex;
+		flex-direction: row;
+		justify-content: space-around;
+		background-color: $up-number-keyboard-background-color;
+		flex-wrap: wrap;
+		padding: $up-number-keyboard-padding;
+
+		&__button-wrapper {
+			box-shadow: $up-number-keyboard-button-box-shadow;
+			margin: $up-number-keyboard-button-margin;
+			border-top-left-radius: $up-number-keyboard-button-border-top-left-radius;
+			border-top-right-radius: $up-number-keyboard-button-border-top-right-radius;
+			border-bottom-left-radius: $up-number-keyboard-button-border-bottom-left-radius;
+			border-bottom-right-radius: $up-number-keyboard-button-border-bottom-right-radius;
+
+			&__button {
+				width: $up-number-keyboard-button-width;
+				height: $up-number-keyboard-button-height;
+				background-color: $up-number-keyboard-button-background-color;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+				border-top-left-radius: $up-number-keyboard-button-border-top-left-radius;
+				border-top-right-radius: $up-number-keyboard-button-border-top-right-radius;
+				border-bottom-left-radius: $up-number-keyboard-button-border-bottom-left-radius;
+				border-bottom-right-radius: $up-number-keyboard-button-border-bottom-right-radius;
+
+				&__text {
+					font-size: $up-number-keyboard-text-font-size;
+					font-weight: $up-number-keyboard-text-font-weight;
+					color: $up-number-keyboard-text-color;
+				}
+
+				&--gray {
+					background-color: $up-number-keyboard-gray-background-color;
+				}
+			}
+		}
+	}
+
+	.up-hover-class {
+		background-color: $up-number-keyboard-up-hover-class-background-color;
+	}
+</style>

package/components/up-overlay/overlay.js

@@ -0,0 +1,18 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/overlay.js
+ */
+export default {
+    // overlay组件
+    overlay: {
+        show: false,
+        zIndex: 10070,
+        duration: 300,
+        opacity: 0.5
+    }
+}

package/components/up-overlay/overlay.uts

@@ -0,0 +1,18 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-09-12 01:06:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 01:06:21
+ * @FilePath     : /uview-ultra/libs/config/props/overlay
+ */
+export default {
+    // overlay组件
+    overlay: {
+        show: false,
+        zIndex: 10070,
+        duration: 300,
+        opacity: 0.5
+    }
+} as UTSJSONObject

package/components/up-overlay/props.js

@@ -0,0 +1,26 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 是否显示遮罩
+        show: {
+            type: Boolean,
+            default: () => defProps.overlay.show
+        },
+        // 层级z-index
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.overlay.zIndex
+        },
+        // 遮罩的过渡时间，单位为ms
+        duration: {
+            type: [String, Number],
+            default: () => defProps.overlay.duration
+        },
+        // 不透明度值，当做rgba的第四个参数
+        opacity: {
+            type: [String, Number],
+            default: () => defProps.overlay.opacity
+        }
+    }
+})

package/components/up-overlay/props.uts

@@ -0,0 +1,28 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './overlay'
+let crtProp = defProps['overlay'] as UTSJSONObject
+
+export const propsOverlay = defineMixin({
+    props: {
+        // 是否显示遮罩
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 层级z-index
+        zIndex: {
+            type: [String, Number],
+            default: crtProp['zIndex']
+        },
+        // 遮罩的过渡时间，单位为ms
+        duration: {
+            type: [String, Number],
+            default: crtProp['duration']
+        },
+        // 不透明度值，当做rgba的第四个参数
+        opacity: {
+            type: [String, Number],
+            default: crtProp['opacity']
+        }
+    }
+})

package/components/up-overlay/up-overlay.uvue

@@ -0,0 +1,96 @@
+<template>
+	<up-transition
+	    :show="show"
+	    custom-class="up-overlay"
+	    :duration="duration"
+	    :custom-style="overlayStyle"
+	    @click="clickHandler"
+	>
+		<slot />
+	</up-transition>
+</template>
+
+<script setup lang="uts">
+	import { computed } from 'vue'
+	import defProps from './overlay.uts'
+	import { addStyle, deepMerge } from '../../libs/function/index'
+	/**
+	 * overlay 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://ijry.github.io/uview-plus/components/overlay.html
+	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
+	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
+	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
+	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击遮罩发送事件
+	 * @example <up-overlay :show="show" @click="show = false"></up-overlay>
+	 */
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-overlay'
+	})
+
+	const props = defineProps({
+		// 是否显示遮罩
+		show: {
+			type: Boolean,
+			default: defProps.getBoolean('overlay.show')
+		},
+		// 层级z-index
+		zIndex: {
+			type: [String, Number],
+			default: defProps.getNumber('overlay.zIndex')
+		},
+		// 遮罩的过渡时间，单位为ms
+		duration: {
+			type: [String, Number],
+			default: defProps.getNumber('overlay.duration')
+		},
+		// 不透明度值，当做rgba的第四个参数
+		opacity: {
+			type: [String, Number],
+			default: defProps.getNumber('overlay.opacity')
+		},
+		customStyle: {
+			type: [Object, String],
+			default: () => ({})
+		}
+	})
+
+	const emit = defineEmits(['click'])
+
+	const overlayStyle = computed((): UTSJSONObject => {
+		const style = {
+			position: 'fixed',
+			top: 0,
+			left: 0,
+			right: 0,
+			zIndex: props.zIndex,
+			bottom: 0,
+			'background-color': `rgba(0, 0, 0, ${props.opacity})`
+		}
+		return deepMerge(style, addStyle(props.customStyle))
+	})
+
+	const clickHandler = (): void => {
+		emit('click')
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+     $up-overlay-top:0 !default;
+     $up-overlay-left:0 !default;
+     $up-overlay-width:100% !default;
+     $up-overlay-height:100% !default;
+     $up-overlay-background-color:rgba(0, 0, 0, .7) !default;
+	.up-overlay {
+		position: fixed;
+		top:$up-overlay-top;
+		left:$up-overlay-left;
+		width: $up-overlay-width;
+		height:$up-overlay-height;
+		background-color:$up-overlay-background-color;
+	}
+</style>