Vue学习(7) Ant Design Vue Pro手把手搭建（2）实现定制化主题

我们打开https://preview.pro.ant.design/dashboard/analysis,可以看到页面上有个，当我们点击它时就会有个像抽屉一样的主题设置页划出，我们可以随便选择我们想要的导航栏位置，页面主题色等等，现在，我们就来实现这个效果，我们今天就实现其中的一个导航栏颜色定制。

一：实现抽屉效果

我们将这个设置页封装成一个组件，在components下新建SettingDrawer文件夹，在这个文件夹下新建index.vue，来到Ant Design Vue里寻找抽屉组件,复制如下代码放到index.vue

<template>
  <div>
    <a-button type="primary" @click="showDrawer">
      Open
    </a-button>
    <a-drawer
      title="Basic Drawer"
      placement="right"
      :closable="false"
      @close="onClose"
      :visible="visible"
      :afterVisibleChange="afterVisibleChange