antdesign——切换主题drawer

使用组件drawer的一个属性handle可以直接生成这个设置关闭按钮（slot的方式）

 	<a-drawer
      title="设置"
      placement="right"
      :closable="false"
      :visible="visible"
    >
      <!-- 1、handle的用法 -->
      <template v-slot:handle>
        <a-icon
          class="set"
          :type="visible ? 'close' : 'setting'"
          @click="visible = !visible"
        />
      </template>
      <!-- 设置主题 -->
      <div>
        <h3>设置主题</h3>
        <a-radio-group :value="theme" @change="onChange($event, 'theme')">
          <a-radio value="dark"> 黑色</a-radio>
          <a-radio value="light"> 白色 </a-radio>
        </a-radio-group>
      </div>
    </a-drawer>

切换主题色之后，将主题色存在path的query参数里，为了分享地址的时候，对方可以看到和我们一样的设置

	onChange(e, type) {
      // 将设置的主题的位置设置在路由的query参数，目的是为了将路径分享出去后可以保持跟当前设置一样的效果
      this.$router.push({
        query: { ...this.$route.query, [type]: e.target.value },
      });
    },

其他样式根据主题色修改样式，定义动态类名

<a-layout-sider :class="`theme-${theme}`" width="250" v-model="collapsed">
   <SiderMenu />
</a-layout-sider>
      
.theme-dark {
  background-color: rgb(10, 10, 10);
}
.theme-light {
  background-color: #fff;
}

设置主题源码

设置组件

<template>
  <div>
    <a-drawer
      title="设置"
      placement="right"
      :closable="false"
      :visible="visible"
    >
      <!-- 1、handle的用法 -->
      <template v-slot:handle>
        <a-icon
          class="set"
          :type="visible ? 'close' : 'setting'"
          @click="visible = !visible"
        />
      </template>
      <!-- 设置主题 -->
      <div>
        <h3>设置主题</h3>
        <a-radio-group :value="theme" @change="onChange($event, 'theme')">
          <a-radio value="dark"> 黑色</a-radio>
          <a-radio value="light"> 白色 </a-radio>
        </a-radio-group>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    theme() {
      return this.$route.query.theme || "dark";
    },
  },
  mounted() {},
  methods: {
    onChange(e, type) {
      // 将设置的主题的位置设置在路由的query参数，目的是为了将路径分享出去后可以保持跟当前设置一样的效果
      this.$router.push({
        query: { ...this.$route.query, [type]: e.target.value },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.set {
  position: absolute;
  top: 50%;
  right: 256px;
  font-size: 22px;
  color: #fff;
  width: 50px;
  height: 50px;
  background: #136bef;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  margin-top: -25px;
}
</style>

父组件

<template>
  <div>
    <a-layout>
      <a-layout-sider :class="`theme-${theme}`" width="250" v-model="collapsed">
        <SiderMenu />
      </a-layout-sider>
      <a-layout>
        <a-layout-header><Header /></a-layout-header>
        <a-layout-content><router-view></router-view></a-layout-content>
        <a-layout-footer><Footer /></a-layout-footer>
      </a-layout>
    </a-layout>
    <!-- 设置主题 -->
    <SettingDrawer />
  </div>
</template>

<script>
import Header from "./Header";
import Footer from "./Footer";
import SiderMenu from "./SiderMenu";
import SettingDrawer from "@/components/SettingDrawer";
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["collapsed"]),
    theme() {
      return this.$route.query.theme || "dark";
    },
  },
  components: {
    Header,
    Footer,
    SiderMenu,
    SettingDrawer,
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
/deep/.ant-layout {
  height: 100vh;
}
/deep/.ant-layout-content {
  min-height: auto !important;
}
.theme-dark {
  background-color: rgb(10, 10, 10);
}
.theme-light {
  background-color: #fff;
}
</style>