feat(comments): 评论区有内容时自动调淡背景图透明度
与 tiptap 编辑器保持一致:无内容时 60%,有内容或聚焦时淡出到 10%。content_md 由 oninput 实时维护,输入即触发重渲染。
This commit is contained in:
parent
fe22d6dad8
commit
5fd883d7a1
@ -155,10 +155,21 @@ pub fn CommentForm(post_id: i32, parent_id: Option<i64>, parent_indent: Option<i
|
|||||||
disabled: submitting(),
|
disabled: submitting(),
|
||||||
oninput: move |e| content_md.set(e.value()),
|
oninput: move |e| content_md.set(e.value()),
|
||||||
}
|
}
|
||||||
img {
|
{
|
||||||
src: "/images/xiantiaoxiaogou_input_bg.webp",
|
// 无内容时半透明(60%);有内容或聚焦时淡出(10%)。
|
||||||
alt: "",
|
// content_md 由 oninput 实时维护,输入即触发重渲染。
|
||||||
class: "absolute bottom-1.5 right-1.5 w-24 pointer-events-none opacity-60 peer-focus:opacity-10 transition-opacity duration-300 z-0",
|
let bg_opacity = if content_md().trim().is_empty() {
|
||||||
|
"opacity-60"
|
||||||
|
} else {
|
||||||
|
"opacity-10"
|
||||||
|
};
|
||||||
|
rsx! {
|
||||||
|
img {
|
||||||
|
src: "/images/xiantiaoxiaogou_input_bg.webp",
|
||||||
|
alt: "",
|
||||||
|
class: "absolute bottom-1.5 right-1.5 w-24 pointer-events-none peer-focus:opacity-10 transition-opacity duration-300 z-0 {bg_opacity}",
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user