如何高效抄作业，给网站换上好看的皮肤？

程序员摩根
2,014 阅读3分钟

如果面试官问你，怎么样实现一个网站切换皮肤的方案呢？

以前想的是直接用一个配置文件配置几种状态，然后用js根据配置文件设置一下就好了。

面试官回：这只是一个大概思路的，不够具体，你能说一下具体细节吗？

那我今天就抄一遍elementui的作用，直接用一个demo演示一下整个方案应该如何落地。

话不多说，先看效果。

切换网站皮肤.gif

先说一下我这个思路的来源。

参考了elementui的整个主题切换的思路来源，在全局根据组件的框架定义了将会使用到的全局的变量。如：--color-primary，--color-primary-light-1......，如下图所示： image.png

具体的elementui主题切换细节，请点击这里。好，下面我们开始抄作业。

整个网站皮肤切换的思路大概如下：

  1. 假设现在网站想要切换3套皮肤，分别是green、blue和pink三套。
  2. 在全局的一个样式组件中配置好三套皮肤的样式。
  3. 在body上绑定一个theme_mode的属性，并让当前的属性值设置为想要设置样式的变量名。如：theme_mode='green'。
  4. 在切换皮肤的时候，改变当前变量的值，从而切换使用不同的样式使用。

整个我将分成下面几部分进行操作：

1. 创建页面基本骨架，模拟正常页面。
2. 全局配置皮肤参数，并在项目中使用
3. 切换皮肤，变量指向也跟着切换。

好，我们一步一步来。

一、创建页面基本骨架，模拟正常页面。

我使用vue的全家桶在App.vue中创建页面的基本骨架，用来模拟我们真实场景中要用到的页面。为了方便大家查看，我先将字体颜色设置为黑色，效果如下：

image.png

下面我贴出App.vue中具体的代码。

<template>
  <h3>切换皮肤操作</h3>
  <hr>
  <select name="" id="" class="select" v-model="theme_mode">
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
    <option value="pink">粉色</option>
  </select>


  <div class="top">我是头部</div>
  <div class="container">
    <div class="left">我是左侧</div>
    <div class="right">我是右侧</div>
  </div>
</template>

<style lang="less">
.top{
  margin-top: 30px;
  width: 100%;
  height: 100px;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
}
.container{
  display: flex;
  width: 100%;
  height: 200px;
  font-size: 20px;
  div{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

二、全局配置皮肤参数，并在项目中使用

我们在最外层配置一个theme.less的文件，专门用来配置设置皮肤的变量，具体内容如下：

:root {
  body{
    // 设置变量
    &[theme_mode="green"] {
      --theme-bg-color: #003300;
      --theme-bg-slider: #006600;
      --theme-bg-right: #009966;
    }
    &[theme_mode="blue"] {
      --theme-bg-color: #0000FF;
      --theme-bg-slider: #003399;
      --theme-bg-right: #0099FF;
    }
    &[theme_mode="pink"] {
      --theme-bg-color: #FF00CC;
      --theme-bg-slider: #FF6699;
      --theme-bg-right: #FFCCFF;
    }
  }
}

<style lang="less">
+ @import './theme.less';
.top{
  margin-top: 30px;
  width: 100%;
  height: 100px;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
+  background: var(--theme-bg-color);
+  color: #fff;
}
.container{
  display: flex;
  width: 100%;
  height: 200px;
  font-size: 20px;
+  color: #fff;
  div{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
+  .left{
+    // 获取变量
+    background: var(--theme-bg-slider);
+  }
+  .right{
+    background: var(--theme-bg-right);
+  }
}
</style>

三、切换皮肤，变量指向也跟着切换。

首先，在初始化的时候需要设置初始的皮肤变量(这个变量最好可以根据用户的身份或者其他什么条件存储在后端，比如想要做到不同的用户做不同的皮肤)，下面是简单的代码如下：

export default {
  name: 'App',
  data() {
    return {
      theme_mode: 'green'
    }
  },
  mounted() {
     document.body.setAttribute('theme_mode', this.theme_mode);
  },
  methods: {
    handlePic(event) {
      // 设置body的属性
      document.body.setAttribute('theme_mode', event.target.value);
      console.log(event.target.value);
    }
  }
}
</script>

初始化的主题颜色是green，然后在节点挂载完成之后，在body上设置了属性theme_mode和属性值${this.theme_mode}。同理，在切换不同的皮肤状态的时候改变body标签上theme_mode的属性值。

最后我们在每次切换皮肤之后，都能看到body上的属性值发生变化，然后会更换使用body[theme_mode='green']和body[theme_mode='blue']的样式。再观察一下图片，看一看是不是这样？

切换网站皮肤.gif

如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。精彩内容在后面，防止跑丢，友友们可以先关注我，每一篇文章都能及时通知不会遗失。

avatar
文章
阅读
粉丝