【基于element ui的color选择器】基于element ui的color选择器

技术版本如下：

vue 2.6.14
less 3.13.1
element-ui 2.15.6
less-loader 5.0.0

需求：

支持RGB、HEX编码、支持吸管吸取颜色、颜色选择器、颜色模板、透明度、色板、线性渐变颜色

效果图：

1.引入选择器的color-all文件

<template>
  <div>
    <div><div class="colorpicker-box" :style="{background:handStyle()}">div>div>
        <h3>带编码显示的color选择器h3>
      <div>  <ColorPicker
            :data="pickerColor"
            @update:isLinear="pickerColor.isLinear = $event"
            @update:direction="pickerColor.direction = $event"
            @update:leftColor="handUpdateElement($event, 0)"
            @update:rightColor="handUpdateElement($event, 1)"
          >ColorPicker>div>
          <h3>无编码显示的color选择器h3>
        <div>
          <ColorPicker
            :data="pickerColor"
            :isText="false"
            @update:isLinear="pickerColor.isLinear = $event"
            @update:direction="pickerColor.direction = $event"
            @update:leftColor="handUpdateElement($event, 0)"
            @update:rightColor="handUpdateElement($event, 1)"
          >ColorPicker>
        div>
  div>
template>
<script>
import ColorPicker from '@/components/color-modal/color-picker.vue'
export default {
  components: {
    ColorPicker,
  },
  data() {
    return {
      pickerColor: {
        isLinear: false, //是否线性
        color: ['#334251'], //选择的颜色
        direction: 'right', //方向
      },
    }
  },
  methods: {
    handStyle() { 
     return this.pickerColor.isLinear ? `linear-gradient(to ${this.pickerColor.direction},${this.pickerColor.color[0]} ,${this.pickerColor.color.length >= 2 ? this.pickerColor.color[1] : '#AE7DFF'})` : this.pickerColor.color[0]
    },
    handUpdateElement(value, cursor = null) {
      this.$set(this.pickerColor.color, cursor, value)
    },
  },
}
script>

<style lang="less" scoped>
.colorpicker{
  &-box{
    width: 200px;
    border-radius: 5px;
    height: 30px;
  }
  div{
    padding: 10px;
  }
}

style>

2.重点，选择器的封装组件文件color-picker.vue

