【实用】vue+css码一个磨砂玻璃面板&黑白主题切换的Demo基于Vue+css3的组件，模拟了win10磨砂玻璃界面

前言

基于Vue+css3的组件，模拟了win10磨砂玻璃界面风格。此外，该demo支持黑白两种主题模式的切换功能，允许用户根据自己的喜好或视觉需求来选择适合的主题,jym代码粗糙的地方，等你们来完善！

在线demo预览

注意：可以查看demo详情,效果更好！

主题色切换方法

1.初始化 themeIndex

themeIndex:'light',

2.html标签添加:data-theme="themeIndex"

<div class="easy-layout-body" :data-theme="themeIndex">
   <!-- 面板内容 -->
</div>

3.黑白主题样式定义

// 浅色主题
.easy-layout-body[data-theme='light']{ 
    --background: rgba(237, 241, 244,0.8);
    --text-color: #07080a;  
    --hint-color: #7b7f82; 
    --card-border-color:rgba(255, 255, 255, 0.5);
}
// 黑色主题
.easy-layout-body[data-theme='dark']{ 
    --background: rgba(20, 26, 41,0.6);
    --text-color: #e2e1e7; 
    --hint-color: #939397; 
    --card-border-color:rgba(42, 54, 73, 0.5);
}

4.切换主题的点击事件

注意：我这里写的比较简单，只是切换的时候给themeIndex赋值

<a v-show="themeIndex=='dark'" @click="themeIndex='light'">浅色主题</a>
<a v-show="themeIndex=='light'" @click="themeIndex='dark'">深色主题</a>

通过localStorage存储用户的主题

这个函数允许用户通过改变 <body> 元素的类名来切换网页的主题，同时利用 localStorage 存储用户的主题偏好，以便在用户重新访问网站时能够保持相同的主题。

// 切换皮肤 
changeTheme(type) {   
  const currentThemeColor= localStorage.getItem('data-theme') ? localStorage.getItem('data-theme') : 'themeIndex'; 
  if (currentThemeColor!== type) {
    document.body.className = type;
    localStorage.setItem('data-theme',type) 
  } 
}

/** watch 周期函数 */
watch: {  
    // 监听 themeIndex 的变化   
    themeIndex(newVal,oldVal){
      document.documentElement.setAttribute('data-theme',newVal);
    }
}