新手养成流---前端PC端上架浙里办单点登录，埋点及适老化（一）

以下内容仅介绍PC端浙里办上架适老化内容，单点登录及埋点，请注意是PC端，PC端，PC端！

因内容量较多，本文只介绍适老化如何操作，莫急，莫急，单点登录及埋点后续就会更新，保证事无巨细，贯彻浙里办兜底服务宗旨

首先，说明一点，上架不是咱前端一个人的事，所以注意配合，出了问题也不要过多怀疑是自己的问题，一切皆有可能，好了，说一点前期的准备工作吧，为了你可以顺利上架，首先嘞，你要先有这些（没有的话找你们产品经理或者项目负责人要），这里我们介绍的是适老化，所以先看适老化相关的文件

至少要有这两个文件作为参考，还有就是在项目基本功能都开发完毕了，下面正式进入适老化内容：

1 触发适老化按钮，我们想要开启适老化，必定要有触发条件，并且要设置最少两种状态，正常模式和适老化模式，这个按钮的切换就是用来切换这两种模式的。

按钮一般放在头部组件里，可以按具体情况调整，下面写切换状态逻辑，展示为个人写法，仅供参考。

changeElder() {
      let value;
      if (this.$store.getters.uiStyle === "elder") {
        value = "nomarl"; //正常模式
        localStorage.setItem("mode", "");

        $("body").removeClass("zjzwOLD");
        _delCookiemode();
      } else {
        value = "elder";  //适老化模式
        localStorage.setItem("mode", "2");
        $("body").addClass("zjzwOLD");
        _setCookiemode();
      }
      this.$store.dispatch("settings/SetUIStyle", value);
    }

因为点击适老化后，需要切换页面等操作，所以需要在store仓库中存储，并做持久化处理。

2 可以切换状态之后，需要新建一个相应的适老化样式文件，当然，也可以在具体的页面加上适老化的类名处理，效果差不太多，为了统一处理，我们可以新建适老化样式文件elder.scss(命名自定义即可)

3 让样式文件在全局生效，状态可以切换为适老化模式了，样式文件也有了，最后一步，让样式文件与状态相关联即可。因为是要在全部样式生效，所以可以在我们的App.vue文件去设置全局适老化的类名

获取状态，设置类名，这样就可以在全局生效了

另外一点是，我们在之前写过mode字段在本地和cookie里，所以在App.vue里也要再写一段判断mode的代码（**这一点容易忽略，但是是浙里办提供方法，非常建议加上**）

getCookieMode((res) => {
      if (res.mode == 2) {
        // 适老化
        let value = "elder";
        this.$store.dispatch("settings/SetUIStyle", value);
        localStorage.setItem("mode", "2");
        $("body").addClass("zjzwOLD");
      } else {
        let value = "normal";
        this.$store.dispatch("settings/SetUIStyle", value);
        localStorage.setItem("mode", "");
        $("body").removeClass("zjzwOLD");
      }
    });

最后的最后就可以检查了，如果切换成功就会切换类名，自由设置适老化模式了。

好了，到这里就结束了，适老化里具体的样式怎么设置可以参考开头提到的文件，毕竟每个项目都是不同的，只要按照要求设置即可。

码字不易，路过留痕嗷~

新手养成流--前端部署服务器https://blog.csdn.net/chl13218996367/article/details/136564991