Quellcode durchsuchen

feat(cl-input): 添加数字输入精度控制功能

- 新增 precision 属性用于控制数字类型输入框的小数位数
- 实现输入值的精度校验与格式化逻辑
- 添加超出精度限制时的样式提示
- 支持深色模式下的精度超限颜色适配
- 在 demo 页面中增加精度控制示例
haibiao_gu vor 4 Monaten
Ursprung
Commit
60d46f82ef

+ 12 - 0
pages/demo/form/input.uvue

@@ -59,6 +59,16 @@
 				</cl-input>
 			</demo-item>
 
+			<demo-item :label="t('保留精度')">
+				<demo-tips>当 type 为 number 时,可设置 precision 属性来保留精度</demo-tips>
+
+				<cl-list-item :label="t('精度')">
+					<cl-input-number v-model="precision"></cl-input-number>
+				</cl-list-item>
+
+				<cl-input type="number" :precision="precision"></cl-input>
+			</demo-item>
+
 			<demo-item :label="t('自定义')">
 				<cl-input
 					v-model="content"
@@ -128,6 +138,8 @@ const isRightIcon = ref(false);
 const isDisabled = ref(false);
 const isColor = ref(false);
 
+const precision = ref<number>(2);
+
 function toAlert() {
 	ui.showToast({
 		message: "Hello"

+ 38 - 2
uni_modules/cool-ui/components/cl-input/cl-input.uvue

@@ -8,7 +8,7 @@
 				'cl-input--border': border,
 				'cl-input--focus': isFocus,
 				'cl-input--disabled': isDisabled,
-				'cl-input--error': isError
+				'cl-input--error': isError,
 			}
 		]"
 		@tap="onTap"
@@ -28,7 +28,8 @@
 			:class="[
 				{
 					'is-disabled': isDisabled,
-					'is-dark': isDark
+					'is-dark': isDark,
+					'is-exceed': isExceed
 				},
 				ptClassName
 			]"
@@ -189,6 +190,11 @@ const props = defineProps({
 	holdKeyboard: {
 		type: Boolean,
 		default: false
+	},
+	// 保留精度
+	precision: {
+		type: Number,
+		default: 0
 	}
 });
 
@@ -256,6 +262,17 @@ const showClear = computed(() => {
 // 是否显示密码
 const isPassword = ref(props.password);
 
+// 是否超出限制
+const isExceed = computed(() => {
+	// 检查数字精度是否超出限制
+	if (props.type == "number" && props.precision >= 0 && value.value != "") {
+		const parts = value.value.split(".");
+		return parts.length > 1 && parts[1].length > props.precision;
+	} else {
+		return false;
+	}
+});
+
 // 切换密码显示状态
 function showPassword() {
 	isPassword.value = !isPassword.value;
@@ -271,6 +288,17 @@ function onFocus(e: UniInputFocusEvent) {
 function onBlur(e: UniInputBlurEvent) {
 	emit("blur", e);
 
+	// 处理数字精度
+	if (props.type == "number" && props.precision > 0 && value.value != "") {
+		const numValue = parseFloat(value.value);
+		if (!isNaN(numValue)) {
+			const formattedValue = numValue.toFixed(props.precision);
+			value.value = formattedValue;
+			emit("update:modelValue", formattedValue);
+			emit("change", formattedValue);
+		}
+	}
+
 	setTimeout(() => {
 		isFocus.value = false;
 	}, 0);
@@ -367,6 +395,14 @@ defineExpose({
 		&.is-dark {
 			@apply text-white;
 		}
+
+		&.is-exceed {
+			@apply text-red-500;
+		}
+
+		&.is-exceed.is-dark {
+			@apply text-red-400;
+		}
 	}
 
 	&__icon {

+ 1 - 0
uni_modules/cool-ui/components/cl-input/props.ts

@@ -29,4 +29,5 @@ export type ClInputProps = {
 	adjustPosition?: boolean;
 	maxlength?: number;
 	holdKeyboard?: boolean;
+	precision?: number;
 };