vue-pure-admin/src/layout/components/setting/index.vue

<template>
  <panel>
    <el-divider>界面显示</el-divider>
    <ul class="setting">
      <li>
        <span>灰色模式</span>
        <vxe-switch v-model="greyVal" open-label="开" close-label="关" @change="greyChange"></vxe-switch>
      </li>
      <li>
        <span>色弱模式</span>
        <vxe-switch v-model="weekVal" open-label="开" close-label="关" @change="weekChange"></vxe-switch>
      </li>
      <li>
        <span>隐藏标签页</span>
        <vxe-switch v-model="tagsVal" open-label="开" close-label="关" @change="tagsChange"></vxe-switch>
      </li>
    </ul>
    <el-divider />
    <vxe-button
      status="danger"
      style="width: 90%;margin: 24px 15px;"
      content="清空缓存并返回登录页"
      icon="fa fa-sign-out"
      @click="onReset"
    ></vxe-button>
  </panel>
</template>

<script lang='ts'>
import panel from "../panel/index.vue";
import { onMounted, reactive, toRefs } from "vue";
import { storageLocal } from "/@/utils/storage";
import { toggleClass } from "/@/utils/operate";
import { emitter } from "/@/utils/mitt";
import { useRouter } from "vue-router";

export default {
  name: "setting",
  components: { panel },
  setup() {
    const router = useRouter();

    function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
      const targetEl = target || document.body;
      let { className } = targetEl;
      className = className.replace(clsName, "");
      targetEl.className = flag ? `${className} ${clsName} ` : className;
    }

    const localOperate = (key: string, value?: any, model?: string): any => {
      model && model === "set"
        ? storageLocal.setItem(key, value)
        : storageLocal.getItem(key);
    };

    const settings = reactive({
      greyVal: storageLocal.getItem("greyVal"),
      weekVal: storageLocal.getItem("weekVal"),
      tagsVal: storageLocal.getItem("tagsVal")
    });

    settings.greyVal === null
      ? localOperate("greyVal", false, "set")
      : document.querySelector("html")?.setAttribute("class", "html-grey");

    settings.weekVal === null
      ? localOperate("weekVal", false, "set")
      : document.querySelector("html")?.setAttribute("class", "html-weakness");

    // 灰色模式设置
    const greyChange = ({ value }): void => {
      toggleClass(
        settings.greyVal,
        "html-grey",
        document.querySelector("html")
      );
      value
        ? localOperate("greyVal", true, "set")
        : localOperate("greyVal", false, "set");
    };

    // 色弱模式设置
    const weekChange = ({ value }): void => {
      toggleClass(
        settings.weekVal,
        "html-weakness",
        document.querySelector("html")
      );
      value
        ? localOperate("weekVal", true, "set")
        : localOperate("weekVal", false, "set");
    };

    const tagsChange = () => {
      let showVal = settings.tagsVal;
      showVal
        ? storageLocal.setItem("tagsVal", true)
        : storageLocal.setItem("tagsVal", false);
      emitter.emit("tagViewsChange", showVal);
    };

    function onReset() {
      storageLocal.clear();
      router.push("/login");
    }

    return {
      ...toRefs(settings),
      localOperate,
      greyChange,
      weekChange,
      tagsChange,
      onReset
    };
  }
};
</script>

<style lang="scss" scoped>
.setting {
  width: 100%;
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px;
  }
}
:deep(.el-divider__text) {
  font-size: 16px;
  font-weight: 700;
}
</style>