<template>
  <el-popover placement="left-start" width="264" trigger="hover">
    <div class="colorPickerBody">
      
      <div class="colorPickerBody-headers">
        <el-radio-group v-model="activeName" size="mini" @change="handActive">
          <el-radio-button :label="0">颜色填充el-radio-button>
          <el-radio-button :label="1">线性填充el-radio-button>
        el-radio-group>
      div>
      
      <div class="colorPickerBody-top">
        <div class="colorPickerBody-top-one">
          
          <div class="color-diamond">
            <div :style="'background-color: ' +
          bgColor +
          ';width: 100%;height: 100%;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);'
          ">div>
          div>
          
          <el-dropdown @command="handleCommand" class="eldropdownColor">
            <span class="el-dropdown-link">
              {{ colorType }}<i class="el-icon-arrow-down el-icon--right">i>
            span>
            <el-dropdown-menu slot="dropdown" :append-to-body="false">
              <el-dropdown-item command="HEX">HEXel-dropdown-item>
              <el-dropdown-item command="RGB">RGBel-dropdown-item>
            el-dropdown-menu>
          el-dropdown>
          <div v-if="colorType === 'HEX'">
            <el-input v-model="bgColor" class="colorValcss" @input="bgColor = $event; handHEXtoRGB($event)">el-input>
          div>
          <div v-else class="colorRGBBox"> <el-input type="number" v-model="red" min="0" max="255"
              class="colorRGBValcss" @input="handredChange">el-input><el-input type="number" v-model="green" min="0"
              max="255" class="colorRGBValcss" @input="handgreenChange">el-input><el-input type="number"
              v-model="blue" min="0" max="255" class="colorRGBValcss" @input="handblueChange">el-input>div>
          <div class="strawcss" title="吸管" @click="nativePick"><img src="@/assets/image/strawImg.svg">div>
        div>
        
        <div v-if="activeName === 1" class="colorPickerBody-top-two">
          <div class="colorPickerBody-top-two-body">
            <div class="colorPickerBody-top-two-body-tag" title="首部" @click="handAlphaColor(true)"><img
                :src="handLineImg(true)">div>
            <div class="colorPickerBody-top-two-body-center" :style="'background: linear-gradient(to right, ' + handleftRightColor(true) + ', ' +
          handleftRightColor(false) +
          ');'
          ">div>
            <div class="colorPickerBody-top-two-body-tagRight" title="尾部" @click="handAlphaColor(false)"><img
                :src="handLineImg(false)">div>
          div>
          <div class="strawcss iconright" :title="data.direction === 'right' ? '旋转方向:上下' : '旋转方向:左右'"
            @click="handDirection"><i class="el-icon-refresh-right">i>
          div>
        div>
        
        <div class="colorPickerBody-top-three">
          <div class="colorPickerBody-top-three-Alpha" ref="saturation_value">
            <div class="alpha-slider" ref="alpha_slider" @mousedown="mousedownAlpha">
              <div class="slider" :style="alphaSliderStyle + ';background:' + bgColor">div>
              <div :style="'background: linear-gradient(to right, rgba(0,0,0,0), ' +
          bgColor +
          ');width: 100%;height: 100%;border-radius: 10px;'
          ">div>
            div>
          div>
          <div class="colorPickerBody-top-three-number"> <el-input v-model="alpha" class="alphaValcss" type="number"
              min="0" max="100" @input="handAlpha"> <i slot="suffix" class="suffixInput">%i>el-input>div>
        div>
      div>
      
      <div class="colorPickerBody-border">div>
      
      <div class="colorPickerBody-body">
        <div class="colorPickerBody-body-headers">
          <div class="colorPickerBody-body-headers-title">颜色选择器div>
          <div class="colorPickerBody-body-headers-svg">
            <div :class="colorselecotr ? 'boxbuttom checkbuttom' : 'boxbuttom '" @click="colorselecotr = true"><img
                src="@/assets/image/colordemo.svg"> div>
            <div :class="!colorselecotr ? 'boxbuttom checkbuttom' : 'boxbuttom '" @click="colorselecotr = false"><img
                src="@/assets/image/colorpick.svg">div>
          div>
        div class="colorPickerBody-body-box">
        <div v-if="colorselecotr">
          <MyColorSelect class="MyColorSelect" :color="bgColor" :alphaValue="alpha"
            @update:color="bgColor = $event; handHEXtoRGB($event)">
          MyColorSelect>
        div>
        <ul v-else class="colorDemoList">
          <li v-for="(item, index) in colorAll" :key="index" :style="'background: ' + item"
            @click="bgColor = item; handHEXtoRGB(item)">li>
        ul>
      div>
    div>
    
    <div class="colorInputBody" slot="reference" v-if="isText">
      <div class="colorBox" :style="'background:' + data.color[0]">div>
      <div class="colorInputBody-title">{{ data.color[0] }}div>
    div>
    <div class="colorNoTextBody" slot="reference" v-else>
      <div class="colorNoTextBody-colorBox" :style="'background:' + data.color[0]">div>
    div>
  el-popover>
template>

<script>
import MyColorSelect from "./MyColorSelect.vue"
import moveCursorImg from '@/assets/image/moveCursorImg.png'
import checkmoveCursorImg from '@/assets/image/checkmoveCursorImg.png'
import message from "@/utils/message.js";
import { debounce } from '@/utils/util.js'

