vue 切换主题（换肤）功能

时间：2024-01-27 18:31:13

一：先写好两个css样式放在static文件夹中

二：在index.html中添加css link链接

<link rel="stylesheet" id="style" href="static/css/one.css">

 

 

 三：在App.vue中的 created中添加默认执行方法

created() {
  var style = localStorage.getItem("style");
  if(style){
    document.getElementById('style').setAttribute("href",style); //实现将主题保存在内存中刷新浏览器不改变
  }
}

 

 

 四：最后在需要的页面写上切换主题功能

<template>
<div>
  <div class="box-body">主题切换</div>
  <button @click="change(1)">切换到紫色主题</button>
  <button @click="change(2)">切换到蓝色主题</button>
</div>
</template>
<script>
    export default {
        name: "ThemeBody",
      data(){
        return{
          body_now:null
        }
      },
        methods:{
          change:function (type) {
            if(type == 1){
              document.getElementById('style').setAttribute("href","../static/css/one.css");
              localStorage.setItem("style","../static/css/one.css");
            }else if(type == 2){
              document.getElementById('style').setAttribute("href","../static/css/two.css");
              localStorage.setItem("style","../static/css/two.css");
            }
          }
        }
    }
</script>

<style scoped>

</style>

 

 完成效果

 

 

 

相关文章