表单项添加红色边框的错误提示

This commit is contained in:
icssoa
2025-08-11 16:25:25 +08:00
parent 81fa708e0a
commit a5fde75b8a
7 changed files with 76 additions and 18 deletions

View File

@@ -7,7 +7,8 @@
'is-dark': isDark,
'cl-textarea--border': border,
'cl-textarea--focus': isFocus,
'cl-textarea--disabled': isDisabled
'cl-textarea--disabled': isDisabled,
'cl-textarea--error': isError
}
]"
@tap="onTap"
@@ -63,7 +64,7 @@ import { parsePt, parseRpx } from "@/cool";
import type { PassThroughProps } from "../../types";
import { isDark } from "@/cool";
import { t } from "@/locale";
import { useForm } from "../../hooks";
import { useForm, useFormItem } from "../../hooks";
defineOptions({
name: "cl-textarea"
@@ -225,6 +226,9 @@ const emit = defineEmits([
// cl-form 上下文
const { disabled } = useForm();
// cl-form-item 上下文
const { isError } = useFormItem();
// 是否禁用
const isDisabled = computed(() => {
return disabled.value || props.disabled;
@@ -360,6 +364,10 @@ defineExpose({
@apply bg-surface-100 opacity-70;
}
&--error {
@apply border-red-500;
}
&.is-dark {
@apply bg-surface-800;