export default {
  props: {
    data: {
      type: Object,
      default: () => ({
        isLinear: false, //是否线性
        color: ["#000"], //选择的颜色
        direction: "right", //方向
      }),
    },
    //是否显示color编码
    isText: {
      type: Boolean,
      default: true
    }
  },
  components: {
    MyColorSelect
  },
  data() {
    return {
      colorAll: ["#FF0000", "#FFA500", "#FFFF00", "#008000", "#0000FF",
        "#4B0082", "#EE82EE", "#FF1493", "#FF69B4", "#FF4500",
        "#FF6347", "#FFD700", "#ADFF2F", "#00FFFF", "#87CEEB",
        "#4169E1", "#800080", "#9932CC", "#8A2BE2", "#FF00FF",
        "#FFC0CB", "#F08080", "#CD5C5C", "#FA8072", "#FFA07A",
        "#FF7F50", "#FFDAB9", "#FFE4B5", "#FFDEAD", "#FFE4E1",
        "#FFF0F5", "#F0FFF0", "#F5FFFA", "#B0E0E6", "#ADD8E6",
        "#87CEFA", "#87CEEB", "#00BFFF", "#1E90FF", "#6495ED",
        "#4682B4", "#5F9EA0", "#20B2AA", "#008B8B", "#008080"
      ],
      alphaSliderStyle: "left: calc(100% - 6px);",
      alpha: 100,
      colorType: "HEX",
      bgColor: "",
      colorselecotr: true,
      activeName: 0,
      red: 255,
      green: 0,
      blue: 0,
      isLinearStart: true,
      moveCursorImg,
      checkmoveCursorImg,
      hasEyeDrop: 'EyeDropper' in window
    };
  },
  mounted() {
    this.bgColor = this.data.color[0]
    this.activeName = this.data.isLinear ? 1 : 0
  },
  methods: {
    handAlphaColor(item) {
      this.isLinearStart = item;
      let alphaNew = 1;
      if (item) {
        const { r, g, b, a } = this.parseColor(this.data.color[0]);
        alphaNew = a;
      } else {
        const { r, g, b, a } = this.parseColor(this.data.color[1]);
        alphaNew = a;
      }
      this.alpha = alphaNew.toFixed(2) * 100
      this.handAlpha()
    },
    // tag
    handActive(e) {
      if (e === 0) {
        this.bgColor = this.data.color[0]
        this.handAlphaColor(true)
        this.$emit('update:isLinear', false)
      } else {
        this.$emit('update:isLinear', true)
      }
    },
    // 方向
    handDirection() {
      if (this.data.direction === 'right') {
        this.$emit('update:direction', 'top')
      } else {
        this.$emit('update:direction', 'right')
      }
    },
    //取色
    async nativePick(e) {
      const val = e ? e.target.value : null
      if (val) {
        console.log('获得颜色: ' + val)
      } else {
        const eyeDropper = new window.EyeDropper() // 初始化一个EyeDropper对象
        try {
          const result = await eyeDropper.open() // 开始拾取颜色
          this.bgColor = result.sRGBHex;
          this.handHEXtoRGB(result.sRGBHex)
        } catch (e) {
          console.log('用户取消了取色')
        }
      }
    },
    //判断线性条
    handleftRightColor(val) {
      let color = '#AE7DFF';
      if (val) {
        color = this.data.color[0]
      } else {
        if (this.data.color.length >= 2) color = this.data.color[1]
      }
      return color;
    },
    //判断首尾游标
    handLineImg(val) {
      let icon = moveCursorImg;
      if (val) {
        if (this.isLinearStart) {
          this.bgColor = this.data.color[0]
          icon = checkmoveCursorImg;
        }
      } else {
        if (!this.isLinearStart) {
          this.bgColor = this.data.color.length >= 2 ? this.data.color[1] : '#AE7DFF'
          icon = checkmoveCursorImg;

        }
      }

      return icon;
    },
    handredChange(val) {
      if ((val ?? '') !== '') {
        this.bgColor = this.rgba2hex(val, this.green, this.blue, this.matchHexA())
        this.handHEXtoRGB(this.bgColor)
      }
    },
    handgreenChange(val) {
      if ((val ?? '') !== '') {
        this.bgColor = this.rgba2hex(this.red, val, this.blue, this.matchHexA())
        this.handHEXtoRGB(this.bgColor)
      }
    },
    handblueChange(val) {
      if ((val ?? '') !== '') {
        this.bgColor = this.rgba2hex(this.red, this.green, val, this.matchHexA())
        this.handHEXtoRGB(this.bgColor)
      }
    },
    matchHexA() {
      let percentage = this.alpha * 0.01;
      return percentage;
    },
    rgba2hex(r, g, b, a = 1) {
      r = parseInt(r);
      let r1 =
        r.toString(16).length !== 2 ? "0" + r.toString(16) : r.toString(16);
      g = parseInt(g);
      let g1 =
        g.toString(16).length !== 2 ? "0" + g.toString(16) : g.toString(16);
      b = parseInt(b);
      let b1 =
        b.toString(16).length !== 2 ? "0" + b.toString(16) : b.toString(16);
      a = parseFloat(a);
      let a1 = "";
      if (a !== 1) {
        let temp = Math.floor(256 * a);
        a1 =
          temp.toString(16).length !== 2
            ? "0" + temp.toString(16)
            : temp.toString(16);
      }
      return `#${r1}${g1}${b1}${a1}`.toUpperCase();
    },
    handAlpha() {
      this.alphaSliderStyle = `left: ${this.alpha >= 96 ? "calc(100% - 9px)" : this.alpha + '%'
        };`;
    },
    // 透明度
    handleChangeAlpha(e) {
      let w = this.$refs.alpha_slider.clientWidth;
      let x =
        e.pageX - this.$refs.saturation_value.getBoundingClientRect().left;
      x = x < w && x > 0 ? x : x > w ? w : 0;
      // 计算透明度
      this.alpha = Math.floor((x / w) * 100 + 0.5);
      // 移动滑块
      this.alphaSliderStyle = `left: ${x >= w - 6 ? w - 9 : x}px;`;

      if (!this.colorselecotr) {
        this.bgColor = this.rgba2hex(this.red, this.green, this.blue, this.matchHexA())
        this.handHEXtoRGB(this.bgColor)
      }
    },
    mousedownAlpha(e) {
      this.handleChangeAlpha(e);
      window.addEventListener("mousemove", this.handleChangeAlpha);
      window.addEventListener("mouseup", this.mouseupAlpha);
    },
    mouseupAlpha(e) {
      window.removeEventListener("mousemove", this.handleChangeAlpha);
      window.removeEventListener("mouseup", this.mouseupAlpha);
    },
    handleCommand(command) {
      this.colorType = command;
      if (command === "RGB") {
        this.handHEXtoRGB(this.bgColor)
      }
    },
    isHexColorCode(str) {
      return /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(str);
    },
    handHEXtoRGB: debounce(function (color) {
      if (!this.isHexColorCode(color)) {
        message.message("当前非HEX编码，请重新输入！", "error");
        return
      }
      const { r, g, b, a } = this.parseColor(color);
      this.red = r;
      this.green = g;
      this.blue = b;
      if (this.isLinearStart) {
        this.$emit('update:leftColor', color)
      } else {
        this.$emit('update:rightColor', color)
      }
    }, 500),
    parseColor(color) {
      if (color) {
        let r, g, b, a;
        if (typeof color === "string") {
          if (
            /^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(
              color
            )
          ) {
            return this.hex2rgba(color);
          }
        } else {
          r = color.r > 255 ? 255 : color.r < 0 ? 0 : color.r;
          g = color.g > 255 ? 255 : color.g < 0 ? 0 : color.g;
          b = color.b > 255 ? 255 : color.b < 0 ? 0 : color.b;
          a = color.a > 1 ? 1 : color.a < 0 ? 0 : color.a;
          return { r, g, b, a };
        }
      } else {
        return null;
      }
    },
    hex2rgba(s) {
      if (/^#?[0-9a-fA-F]{3}$/.test(s)) {
        let b = s.substring(s.length - 1, s.length);
        let g = s.substring(s.length - 2, s.length - 1);
        let r = s.substring(s.length - 3, s.length - 2);
        return hex2rgba(`${r + r}${g + g}${b + b}`);
      }
      if (/^#?[0-9a-fA-F]{4}$/.test(s)) {
        let a = s.substring(s.length - 1, s.length);
        let b = s.substring(s.length - 2, s.length - 1);
        let g = s.substring(s.length - 3, s.length - 2);
        let r = s.substring(s.length - 4, s.length - 3);
        return hex2rgba(`${r + r}${g + g}${b + b}${a + a}`);
      }
      if (/^#?[0-9a-fA-F]{6}$/.test(s)) {
        let b = parseInt("0x" + s.substring(s.length - 2, s.length));
        let g = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
        let r = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
        return { r, g, b, a: 1 };
      }
      if (/^#?[0-9a-fA-F]{8}$/.test(s)) {
        let a = parseInt("0x" + s.substring(s.length - 2, s.length));
        a = a / 255;
        let b = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
        let g = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
        let r = parseInt("0x" + s.substring(s.length - 8, s.length - 6));
        return { r, g, b, a };
      }
    },
  },
};
script>

