fix(ui): 日期占位遮挡改用普通 CSS 规则,不再依赖 Tailwind 任意变体
上一版用 `[&:not(:focus)::-webkit-datetime-edit]:text-transparent` 遮挡 浏览器自带的格式提示,但实际渲染里出现「选择日期」与「yyyy / mm / 日」 重叠——遮罩没生效。 排查过程: - 该规则在 dev 与 build 产物里都存在,dev 环境下 Chrome 与 Edge 均正常 - 用不含项目 CSS 的最小页面做隔离测试:Edge 的基线确实显示 「yyyy / mm / 日」(与反馈截图一致),且三种写法在 Edge 下都有效 - 结论:问题不在规则本身,而在这条规则依赖 Tailwind 扫描器从模板 字符串里提取类名,在 HMR / 增量构建时可能漏掉,属于不可靠的写法 修复:改在 style.css 里写普通 CSS,类名 date-field--blank。 - 刻意放在 @layer 之外:utilities 层优先级高于 components 层, 放进层里会被 text-slate-700 这类工具类盖掉 - 同时覆盖输入框自身与各分段伪元素,避免不同 Chromium 版本 着色位置不一致 - 仍保持「只在未聚焦时遮挡」,否则编辑时看不见正在输入的数字 验证:构建产物含全部 6 条规则;用 preview 起生产构建,Chrome 与 Edge 下字段均只显示「选择日期」。单元测试 485 个、E2E 25 个通过。
This commit is contained in:
@@ -68,16 +68,12 @@ describe('DatePicker 空值占位', () => {
|
||||
expect(mountPicker('2026-10-20').text()).not.toContain('选择日期')
|
||||
})
|
||||
|
||||
it('空值时遮住浏览器自带的格式提示(yyyy/mm/日)', () => {
|
||||
const classes = mountPicker(null).find('input').classes().join(' ')
|
||||
expect(classes).toContain('::-webkit-datetime-edit')
|
||||
// 只在未聚焦时透明,否则聚焦后看不见正在编辑的数字
|
||||
expect(classes).toContain(':not(:focus)')
|
||||
it('空值时给输入框加上遮罩类(遮住 yyyy/mm/日)', () => {
|
||||
expect(mountPicker(null).find('input').classes()).toContain('date-field--blank')
|
||||
})
|
||||
|
||||
it('有值时不做任何遮挡', () => {
|
||||
const classes = mountPicker('2026-10-20').find('input').classes().join(' ')
|
||||
expect(classes).not.toContain('::-webkit-datetime-edit')
|
||||
it('有值时不加遮罩类', () => {
|
||||
expect(mountPicker('2026-10-20').find('input').classes()).not.toContain('date-field--blank')
|
||||
})
|
||||
|
||||
it('占位层不拦截鼠标事件(点击仍能唤起原生选择器)', () => {
|
||||
|
||||
@@ -33,11 +33,7 @@ function hideNativePlaceholder(): boolean {
|
||||
<input
|
||||
type="date"
|
||||
class="peer w-full rounded-md border border-slate-300 px-2.5 py-1.5 text-sm text-slate-700 outline-none focus:border-sky-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:focus:border-sky-600"
|
||||
:class="
|
||||
hideNativePlaceholder()
|
||||
? '[&:not(:focus)::-webkit-datetime-edit]:text-transparent'
|
||||
: ''
|
||||
"
|
||||
:class="{ 'date-field--blank': hideNativePlaceholder() }"
|
||||
:value="modelValue ?? ''"
|
||||
:aria-label="label ?? '截止日期'"
|
||||
@change="onChange"
|
||||
|
||||
Reference in New Issue
Block a user