eep_page/src/components/ColorPicker.vue

<template>
  <el-color-picker
    :predefine="groupedPredefineColors"
    popper-class="color-picker has-history"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script>
import { GetColorList_Common, GetColorList_RecentlyUsed } from '@/api/project';

export default {
  name: 'ColorPicker',
  inheritAttrs: false,
  props: {
    // 常用颜色类型
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      commonList: [], // 常用颜色
      recentlyUsedList: [], // 制作人员历史颜色
    };
  },
  computed: {
    groupedPredefineColors() {
      return [
        ...this.commonList.map(({ color }) => `#${color}`),
        ...this.recentlyUsedList.map(({ color }) => `#${color}`),
      ];
    },
  },
  created() {
    this.getColorList_Common();
    this.getColorList_RecentlyUsed();
  },
  methods: {
    getColorList_Common() {
      GetColorList_Common({ type: this.type }).then(({ color_list }) => {
        this.commonList = color_list;
      });
    },
    getColorList_RecentlyUsed() {
      GetColorList_RecentlyUsed({ type: this.type }).then(({ color_list }) => {
        this.recentlyUsedList = color_list;
      });
    },
  },
};
</script>

<style lang="scss">
.color-picker {
  .el-color-predefine__colors {
    display: flex;
    flex-wrap: wrap;

    &::before {
      flex: 0 0 100%;
      order: 0;
      margin-bottom: 8px;
      font-size: 12px;
      color: #666;
      content: '常用颜色';
    }
  }

  .el-color-predefine__color-selector:nth-child(-n + 20) {
    order: 1;
  }

  &.has-history .el-color-predefine__colors::after {
    flex: 0 0 100%;
    order: 2;
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #666;
    content: '制作人员历史颜色';
  }

  .el-color-predefine__color-selector:nth-child(n + 21) {
    order: 3;
  }
}
</style>