Selaa lähdekoodia

解决 cl-input 事件丢失问题

icssoa 7 kuukautta sitten
vanhempi
commit
1be694b124

+ 1 - 1
pages/demo/form/input-number.uvue

@@ -78,7 +78,7 @@ import { t } from "@/locale";
 const num = ref(0);
 
 const isStep = ref(false);
-const isMin = ref(false);
+const isMin = ref(true);
 const isMax = ref(false);
 const isDigit = ref(false);
 const isInput = ref(true);

+ 2 - 2
pages/demo/form/input-otp.uvue

@@ -2,11 +2,11 @@
 	<cl-page>
 		<view class="p-3">
 			<demo-item :label="t('基础用法')">
-				<cl-input-otp></cl-input-otp>
+				<cl-input-otp @done="toDone"></cl-input-otp>
 			</demo-item>
 
 			<demo-item :label="t('自动聚焦')">
-				<cl-input-otp autofocus></cl-input-otp>
+				<cl-input-otp autofocus @done="toDone"></cl-input-otp>
 			</demo-item>
 
 			<demo-item :label="t('自定义')">

+ 5 - 5
uni_modules/cool-ui/components/cl-input-number/cl-input-number.uvue

@@ -52,7 +52,7 @@
 						className: `text-center ${pt.value?.input?.className}`
 					}
 				}"
-				@change="onInput"
+				@blur="onBlur"
 			></cl-input>
 		</view>
 
@@ -269,14 +269,14 @@ function onMinus() {
 }
 
 /**
- * 输入框输入处理函数
+ * 输入框失去焦点处理函数
  * @param val 输入的字符串值
  */
-function onInput(val: string) {
-	if (val == "") {
+function onBlur(e: UniInputBlurEvent) {
+	if (e.detail.value == "") {
 		value.value = 0;
 	} else {
-		value.value = parseFloat(val);
+		value.value = parseFloat(e.detail.value);
 	}
 
 	update();

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

@@ -21,7 +21,7 @@
 				:maxlength="length"
 				:hold-keyboard="false"
 				:clearable="false"
-				@input="onInput"
+				@change="onChange"
 				@focus="animateCursor(true)"
 				@blur="animateCursor(true)"
 			></cl-input>
@@ -174,7 +174,7 @@ watch(
  * 输入事件处理
  * @param val 输入值
  */
-function onInput(val: string) {
+function onChange(val: string) {
 	// 更新绑定值
 	emit("update:modelValue", val);
 

+ 12 - 10
uni_modules/cool-ui/components/cl-input/cl-input.uvue

@@ -262,14 +262,14 @@ function showPassword() {
 }
 
 // 获取焦点事件
-function onFocus() {
+function onFocus(e: UniInputFocusEvent) {
 	isFocus.value = true;
-	emit("focus");
+	emit("focus", e);
 }
 
 // 失去焦点事件
-function onBlur() {
-	emit("blur");
+function onBlur(e: UniInputBlurEvent) {
+	emit("blur", e);
 
 	setTimeout(() => {
 		isFocus.value = false;
@@ -278,14 +278,16 @@ function onBlur() {
 
 // 输入事件
 function onInput(e: UniInputEvent) {
-	const val = e.detail.value;
-	value.value = val;
+	const v1 = e.detail.value;
+	const v2 = value.value;
 
-	emit("update:modelValue", val);
-	emit("input", val);
+	value.value = v1;
 
-	if (val != value.value) {
-		emit("change", val);
+	emit("update:modelValue", v1);
+	emit("input", e);
+
+	if (v1 != v2) {
+		emit("change", v1);
 	}
 }
 

+ 14 - 8
uni_modules/cool-ui/components/cl-textarea/cl-textarea.uvue

@@ -268,14 +268,14 @@ const value = ref(props.modelValue);
 const isFocus = ref<boolean>(props.autofocus);
 
 // 获取焦点事件
-function onFocus() {
+function onFocus(e: UniTextareaFocusEvent) {
 	isFocus.value = true;
-	emit("focus");
+	emit("focus", e);
 }
 
 // 失去焦点事件
-function onBlur() {
-	emit("blur");
+function onBlur(e: UniTextareaBlurEvent) {
+	emit("blur", e);
 
 	setTimeout(() => {
 		isFocus.value = false;
@@ -284,11 +284,17 @@ function onBlur() {
 
 // 输入事件
 function onInput(e: UniInputEvent) {
-	const val = e.detail.value;
-	value.value = val;
+	const v1 = e.detail.value;
+	const v2 = value.value;
 
-	emit("update:modelValue", val);
-	emit("change", val);
+	value.value = v1;
+
+	emit("update:modelValue", v1);
+	emit("input", e);
+
+	if (v1 != v2) {
+		emit("change", v1);
+	}
 }
 
 // 点击确认按钮事件