浏览代码

修复 cl-input 在 鸿蒙 端不弹出键盘问题

icssoa 4 月之前
父节点
当前提交
0185e2e4ee
共有 1 个文件被更改,包括 22 次插入18 次删除
  1. 22 18
      uni_modules/cool-ui/components/cl-input/cl-input.uvue

+ 22 - 18
uni_modules/cool-ui/components/cl-input/cl-input.uvue

@@ -11,9 +11,8 @@
 				'cl-input--error': isError
 			}
 		]"
-		@tap="onTap"
 	>
-		<slot name="prepend"></slot>
+		<slot name="prepend"> </slot>
 
 		<view class="cl-input__icon !pl-0 pr-[12rpx]" v-if="prefixIcon">
 			<cl-icon
@@ -39,9 +38,10 @@
 			:disabled="readonly ?? isDisabled"
 			:type="type"
 			:password="isPassword"
-			:focus="isFocus"
+			:focus="isFocusing"
 			:placeholder="placeholder"
 			:placeholder-class="`text-surface-400 ${placeholderClass}`"
+			:placeholder-style="placeholderStyle"
 			:maxlength="maxlength"
 			:cursor-spacing="cursorSpacing"
 			:confirm-type="confirmType"
@@ -63,7 +63,7 @@
 			></cl-icon>
 		</view>
 
-		<view class="cl-input__icon" @tap.stop="clear" v-if="showClear">
+		<view class="cl-input__icon" @tap="clear" v-if="showClear">
 			<cl-icon
 				name="close-circle-fill"
 				:size="32"
@@ -86,10 +86,10 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch, type PropType } from "vue";
 import type { ClInputType, PassThroughProps } from "../../types";
-import { isDark, parseClass, parsePt } from "@/cool";
 import type { ClIconProps } from "../cl-icon/props";
-import { t } from "@/locale";
 import { useForm, useFormItem, useSize } from "../../hooks";
+import { isDark, parseClass, parsePt } from "@/cool";
+import { t } from "@/locale";
 
 defineOptions({
 	name: "cl-input"
@@ -152,6 +152,11 @@ const props = defineProps({
 		type: String,
 		default: ""
 	},
+	// 占位符样式
+	placeholderStyle: {
+		type: String,
+		default: ""
+	},
 	// 是否显示边框
 	border: {
 		type: Boolean,
@@ -249,12 +254,20 @@ const inputStyle = computed(() => {
 	return style;
 });
 
+// 占位符样式
+const placeholderStyle = computed(() => {
+	return `font-size: 26rpx; ${props.placeholderStyle}`;
+});
+
 // 绑定值
 const value = ref<string>("");
 
-// 是否聚焦
+// 是否聚焦(样式作用)
 const isFocus = ref<boolean>(props.autofocus);
 
+// 是否聚焦(输入框作用)
+const isFocusing = ref<boolean>(props.autofocus);
+
 // 是否显示清除按钮
 const showClear = computed(() => {
 	return props.clearable && value.value != "";
@@ -330,22 +343,13 @@ function onKeyboardheightchange(e: UniInputKeyboardHeightChangeEvent) {
 	emit("keyboardheightchange", e);
 }
 
-// 点击事件
-function onTap() {
-	if (isDisabled.value) {
-		return;
-	}
-
-	isFocus.value = true;
-}
-
 // 聚焦方法
 function focus() {
 	setTimeout(() => {
-		isFocus.value = false;
+		isFocusing.value = false;
 
 		nextTick(() => {
-			isFocus.value = true;
+			isFocusing.value = true;
 		});
 	}, 0);
 }