dioxus使用注意

jr-create(•̀⌄•́)

已于 2024-09-27 18:00:24 修改

阅读量766

点赞数 14

分类专栏： rust dioxus 文章标签： rust dioxus

于 2024-09-27 17:40:14 首次发布

本文链接：https://blog.csdn.net/weixin_45721882/article/details/142598997

版权

rust 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

dioxus

1 篇文章 0 订阅

订阅专栏

内容换行

在 Dioxus 中，换行通常遵循 HTML 的标准，你可以使用 <br> 标签来实现换行。在 Dioxus 的 RSX 宏中，你可以像这样使用它：

rsx!(
    div {
        "这是第一行文字"
        br {}
        "这是第二行文字"
    }
)

在上面的例子中，文本之间的 br 标签会在两个字符串之间创建一个换行。

如果你想要换行但不想使用 <br> 标签，你可以使用 CSS 来实现。例如，你可以给包含文本的元素添加一个 white-space: pre-wrap; 样式，这样元素就会保留换行符：

rsx!(
    div {
        style: "white-space: pre-wrap;",
        r#"
            这是第一行文字
            这是第二行文字
        "#
    }
)

在这个例子中，我们使用了 white-space: pre-wrap; 样式，它会保留文本中的换行符，并在必要时进行换行。

还有一种方法是使用 \n 来表示换行，但这通常需要结合 CSS 或其他 HTML 元素来实现可见的换行效果：

rsx!(
    div {
        style: "white-space: pre-line;",
        "这是第一行文字\n这是第二行文字"
    }
)

在这个例子中，white-space: pre-line; 样式会导致 \n 被转换为换行。

选择最适合你需求的方法来实现换行。如果你的文本内容是动态的，可能需要结合 CSS 来确保换行在不同的环境中都能正确显示。

单独的css对应单独的Element

要确保 main.css 文件中的样式只作用于 Blog.rs 中的 BlogElement，你可以采取以下几种方法之一：

使用特定的类名或ID：
为 BlogElement 定义一个独特的类名或ID，并在 main.css 中仅对该类名或ID应用样式。确保其他组件不使用这个类名或ID。

// 在 Blog.rs 中
fn BlogElement(cx: Scope) -> Element {
    cx.render(rsx! {
        div {
            class: "blog-post",
            // 博客内容...
        }
    })
}

/* 在 main.css 中 */
.blog-post {
    /* 样式规则 */
}

使用深度选择器：
如果你的样式需要穿透组件边界，你可以使用深度选择器（::v-deep 或 /deep/ 或 >>>，取决于浏览器支持）。这允许你在 Shadow DOM 或组件内部选择子元素。
```
/* 在 main.css 中 */
.blog-post ::v-deep .some-child-class {
    /* 样式规则 */
}
```
使用 CSS Modules：
CSS Modules 提供了一种将 CSS 封装到当前组件的方法。虽然 Dioxus 本身不直接支持 CSS Modules，但你可以通过手动实现类似的行为来达到目的。

使用内联样式：
将 main.css 的样式转换为内联样式，并直接在 BlogElement 中使用。

// 在 Blog.rs 中
fn BlogElement(cx: Scope) -> Element {
    let styles = include_str!("path/to/main.css").to_string();
    cx.render(rsx! {
        div {
            style: "{styles}",
            // 博客内容...
        }
    })
}

使用 Dioxus 的 use_style 宏：
如果你的 Dioxus 版本支持 use_style 宏，你可以在 BlogElement 组件中使用它来引入样式。

// 在 Blog.rs 中
use dioxus::prelude::*;

fn BlogElement(cx: Scope) -> Element {
    cx.use_style(|cx| {
        cx.include_css(include_str!("path/to/main.css"));
    });

    cx.render(rsx! {
        div {
            // 博客内容...
        }
    })
}

动态生成类名：
为 BlogElement 动态生成一个独特的类名，并在 main.css 中定义样式。这种方法需要确保类名的唯一性。

// 在 Blog.rs 中
use uuid::Uuid;

fn BlogElement(cx: Scope) -> Element {
    let class_name = Uuid::new_v4().to_string();
    cx.render(rsx! {
        div {
            class: "{class_name}",
            // 博客内容...
        }
    })
}

选择最适合你项目结构和需求的方法。如果你希望 main.css 中的样式只影响 BlogElement，建议使用第一种方法，通过类名或ID来限定样式的作用范围。

设置cookie

使用HtmlDocument，web_sys中记录，需要开启HtmlDocument features

![[Pasted image 20240927173011.png]]

let document = web_sys::window().unwrap().document().unwrap().dyn_into::<HtmlDocument>().unwrap();

let token = deserialized.token;

let cookie = format!("token={}; path=/; max-age=3600",token);
// set
document.set_cookie(&cookie).unwrap();
// get
let cookie_value = document.cookie();

设置localStorage

想要设置localStorage，需要开启 **"Storage","Window"** features

// 存储 token 到 localStorage
web_sys::window().unwrap().local_storage().unwrap().unwrap().set_item("token", token).unwrap();

点击按钮后，滚动到指定标签

use web_sys::window;

let window = window().expect("should have a Window");

let document = window.document().expect("window should have a Document");

let element = document.get_element_by_id(elementid).expect("不具有此元素");

element.scroll_into_view();