[项目记录]用vue-electron搭建pc网易云音乐程序（3-2）——添加header头部功能(2)

接着上一文章继续完善header功能，还剩七个功能

1、换肤

官方的还有个主题一栏，我这里就不加了，顶多就是顶部背景好看一些，我主要把纯色功能完成。

主要分为上下两部分，上面是给定的颜色，下面是自定义颜色。首先完成给定颜色模块，把官方的12个颜色取个色放进来就行。

    <div class="colorlist">
      <div
        class="coloritem"
        v-for="(item, index) in colorlist"
        :key="index"
        :style="{ 'background-color': item.color }"
        @click="changecolor(item)"
      >
        <div
          class="ischosen"
          v-if="item.color == currentcolor && iscustomize == false"  //使用给定颜色而非自定义
        >
          ✔
        </div>
      </div>
    </div>

    changecolor(item) {
      if (this.currentcolor == item.color) {
        return;
      } else {
        this.iscustomize = false;  //用户选择给定颜色
        this.currentcolor = item.color; //替换为当前选择的颜色
        this.$storage.set("topic", item.color);  //将用户选择的颜色存至本地
        document.documentElement.style.setProperty("--topic", item.color); //全局定义主题色
      }
    },

公共样式中的颜色变量：

$topic: var(--topic, #ec4141);//默认为网易云红

自定义颜色功能：这里研究了很久，本来打算直接用element的颜色选择器组件，但看了眼感觉不太符合预期，最后发现用hsl颜色值正好可以满足需求：自定义颜色栏上半部分为选择色相，下半部分选择亮度，hsl颜色中h为hue色相，l为lightness亮度，