<style scoped lang="less">
.colorDemoList {
  width: 100%;
  list-style-type: none;
  padding: 13px 0 0 0;
  margin: 0;

  li {
    display: inline-block;
    width: 16px;
    cursor: pointer;
    border-radius: 2px;
    height: 16px;
    margin: 0 9px 8px 0;
  }
}

/* 颜色方块 */
.color-diamond {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  overflow: hidden;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
  background-size: 10px 10px;
  margin-right: 8px;
}

.iconright {
  font-size: 15px;
  cursor: pointer;
}

.strawcss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  padding-left: 5px;

  img {
    cursor: pointer;
  }
}



.eldropdownColor {
  width: 56px;
  color: #fff;

}

.colorPickerBody {
  height: 100%;
  width: 100%;
  padding: 5px 11px 13px 11px;

  &-top {
    padding: 10px 0 12px 0;
    width: 100%;
    height: 100%;

    &-one {
      display: flex;
      align-items: center;
    }

    &-two {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 12px;
      width: 100%;

      &-body {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;

        &-tag {
          position: absolute;
          left: -1px;
          top: -2px;
          cursor: pointer;
          z-index: 1;
        }

        img {
          width: 14px;
          height: 18px;
        }

        &-tagRight {
          position: absolute;
          right: -1px;
          top: -2px;
          cursor: pointer;
        }

        &-center {
          left: 6px;
          position: absolute;
          width: calc(100% - 12px);
          height: 12px;
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
          background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
          background-size: 10px 10px;
        }
      }
    }

    &-three {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;

      &-Alpha {
        width: 80%
      }

      &-number {
        width: 15%;

        ::v-deep.el-input__suffix {
          right: 2px;
          top: 1px;
        }

        .suffixInput {
          color: #fff;
          font-size: 12px;
        }

        .alphaValcss {
          width: 44px;

          ::v-deep .el-input__inner {
            text-align: center;
            height: 24px;
            font-size: 12px;
            padding: 0 3px;
            border-radius: 5px;
            border: 1px solid #484849;
            background: #29292cFF;
            color: #fff;
          }
        }
      }
    }

    .colorValcss {
      width: 119px;

      ::v-deep .el-input__inner {
        height: 24px;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #484849;
        background: #29292cFF;
        color: #fff;
      }

    }

    .colorRGBBox {
      display: flex;
    }

    .colorRGBValcss {
      width: 40px;

      ::v-deep .el-input__inner {
        height: 24px;
        padding: 0 3px;
        text-align: center;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #484849;
        background: #29292cFF;
        color: #fff;
      }
    }
  }

  &-border {
    height: 1px;
    background: #484849;
    margin: 0 0 12px 0;
    width: 100%;
  }

  &-body {
    width: 100%;
    height: 100%;

    &-headers {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-title {
        color: #fff;
        font-size: 14px;
      }

      &-svg {
        width: 43px;
        display: flex;
        justify-content: space-between;

        .checkbuttom {
          background: #3C3C3F;
          border-radius: 2px 2px 2px 2px;
        }

        .boxbuttom {
          width: 22px;
          height: 22px;

          display: flex;
          justify-content: center;
          align-items: center;
        }

        img {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
    }
  }

  &-headers {


    ::v-deep .el-radio-group {
      display: flex;
    }

    ::v-deep .el-radio-button__inner {
      background: #29292c;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #484849;
      color: #99999b;
      width: 116px;
      height: 28px;
      box-shadow: none;
    }

    // 修改激活后的样式
    ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      background: #373739;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #484849;
      color: #fff;
    }
  }
}

.colorInputBody {
  display: flex;
  flex-direction: Row;
  align-items: center;
  height: 30px;
  width: 120px;
  padding-left: 8px;
  border: 1px solid #000;
  border-radius: 5px;

  &-title {
    padding-left: 8px;
    color: #000;
  }
}

.colorNoTextBody {
  width: 30px;
  height: 30px;
  border: none;
  padding: 3px;

  &-colorBox {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }
}

.colorBox {
  width: 26px;
  height: 14px;
}

/* 透明度滑块条 */
.alpha-slider {
  border-radius: 10px;
  position: relative;
  height: 12px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
  background-size: 10px 10px;
}

/* 滑块 */
.slider {
  border-radius: 20px;
  position: absolute;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  width: 12px;
  height: 100%;
  border: 3px solid #fff;
}
style>

3.选择器的颜色板，MyColorSelect.vue页面

<template>
  <div class="color-select">
    <div class="saturation-value" ref="saturation_value" @mousedown="mousedownSV">
      <div :style="'background-color: hsl(' + hue + ', 100%, 50%);'">
        <div class="point" :style="pointStyle">div>
      div>
      <div class="saturation-value-2">div>
      <div class="saturation-value-3">div>
    div>
    <div class="color-select-middle">
      <div style="flex: auto">
        <div class="hue-slider" ref="hue_slider" @mousedown="mousedownHue">
          <div class="slider" :style="hueSliderStyle">div>
        div>
      div>
    div>
  div>
template>

<script>
export default {
  name: "MyColorSelect",
  props: {
    color: {
      type: String,
      default: "",
    },
    alphaValue: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      pointStyle: "top: 25%; left: 80%;",
      hueSliderStyle: "left: 0;",
      hue: 0,
      saturation: 1,
      value: 1,
      red: 255,
      green: 0,
      blue: 0,
      alpha: 1,
    };
  },
  watch: {
    color: {
      handler(val) {
        this.handParse(val);
      },
    },
    alphaValue: {
      handler(val) {
        this.$emit(
          "update:color",
          this.rgba2hex(this.red, this.green, this.blue, this.matchHexA())
        );
      },
    },
  },
  mounted() {
    this.handParse(this.color);
  },
  methods: {
    handParse(color) {
      if ((this.parseColor(color) ?? "") !== "") {
        const { r, g, b, a } = this.parseColor(color);
        this.red = r;
        this.green = g;
        this.blue = b;
        this.alpha = a;
        this.updateColor();
      }
    },
    updateColor() {
      let { h, s, v } = this.rgb2hsv(this.red, this.green, this.blue);
      this.hue = h;
      this.saturation = s;
      this.value = v;

      // 移动背景板圆圈
      this.pointStyle = `top: ${100 - v * 100}%;left: ${s * 100}%;`;
      // 移动色调滑块
      this.hueSliderStyle = `left: ${(this.hue / 360) * 100}%;`;
    },
    rgb2hsv(r, g, b) {
      let r1 = r / 255;
      let g1 = g / 255;
      let b1 = b / 255;
      let cmax = Math.max(r1, g1, b1);
      let cmin = Math.min(r1, g1, b1);
      let d = cmax - cmin;
      let h, s, v;
      if (d === 0) {
        h = 0;
      } else if (cmax === r1) {
        h = ((60 * (g1 - b1)) / d + 360) % 360;
      } else if (cmax === g1) {
        h = 60 * ((b1 - r1) / d + 2);
      } else if (cmax === b1) {
        h = 60 * ((r1 - g1) / d + 4);
      }
      if (cmax === 0) {
        s = 0;
      } else {
        s = d / cmax;
      }
      v = cmax;
      h = Math.floor(h + 0.5);
      s = Math.floor(s * 100 + 0.5) / 100;
      v = Math.floor(v * 100 + 0.5) / 100;
      return { h, s, v };
    },
    // 色调
    handleChangeHue(e) {
      let w = this.$refs.hue_slider.clientWidth;
      let x =
        e.pageX - this.$refs.saturation_value.getBoundingClientRect().left;
      x = x < w && x > 0 ? x : x > w ? w : 0;
      // 计算色调
      this.hue = Math.floor((x / w) * 360 + 0.5);
      // hsv转化为rgb
      let { r, g, b } = this.hsv2rgb(this.hue, this.saturation, this.value);
      this.red = r;
      this.green = g;
      this.blue = b;
      // 移动滑块
      this.hueSliderStyle = `left: ${x >= w - 6 ? w - 6 : x}px;`;
      this.$emit("update:color", this.rgba2hex(r, g, b, this.matchHexA()));
    },

    mousedownHue(e) {
      this.handleChangeHue(e);
      window.addEventListener("mousemove", this.handleChangeHue);
      window.addEventListener("mouseup", this.mouseupHue);
    },

    mouseupHue(e) {
      window.removeEventListener("mousemove", this.handleChangeHue);
      window.removeEventListener("mouseup", this.mouseupHue);
    },
    // 饱和度和亮度
    handleChangeSV(e) {
      let w = this.$refs.saturation_value.clientWidth;
      let h = this.$refs.saturation_value.clientHeight;
      let x =
        e.pageX - this.$refs.saturation_value.getBoundingClientRect().left;
      let y = e.pageY - this.$refs.saturation_value.getBoundingClientRect().top;
      x = x < w && x > 0 ? x : x > w ? w : 0;
      y = y < h && y > 0 ? y : y > h ? h : 0;
      // 计算饱和度和亮度
      this.saturation = Math.floor((x / w) * 100 + 0.5) / 100;
      this.value = Math.floor((1 - y / h) * 100 + 0.5) / 100;
      // hsv转化为rgb
      let { r, g, b } = this.hsv2rgb(this.hue, this.saturation, this.value);
      this.red = r;
      this.green = g;
      this.blue = b;
      // 移动背景板圆圈
      this.pointStyle = `top: ${y}px;left: ${x}px;`;
      this.$emit("update:color", this.rgba2hex(r, g, b, this.matchHexA()));
    },
    matchHexA() {
      let percentage = this.alphaValue * 0.01;
      return percentage;
    },
    mousedownSV(e) {
      // 鼠标按下计算饱和度和亮度并添加事件
      this.handleChangeSV(e);
      // 添加整个页面的鼠标事件
      window.addEventListener("mousemove", this.handleChangeSV);
      window.addEventListener("mouseup", this.mouseupSV);
    },
    mouseupSV(e) {
      // 鼠标松开后移除事件
      window.removeEventListener("mousemove", this.handleChangeSV);
      window.removeEventListener("mouseup", this.mouseupSV);
    },
    parseColor(color) {
      if (color) {
        let r, g, b, a;
        if (typeof color === "string") {
          if (
            /^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{8}|[0-9a-fA-F]{3}|[0-9a-fA-F]{4})$/.test(
              color
            )
          ) {
            return this.hex2rgba(color);
          }
        } else {
          r = color.r > 255 ? 255 : color.r < 0 ? 0 : color.r;
          g = color.g > 255 ? 255 : color.g < 0 ? 0 : color.g;
          b = color.b > 255 ? 255 : color.b < 0 ? 0 : color.b;
          a = color.a > 1 ? 1 : color.a < 0 ? 0 : color.a;
          return { r, g, b, a };
        }
      } else {
        return null;
      }
    },
    hsv2rgb(h, s, v) {
      h === 360 && (h = 0);
      let i = Math.floor(h / 60) % 6;
      let f = h / 60 - i;
      let p = v * (1 - s);
      let q = v * (1 - s * f);
      let t = v * (1 - s * (1 - f));
      let r, g, b;
      if (i === 0) {
        r = v;
        g = t;
        b = p;
      } else if (i === 1) {
        r = q;
        g = v;
        b = p;
      } else if (i === 2) {
        r = p;
        g = v;
        b = t;
      } else if (i === 3) {
        r = p;
        g = q;
        b = v;
      } else if (i === 4) {
        r = t;
        g = p;
        b = v;
      } else if (i === 5) {
        r = v;
        g = p;
        b = q;
      }
      r = Math.floor(r * 255 + 0.5);
      g = Math.floor(g * 255 + 0.5);
      b = Math.floor(b * 255 + 0.5);
      return { r, g, b };
    },

    rgba2hex(r, g, b, a = 1) {
      r = parseInt(r);
      let r1 =
        r.toString(16).length !== 2 ? "0" + r.toString(16) : r.toString(16);
      g = parseInt(g);
      let g1 =
        g.toString(16).length !== 2 ? "0" + g.toString(16) : g.toString(16);
      b = parseInt(b);
      let b1 =
        b.toString(16).length !== 2 ? "0" + b.toString(16) : b.toString(16);
      a = parseFloat(a);
      let a1 = "";
      if (a !== 1) {
        let temp = Math.floor(256 * a);
        a1 =
          temp.toString(16).length !== 2
            ? "0" + temp.toString(16)
            : temp.toString(16);
      }
      return `#${r1}${g1}${b1}${a1}`.toUpperCase();
    },

    hex2rgba(s) {
      if (/^#?[0-9a-fA-F]{3}$/.test(s)) {
        let b = s.substring(s.length - 1, s.length);
        let g = s.substring(s.length - 2, s.length - 1);
        let r = s.substring(s.length - 3, s.length - 2);
        return hex2rgba(`${r + r}${g + g}${b + b}`);
      }
      if (/^#?[0-9a-fA-F]{4}$/.test(s)) {
        let a = s.substring(s.length - 1, s.length);
        let b = s.substring(s.length - 2, s.length - 1);
        let g = s.substring(s.length - 3, s.length - 2);
        let r = s.substring(s.length - 4, s.length - 3);
        return hex2rgba(`${r + r}${g + g}${b + b}${a + a}`);
      }
      if (/^#?[0-9a-fA-F]{6}$/.test(s)) {
        let b = parseInt("0x" + s.substring(s.length - 2, s.length));
        let g = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
        let r = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
        return { r, g, b, a: 1 };
      }
      if (/^#?[0-9a-fA-F]{8}$/.test(s)) {
        let a = parseInt("0x" + s.substring(s.length - 2, s.length));
        a = a / 255;
        let b = parseInt("0x" + s.substring(s.length - 4, s.length - 2));
        let g = parseInt("0x" + s.substring(s.length - 6, s.length - 4));
        let r = parseInt("0x" + s.substring(s.length - 8, s.length - 6));
        return { r, g, b, a };
      }
    },
  },
};
script>

