首页 前端知识 vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解

vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解

2024-03-24 22:03:59 前端知识 前端哥 364 400 我要收藏

方式1:定义全局的CSS变量

App.vue:

<style>
/* 定义全局的css变量 */
:root {
  /* 背景色 */
  --theme_bg_color: red;
  /* 按钮颜色 */
  --theme_button_color: yellowgreen;
}
</style>
​

demo.vue(css):

<style scoped>
 /* 使用全局的css变量设置颜色 */
.myButton {
  background: var(--theme_bg_color);
}
.myDiv {
  background: var(--theme_button_color);
  width: 200px;
  height: 200px;
}
</style>
​

demo.vue(html):

    <h3>换肤 / 切换样式主题 方式1:</h3>
    <button @click="changeTheme('Moccasin')">换肤为Moccasin</button>
    <button @click="changeTheme('#1E90FF')">换肤为#1E90FF</button>
    <button @click="changeTheme('#00FF7F')">换肤为#00FF7F</button>
    <button @click="changeTheme('DeepPink')">换肤为DeepPink</button>
    <button class="myButton">我是一个可以换肤的按钮</button>
    <div class="myDiv">我是一个可以换肤的div</div>
​

demo.vue(js):

<script>
export default {
  setup() {
    // 切换主题方式1:修改全局CSS变量
    let changeTheme = (color) => {
      document.documentElement.style.setProperty("--theme_bg_color", color);
      document.documentElement.style.setProperty("--theme_button_color", color);
    };
    return { changeTheme  };
  },
};
</script>
​

效果:

image.png

方式2:切换已定义好的css文件

Public/css/theme_1.css:

.myButton2{
  background: Moccasin;
}
.myDiv2 {
  background: Moccasin;
}
​

image.png

App.vue:

<script>
import { onMounted } from "vue";
export default {
  name: "App",
  components: {},
  setup() {
    onMounted(() => {
      console.log("App.vue ---- onMounted");
​
      //方式2(创建link标签默认引入 ./css/theme_1.css 主题样式文件)
      let link = document.createElement("link");
      link.type = "text/css";
      link.id = "theme";
      link.rel = "stylesheet";
      link.href = "./css/theme_1.css";
      document.getElementsByTagName("head")[0].appendChild(link);
    });
​
    return {};
  },
};
</script>
​

demo.vue(html):

<h3>换肤 / 切换样式主题 方式2:</h3>
<button @click="changeTheme2(1)">换肤为Moccasin</button>
<button @click="changeTheme2(2)">换肤为#1E90FF</button>
<button @click="changeTheme2(3)">换肤为#00FF7F</button>
<button @click="changeTheme2(4)">换肤为DeepPink</button>
<button class="myButton2">我是一个可以换肤的按钮</button>
<div class="myDiv2">我是一个可以换肤的div</div>
​

demo.vue(js):

<script>
export default {
  setup() {
    // 切换主题方式2:切换已定义好的css文件
    let changeTheme2 = (type) => {
      document.getElementById("theme").href = `./css/theme_${type}.css`;
    };
    return { changeTheme2  };
  },
};
</script>
​

效果:

image.png

方式3:切换顶级CSS类名 (需使用css处理器,如sass、less等)

src/assets/css/theme.less:

/* 预设四种主题 */
.theme_1 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}
​
.theme_2 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}
​
.theme_3 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}
​
.theme_4 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}
​
​

image.png

main.js:

// 方式3:需要先引入全局主题样式文件 
import "./assets/css/theme.less";
​

App.vue:

<script>
import { onMounted } from "vue";
export default {
  name: "App",
  components: {},
  setup() {
    onMounted(() => {
      console.log("App.vue ---- onMounted");
        
     //方式3(设置顶层div的class类名)
      document.getElementById("app").setAttribute("class", "theme_1");
    });
    return {};
  },
};
</script>
​

demo.vue(html):

<h3>换肤 / 切换样式主题 方式3:</h3>
<button @click="changeTheme3(1)">换肤为Moccasin</button>
<button @click="changeTheme3(2)">换肤为#1E90FF</button>
<button @click="changeTheme3(3)">换肤为#00FF7F</button>
<button @click="changeTheme3(4)">换肤为DeepPink</button>
<button class="myButton3">我是一个可以换肤的按钮</button>
<div class="myDiv3">我是一个可以换肤的div</div>
​

demo.vue(js):

<script>
export default {
  setup() {
   // 切换主题方式3:切换顶级CSS类名 (需使用处理器)
    let changeTheme3 = (type) => {
      document.getElementById("app").setAttribute("class", `theme_${type}`);
    };
​
    return { changeTheme3  };
  },
};
</script>
​

效果:

image.png

文章来源: vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(纯干huo)_vue 换肤_Jason Ma丶丶前端工程师的博客-CSDN博客

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4082.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!