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

Posted 2023-02-22

【中文标题】如何在 vueJS 中动态更改样式模式

【英文标题】：How to dynamically change style mode in vueJS

【发布时间】：2021-12-26 16:12:33

【问题描述】：

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

在我的情况下，我使用 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";？

【问题讨论】：

如果你使用 webpack，你可以在一个条件下使用require。

【参考方案1】：

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

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

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

检查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");

【参考方案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，但我认为你应该已经知道该怎么做了

【讨论】：

问题出在那个文件 scss 上，我导入了另一个文件 scss。在我的情况下，我只需要更改 $mode: dark/light..

因为我不能在前端做，所以我创建了 2 个不同的文件基础 scss..

不太明白但是……好的