基于vue的换肤功能的示例代码(2)

派发的实现在下一个部分说，这里我们先来完成我们的第一步，我们可以容易提取出我们的需求：

4 设置并保存一个全局颜色

界面的小事：

我在首页直接实现这个功能，项目中我引入了mint-ui 框架（饿了么团队的移动端框架，稍微遗憾使用感觉没有element.ui 的舒服）， 设置的交互就用弹层 mt-popup 的形式好了，然后直接点击色块便设置对应颜色值

<!-- 設置顏色 -->
  <mt-popup v-model="changColor" position="bottom" class="color-panel">
   <div class="color-items">
     <span class="color-item" v-for="(item, $index) in colors" :key="$index" @click="chooseColor(item)">
      <span class="color-cycle" :class="'bg-color' + ($index + 1)"></span>
      </span>
   </div>
  </mt-popup>

接着就是色块div的呈现，从上面代码发现，我会很容易出现类似这样的css样式表

.bg-color1 {background: #f04134}
.bg-color2 {background: #f04134}
.bg-color3 {background: #f04134}
.bg-color4 {background: #f04134}
···

写代码时候如果我们一般发现，一件类似的东西重复出现了，就总隐隐觉得可以开始表演了，然后可预见的是，这样的情况意味着在项目增长后，还可能出现许多单一设置字体颜色或border颜色的样式表，诸如color1, borderColor1···，这样每种形式的表现我们都需要根据我们主题颜色的数组去逐条书写，修改成本也会变高 。于是我的书写风格是这样的，

// mixin.scss:
$colors: #f04134, #00a854, #108ee9, #f5317f, #f56a00, #7265e6, #ffbf00, #00a2ae, #2e3238;

// setColor.vue:
@import '~@/assets/mixin.scss';
···
@for $i from 1 to 10 {
    .bg-color#{$i} {
     background-color: nth($colors, $i)
    }
   }

scss 除了常用的类名嵌套书写外，还有许多···低调奢华的语法， 对于这类需要重复书写的样式类型，我的约定是添加一个scss变量在mixin 文件中, 在需要书写重复循环样式时候作为变量引入，并在书写样式时候，利用sass的循环，引用其中对应的值，这样无论设置颜色的样式怎么拓展和变化，变成颜色背景边框都好，我都只需要维护一份mixin的的文件里的色值就行了， 同样的实践也可以应用于项目里面字体大小和间距值的统一之类，总之我们多尝试体验下吧

5 逻辑的小事

这个项目里面localstorage 基本被当成数据库使用了，所以点击色块设置主题时候，我们假装发出请求，在localstorage存储我们改变的颜色就好了( ./static/api.json 是一个返回helloword 的json， 为了写实在这里这么用，$bus 事件巴士下面说， 作用就是设置全局的主题颜色变量，localStorage 模拟我们把设置存储到后台，每次重新打开页面就去获取这些设置值）， 目前为止，我们的设置页面就大致完成了