vue实现换肤功能

2024-04-02 19:04:59 503人浏览薄情痞子

摘要

公司项目要实现Vue项目换肤功能，要求，考虑到最节省时间的就是写两套CSS，一套light.css，一套dark.css，然后切换css 一、实现思路切换选中的皮肤状态（light

公司项目要实现Vue项目换肤功能，要求，考虑到最节省时间的就是写两套CSS，一套light.css，一套dark.css，然后切换css

一、实现思路

切换选中的皮肤状态（light，或者dark）存储在sessionStorage中，监听sessionStorage数据变化，切换index.html中引入的css文件

二、实现过程

1、在main.vue添加：

 <p style="display: inline-block;"> 切换主题：</p>
  <RadioGroup v-model="theme" @on-change="changeTheme">
        <Radio label="light"></Radio>
        <Radio label="dark"></Radio>
    </RadioGroup>
    
 //methods:
   changeTheme(){
 //localStorage.setItem('themeColor',this.theme); 
 this.resetSetItem('themeColor', this.theme);
   },

2、main.js添加：（参考网上）

Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'themeColor') {

      // 创建一个StorageEvent事件
      var newStorageEvent = document.createEvent('StorageEvent');
      const storage = {
          setItem: function (k, val) {
              sessionStorage.setItem(k, val);

              // 初始化创建的事件
              newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);

              // 派发对象
              window.dispatchEvent(newStorageEvent)
          }
      }
      return storage.setItem(key, newVal);
  }
}

3.index.html 添加

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  //添加默认css
  <link rel="stylesheet" href="./static/css/dark.css">
  <title>xxx</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

<script>
//在js添加默认引入的dark.css,如果不引入，ivew自带的样式会覆盖在html中引入的dark.css,所以需要在js重新引入，用来覆盖ivew的默认样式
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = "./static/css/dark.css";
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
  //监听sessionStorage切换主题
  window.addEventListener('setItem', () => {
    var themeColor = sessionStorage.getItem('themeColor');
    let url = "./static/css/" + themeColor + ".css"
    changeStyles(url);
  })

  function changeStyles(url) {
    var links = document.getElementsByTagName("link")
    console.log(links)
    //替换之前引入的css
    if (links.length != 0) {
      for (var i = 0; i < links.length; i++) {
        // links[i].parentnode.removeChild(links[i]);
        links[i].href = url
      }
    }
    var links = document.getElementsByTagName("link")
    //console.log(links)

  }

</script>

4、效果

三、总结

1、在实现的过程中，发现localStorage数据监听不到，在网上的看到数据存储在sessionStorage中
2、css执行顺序需要注意：页面先渲染index.html中head标签引入的dark.css，main.js引入的iview.css后渲染，因此会覆盖head标签引入的dark.css，所以需要在js标签中重新引入一遍。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue实现换肤功能

本文链接: https://www.lsjlt.com/news/153214.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341