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

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

一：实现抽屉效果

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

 然后我们在BasicLayout里引入这个组件，同时不要忘了在main.js中引入Drawer组件，最后运行可以看到，当我们点击open按钮时，抽屉页就出现，再点击就消失

我们看到官方示例时，可以看到它是用一个图标进行控制，而且位置是靠右的中间，因此我们就弃用这个按钮改成图标

先删除index.vue里的button，然后在里加入如下代码:

这里的v-slot:handle根据官方说法就是将图标挂载到dom上,然后我们设置图标点击时抽屉出现，然后图标也相应改成了close，

即，这时我们还看到了图标，因为我们没有把这个组件引入，于是在main.js里引入Icon组件,这时Icon已经出现了，只是它被挡住了，我们给这个icon添加一些样式

.handle {
  position: absolute;
  top: 250px;
  right: 310px;
  width: 40px;
  height: 40px;
  background-color: blue;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
.handle:hover {
  cursor: pointer;
}

它就出现了，效果如下：点击图标，就会出现抽屉页，我们在抽屉页加上"width:300px"

二  主题定制

我们删除原来的如下代码

Some contents...
Some contents...
Some contents...

 换上选择代码，即主题颜色的单选按钮，在data里加上navTheme，同时main.js里要引入Radio组件

   
整体风格设置
   
     黑色
     白色
        

单选设置好了后，我们就来关联选择的实现

我们的做法是监听选择改变后将选择作为路由的属性，这样在BasicLayout中可以拿到这个属性，修改主题颜色

 

    
整体风格设置
    
       黑色
       白色
    

 handleSettingChange

 handleSettingChange(type, value) {
   this.$router.push({ query: { ...this.$route.query, [type]: value } });
 }

这样，我们在BasicLayout里去计算这个navTheme属性

 computed: {
    navTheme() {
      return this.$route.query.navTheme || "dark";
    }
 }

然后我们在a-layout-sider中去绑定theme即可

最后效果如下，当我选择黑色时，侧边栏就是黑色

当我选择白色时，侧边栏就是白色

 现在我们还要解决一个问题，当我们选择主题时发现这个加载效果也会出现，显然不是我们想要的，于是我们在router配置中修改一下

//路由跳转前
router.beforeEach((from, to, next) => {
  if (from.path != to.path) {
    NProgress.start();
    next();
  }
});

 这样我们选择时就会出现加载效果了。

如此我们就实现了定制，其它定制效果可以自己实现。