如何在 vueJS 中动态更改样式模式

Question

我想创建可以改变点击按钮样式的功能。

在我的情况下，我使用 sass/scss 作为我的样式..

例如，我有 3 种不同的样式，default.scss、dark.scss 和 system.scss.. dark.scss 的代码是这样的

// Mode
$mode: dark;

// Initialize
@import "init";

// Components
@import "./core/components/components";
@import "components/components";

// Layout
@import "layout/layout";
@import "./core/layout/docs/layout";

在 app.vue 上

<style lang="scss">
@import "assets/sass/dark";
</style>

并在我的 test.vue 上创建按钮来更改样式

<v-btn @click="light" />
<v-btn @click="dark" />

是否可以通过单击按钮更改样式？

我该怎么做，例如将文件app.vue中的@import "assets/sass/dark";更改为@import "assets/sass/light";？

Answer 1

我用这个解决了这个问题..

1. 将模式存储到localstorage 并重新加载页面

const changeMode = (mode) => {
  localStorage.setItem("mode", mode);
  window.location.reload();
};

1. 检查localstorage 并加载样式

if (localStorage.getItem("mode") && localStorage.getItem("mode") == "dark") {
  require("@/assets/sass/plugins.dark.scss");
  require("@/assets/sass/style.dark.scss");
} else {
  require("@/assets/sass/plugins.scss");
  require("@/assets/sass/style.scss");
}

Answer 2

你可以使用 sass 有条件地导入

<style lang="scss">
.dark-mode {
    @import "assets/sass/dark";
}
.light-mode {
    @import "assets/sass/light";
}
</style>

绑定你的App主类div

<div :class="selectedMode">
    
</div>

有很多方法可以处理selectedMode，但我认为你应该已经知道该怎么做了