<style scoped>
.color-select {
  position: relative;
  user-select: none;
  width: 100%;
  padding: 12px 0 0 0;
}

/* 饱和度和亮度 */
.saturation-value {
  cursor: pointer;
  width: 100%;
  height: 148px;
  position: relative;
  margin-bottom: 12px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.saturation-value>div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 圆圈 */
.point {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  background-color: transparent;
  border: 2px solid #ccc;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 9;
}

.saturation-value-2 {
  background: linear-gradient(to right, white, #ffffff00);
}

.saturation-value-3 {
  background: linear-gradient(to top, black, #ffffff00);
}

/* 色调滑块条 */
.hue-slider {
  position: relative;
  height: 10px;
  background: linear-gradient(90deg,
      red 0,
      #ff0 17%,
      #0f0 33%,
      #0ff 50%,
      #00f 67%,
      #f0f 83%,
      red);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

/* 滑块 */
.slider {
  position: absolute;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  width: 6px;
  height: 100%;
  background-color: #fff;
}
style>

4.其中utils文件夹里的两个文件如下

message.js

import { Message, MessageBox } from 'element-ui';

let message = {
    message: function(str, type = 'success') {
        Message[type](str);
    },
    confirm: function(text, title = '提示', confirm = null, cancel = null) {
        MessageBox.confirm(text, title, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then((res) => {
            confirm && confirm(res);
        }).catch((res) => {
            cancel && cancel(res);
        });
    }
};

export default message;

util.js

//防抖
export const  debounce=(fn, t) =>{
  const delay = t || 100;
  let timer = null;
  return function() {
      const args = arguments;
      const context = this;
      if (timer) {
          clearTimeout(timer);
      }
      timer = setTimeout(() => {
          timer = null;
          fn.apply(context, args);
      }, delay);
  };
}

5.重点：elementStyle.css样式文件，用于更改选择器的覆盖颜色

elementStyle.css文件需要在main.js引入

import '@/assets/css/elementStyle.css'

6.elementStyle.css代码如下

.el-popover{
    background: #303030 ;
    color: #ffffff;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 5px 5px;
    min-width: 40px;
  }

  .popper__arrow {
    display: none !important;
}
.el-dropdown-menu{
    background: #303030;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.el-dropdown-menu__item {
    color: #fff;
    width: 70px;
  }
  
.el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #373739FF;
  }

7.引入的图片和svg图片在项目源码包里src/assets/image路径下

8.注意点

如果下载源码的话先

先执行
yarn install
再执行
yarn serve

运行成功后直接使用
http://127.0.0.1:8000/home访问