Vue3实现高仿word自定义颜色选择器组件（支持 v-model）

已于 2025-04-27 10:46:29 修改
阅读量631 收藏 12
点赞数 8
分类专栏： Vue 文章标签： vue.js typescript 前端 css elementui
于 2025-04-25 15:01:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42696432/article/details/147512449
版权

目录

Vue3实现高仿word自定义颜色选择器组件（支持 v-model）

需求分析

最近接到一个需求，前端拿到AI组通过检测算法得到的瑕疵数据，为了标识每个瑕疵，通过设置瑕疵的颜色进行标志，产品要求仿照word的颜色设置来进行设置取色器。

大致效果

Vue3实现高仿word自定义颜色选择器组件（支持 v-model）
Vue3实现高仿word自定义颜色选择器组件（支持 v-model）

Vue3实现高仿word自定义颜色选择器组件（支持 v-model）

需求功能

  1. 颜色选择：用户可以通过点击预定义的颜色块或使用颜色选择器选择颜色。
  2. 双向绑定：子组件支持 v-model，可以与父组件进行双向数据绑定。
  3. 弹出式设计：颜色选择器以弹窗形式展示，提供更好的用户体验。
  4. 可以选择默认主题色，标准色，及其自定义其他字体颜色。
  5. 样式优化：通过 SCSS 样式美化组件。

实现所需技术

  1. vue3+elementPlus。
  2. elementPlus的Popconfirm 气泡确认框。
  3. elementPlus的ColorPicker 颜色选择器。

从UI哪里拿到主题颜色标准色

// 主题色
const themeColors = ref([
  "#FFFFFF",
  "#000000",
  "#E7E6E6",
  "#44546A",
  "#4874CB",
  "#EE822F",
  "#F2BA02",
  "#75BD42",
  "#30C0B4",
  "#E54C5E",
]);
// 标准色 Standard color
const standardColors = ref([
  "#C00000",
  "#FF0000",
  "#FFC000",
  "#FFFF00",
  "#92D050",
  "#00B050",
  "#00B0F0",
  "#0070C0",
  "#002060",
  "#7030A0",
]);
// 主题渐变色
const gradientColors = ref([
  ["#F2F2F2", "#D9D9D9", "#BFBFBF", "#A6A6A6", "#808080"],
  ["#808080", "#595959", "#404040", "#262626", "#0D0D0D"],
  ["#D0CECE", "#AFABAB", "#767171", "#3B3838", "#181717"],
  ["#D6DCE5", "#ADB9CA", "#8497B0", "#333F50", "#222A35"],
  ["#DAE3F5", "#B6C7EA", "#91ACE0", "#2E54A1", "#1E386B"],
  ["#FCE6D5", "#F8CDAC", "#F5B482", "#C65F10", "#843F0B"],
  ["#FFF2CA", "#FEE695", "#FED961", "#B68C02", "#795D01"],
  ["#E3F2D9", "#C8E5B3", "#ACD78E", "#588E32", "#3B5F21"],
  ["#D4F4F2", "#A9E9E4", "#7DDFD7", "#249087", "#18605A"],
  ["#FADBDF", "#F5B7BF", "#EF949E", "#C81D31", "#851321"],
]);

进行子主组件的v-model实现

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String,
    default: "#FFFFFF",
  },
});
watch(
  () => props.modelValue,
  (newVal) => {
    // console.log("modelValue changed:", newVal);
    colorValue.value = newVal; // 更新子组件的内部状态
  }
);
const colorSelect = (val: any) => {
  colorValue.value = val;
  emit("update:modelValue", colorValue.value); // 更新父组件中的值
  handleCancel();
};

子组件布局实现

使用el-popover套一层，然后遍历主题色标准色进行flex布局，如果弹窗组件使用了:visible="popconfirmVisible" 则需要配置trigger="focus"进行鼠标移出弹窗隐藏弹窗。

<template>
  <div class="color-picker-wrapper" ref="wrapperRef">
    <el-popover
      width="205px"
      ref="colorPopover"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      v-model:visible="popconfirmVisible"
      trigger="focus"
    >
      <template #reference>
        <div @click="handleClick" class="color-box">
          <div
            class="color-pice"
            :style="{ backgroundColor: colorValue }"
          ></div>
        </div>
      </template>
      <div style="width: 180px; text-align: left">
        <div
          style="
            font-size: 12px;
            width: 100%;
            background-color: #f4f5f7;
            height: 20px;
            line-height: 20px;
            padding-left: 5px;
            margin-bottom: 5px;
            color: #444e63;
          "
        >
          主题颜色
        </div>
        <div
          style="height: 20px; display: flex; justify-content: space-between"
        >
          <div
            class="theme-color-item"
            v-for="(item, index) in themeColors"
            @click="colorSelect(item)"
            :key="index"
            :style="{ background: item }"
          ></div>
        </div>
        <div style="width: 100%; display: flex; justify-content: space-between">
          <div
            v-for="(item, index) in gradientColors"
            :key="index"
            style="
              height: 64px;
              width: 12px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <div
              v-for="(item1, index1) in item"
              :key="index1"
              @click="colorSelect(item1)"
              :style="{ background: item1 }"
              class="theme-color-block"
            ></div>
          </div>
        </div>
      </div>
      <div class="theme-color">标准色</div>
      <div style="height: 20px; display: flex; justify-content: space-between">
        <div
          class="theme-color-item"
          v-for="(item, index) in standardColors"
          :key="index"
          @click="colorSelect(item)"
          :style="{ background: item }"
        ></div>
      </div>
      <el-divider style="margin: 0; margin-top: 5px"></el-divider>

      <div class="colorPalette-box">
        <!-- <img :src="'../../assets/image/colorPalette.png':'../../assets/image/colorPalette.png'" style="width: 26px" /> -->
        <div class="colorPalette-text" @click="showColor" style="display: flex">
          <div style="" class="colorPalette-icon"></div>
          <div style="width: 90px">其他字体颜色...</div>
          <el-color-picker
            :teleported="false"
            v-model="colorValue"
            @change="colorChange"
            size="small"
          />
        </div>
      </div>
    </el-popover>
  </div>
</template>

子组件样式实现

样式中，需要修改elementPlus的组件,其中最需要修改el-color-picker使其拉长得以点击其他字体颜色...的div块唤醒弹窗。


<style lang="scss" scoped>
.color-box:hover {
  border-color: #409eff;
  transition: 0.5s;
}
.color-box {
  width: 22px;
  height: 22px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .color-pice {
    width: 14px;
    height: 14px;
  }
}
::v-deep .el-popconfirm__action {
  margin-top: 0px !important;
  text-align: left;
}
.theme-color-block {
  width: 12px;
  height: 12px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
}
.theme-color-block:hover {
  border: 1px solid #ffa800 !important;
  transition: 0.5s !important;
}
.theme-color-item {
  width: 12px;
  height: 12px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
}
.theme-color-item:hover {
  border: 1px solid #ffa800;
  transition: 0.5s;
}
.colorPalette-box {
  display: flex;
  font-size: 12px;
  width: 100%;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  padding-left: 2px;
  margin-bottom: 5px;
  margin-top: 6px;
  text-align: left;
  color: #444e63;
}
.colorPalette-box:hover {
  color: #165dff;
  .colorPalette-icon {
    background-image: url("../../assets/image/colorPaletteActive.png");
  }
}
.colorPalette-box:hover {
  background: #f2f2f2;
  transition: 0.3s;
}
.colorPalette-icon {
  width: 26px;
  height: 26px;
  position: relative;
  left: -5px;
  background-image: url("../../assets/image/colorPalette.png");
  background-repeat: repeat; /* 在两个方向上平铺背景图片 */
  background-size: cover; /* 覆盖整个元素，可能会被裁剪以适应尺寸 */
  background-position: center; /* 背景图片居中 */
}
.colorPalette-text {
  position: relative;
  margin-left: 4px;
}
.theme-color {
  font-size: 12px;
  width: 100%;
  background-color: #f4f5f7;
  height: 20px;
  text-align: left;
  line-height: 20px;
  padding-left: 5px;
  margin-bottom: 5px;
  margin-top: 6px;
  color: #444e63;
}
::v-deep .el-color-picker__panel {
  position: absolute;
  top: -0px !important;
  left: 180px !important;
}
::v-deep .el-color-picker__trigger {
  width: 179px;
  border: none;
  position: relative;
  top: 0px;
  left: -142px;
  z-index: 10000;
}
::v-deep .el-color-picker__color {
  display: none !important;
}
</style>

子组件全部代码：

<template>
  <div class="color-picker-wrapper" ref="wrapperRef">
    <el-popover
      width="205px"
      ref="colorPopover"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      v-model:visible="popconfirmVisible"
      trigger="focus"
    >
      <template #reference>
        <div @click="handleClick" class="color-box">
          <div
            class="color-pice"
            :style="{ backgroundColor: colorValue }"
          ></div>
        </div>
      </template>
      <div style="width: 180px; text-align: left">
        <div
          style="
            font-size: 12px;
            width: 100%;
            background-color: #f4f5f7;
            height: 20px;
            line-height: 20px;
            padding-left: 5px;
            margin-bottom: 5px;
            color: #444e63;
          "
        >
          主题颜色
        </div>
        <div
          style="height: 20px; display: flex; justify-content: space-between"
        >
          <div
            class="theme-color-item"
            v-for="(item, index) in themeColors"
            @click="colorSelect(item)"
            :key="index"
            :style="{ background: item }"
          ></div>
        </div>
        <div style="width: 100%; display: flex; justify-content: space-between">
          <div
            v-for="(item, index) in gradientColors"
            :key="index"
            style="
              height: 64px;
              width: 12px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <div
              v-for="(item1, index1) in item"
              :key="index1"
              @click="colorSelect(item1)"
              :style="{ background: item1 }"
              class="theme-color-block"
            ></div>
          </div>
        </div>
      </div>
      <div class="theme-color">标准色</div>
      <div style="height: 20px; display: flex; justify-content: space-between">
        <div
          class="theme-color-item"
          v-for="(item, index) in standardColors"
          :key="index"
          @click="colorSelect(item)"
          :style="{ background: item }"
        ></div>
      </div>
      <el-divider style="margin: 0; margin-top: 5px"></el-divider>

      <div class="colorPalette-box">
        <!-- <img :src="'../../assets/image/colorPalette.png':'../../assets/image/colorPalette.png'" style="width: 26px" /> -->
        <div class="colorPalette-text" @click="showColor" style="display: flex">
          <div style="" class="colorPalette-icon"></div>
          <div style="width: 90px">其他字体颜色...</div>
          <el-color-picker
            :teleported="false"
            v-model="colorValue"
            @change="colorChange"
            size="small"
          />
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, ref, watch } from "vue";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String,
    default: "#FFFFFF",
  },
});
watch(
  () => props.modelValue,
  (newVal) => {
    // console.log("modelValue changed:", newVal);
    colorValue.value = newVal; // 更新子组件的内部状态
  }
);
const colorValue = ref(props.modelValue);
const colorPopover: any = ref(null);
// 主题色
const themeColors = ref([
  "#FFFFFF",
  "#000000",
  "#E7E6E6",
  "#44546A",
  "#4874CB",
  "#EE822F",
  "#F2BA02",
  "#75BD42",
  "#30C0B4",
  "#E54C5E",
]);
// 标准色 Standard color
const standardColors = ref([
  "#C00000",
  "#FF0000",
  "#FFC000",
  "#FFFF00",
  "#92D050",
  "#00B050",
  "#00B0F0",
  "#0070C0",
  "#002060",
  "#7030A0",
]);
// 主题渐变色
const gradientColors = ref([
  ["#F2F2F2", "#D9D9D9", "#BFBFBF", "#A6A6A6", "#808080"],
  ["#808080", "#595959", "#404040", "#262626", "#0D0D0D"],
  ["#D0CECE", "#AFABAB", "#767171", "#3B3838", "#181717"],
  ["#D6DCE5", "#ADB9CA", "#8497B0", "#333F50", "#222A35"],
  ["#DAE3F5", "#B6C7EA", "#91ACE0", "#2E54A1", "#1E386B"],
  ["#FCE6D5", "#F8CDAC", "#F5B482", "#C65F10", "#843F0B"],
  ["#FFF2CA", "#FEE695", "#FED961", "#B68C02", "#795D01"],
  ["#E3F2D9", "#C8E5B3", "#ACD78E", "#588E32", "#3B5F21"],
  ["#D4F4F2", "#A9E9E4", "#7DDFD7", "#249087", "#18605A"],
  ["#FADBDF", "#F5B7BF", "#EF949E", "#C81D31", "#851321"],
]);
const popconfirmVisible = ref(false);
const showColor = () => {};
const colorChange = (val: any) => {
  emit("update:modelValue", colorValue.value); // 更新父组件中的值
  handleCancel();
};
const handleClick = () => {
  popconfirmVisible.value = true; // 显示 Popconfirm
};

const handleConfirm = () => {
  popconfirmVisible.value = false; // 隐藏 Popconfirm
};
const colorSelect = (val: any) => {
  colorValue.value = val;
  emit("update:modelValue", colorValue.value); // 更新父组件中的值
  handleCancel();
};
const handleCancel = () => {
  popconfirmVisible.value = false; // 隐藏 Popconfirm
};
const clicked = ref(false);
</script>
<style lang="scss" scoped>
.color-box:hover {
  border-color: #409eff;
  transition: 0.5s;
}
.color-box {
  width: 22px;
  height: 22px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .color-pice {
    width: 14px;
    height: 14px;
  }
}
::v-deep .el-popconfirm__action {
  margin-top: 0px !important;
  text-align: left;
}
.theme-color-block {
  width: 12px;
  height: 12px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
}
.theme-color-block:hover {
  border: 1px solid #ffa800 !important;
  transition: 0.5s !important;
}
.theme-color-item {
  width: 12px;
  height: 12px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
}
.theme-color-item:hover {
  border: 1px solid #ffa800;
  transition: 0.5s;
}
.colorPalette-box {
  display: flex;
  font-size: 12px;
  width: 100%;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  padding-left: 2px;
  margin-bottom: 5px;
  margin-top: 6px;
  text-align: left;
  color: #444e63;
}
.colorPalette-box:hover {
  color: #165dff;
  .colorPalette-icon {
    background-image: url("../../assets/image/colorPaletteActive.png");
  }
}
.colorPalette-box:hover {
  background: #f2f2f2;
  transition: 0.3s;
}
.colorPalette-icon {
  width: 26px;
  height: 26px;
  position: relative;
  left: -5px;
  background-image: url("../../assets/image/colorPalette.png");
  background-repeat: repeat; /* 在两个方向上平铺背景图片 */
  background-size: cover; /* 覆盖整个元素，可能会被裁剪以适应尺寸 */
  background-position: center; /* 背景图片居中 */
}
.colorPalette-text {
  position: relative;
  margin-left: 4px;
}
.theme-color {
  font-size: 12px;
  width: 100%;
  background-color: #f4f5f7;
  height: 20px;
  text-align: left;
  line-height: 20px;
  padding-left: 5px;
  margin-bottom: 5px;
  margin-top: 6px;
  color: #444e63;
}
::v-deep .el-color-picker__panel {
  position: absolute;
  top: -0px !important;
  left: 180px !important;
}
::v-deep .el-color-picker__trigger {
  width: 179px;
  border: none;
  position: relative;
  top: 0px;
  left: -142px;
  z-index: 10000;
}
::v-deep .el-color-picker__color {
  display: none !important;
}
</style>

父组件调用方式

 <template>
	ColourSle v-model="selectedColor"></ColourSle>
</template><
<script lang="ts" setup>
  const ColourSle = defineAsyncComponent(
    () => import("../../components/colourSle/index.vue")
  );
  const selectedColor = ref("#00FF00");
</script>

使用效果：
Vue3实现高仿word自定义颜色选择器组件（支持 v-model）
后续代码待优化，优化后会替换当前代码。

十六进制转RGB或RGBA方法：

调用方法：

for (let i = 0; i < stationOne.value.length; i++) {
     if (stationOne.value[i]) {
       stationOne.value[i].blemishColorRgb = hexToRgba(
         stationOne.value[i].blemishColor,
         -1
       );
     } else {
       console.warn(`stationOne[${i}] 数据不完整`);
     }
   }

方法实现：

// 十六进制转换成RGB颜色
function hexToRgba(hexColor: any, a = 1) {
  // 移除前缀#符号
  hexColor = hexColor.replace(/^\s*#|\s*$/g, "");
  // 将三位十六进制转换为六位
  if (hexColor.length === 3) {
    hexColor = hexColor.replace(/(.)/g, "$1$1");
  }
  // 提取R、G、B各自的十六进制表示方式
  const r = parseInt(hexColor.substr(0, 2), 16);
  const g = parseInt(hexColor.substr(2, 2), 16);
  const b = parseInt(hexColor.substr(4, 2), 16);
  const rgb = a < 0 || a > 1 ? `${r},${g},${b}` : `${r},${g},${b},${a}`;
  return rgb;
}

效果：
十六进制转RGB或RGBA方法

完结

Vue - 高效稳定的颜色选择器组件（支持鼠标拖动选择与手动输入16进制、rgb颜色值）
王二红
10-03 4052
Vue.js高效稳定的颜色选择器组件（支持鼠标拖动选择与手动输入16进制、rgb颜色值），vue-color官方文档，nuxt.js项目中使用颜色选择器，vColorPicker-基于Vue的颜色选择器插件，vue颜色选择器插件Vue自定义组件:颜色选择器及其实现原理vue颜色选择器el-color-picker的安装及使用，vue项目怎么写颜色选择的组件，VUE自定义取色器组件的实现，vue项目配置主题颜色。
vue3项目中-颜色选择器
m0_46562963的博客
03-31 2337
单单引入一个这个肯定不能实现我想要的效果。使用@ans1998/vue3-color。
基于vue3的取色器
qq_41675930的博客
11-16 3395
当前组件仅为展示组件，如果需要适应项目中不同的业务需求（例如：将取色器放在气泡卡片中...），还需进行二次封装。对取色盘添加鼠标事件（mousedown、mousemove、mouseup）指定当前在颜色盘中的位置。滑动色调选择器滑块调整当前选择选取的颜色值，也可调整当前颜色选取之后的透明度。组件支持：rgb、rgba、hex6、hex8、hsv格式的色值格式。可通过预先设置的颜色只来快捷显示、选中对应的色值。通过当前颜色盘位置计算当前选中位置的颜色值。通过滑块位置计算当前色值与透明度。
Vue3颜色选择器
懮俍的博客
05-29 1418
最近项目内需要一个颜色选择器，需要Hex8位，所以根据网上资源还有等自己封装了一个颜色选择器组件，以便后续能够使用等。注意，父组件需要传值color，子组件通过@update:color传值。传值需要传RGBA格式。附上HEX转RGBA 以及 RBGA转HEX方法。
Vue3颜色选择器（ColorPicker）
最新发布
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
01-16 2368
用于选择和展示颜色的颜色选择器组件，支持：自定义展示内容；自定义面板样式；不透明度；颜色预览块；三种尺寸；禁用；设定模式；预设色板；显示按钮；额外页脚；使用按钮控制面板；自定义主题色等；总之，功能丰富，简单易用😁😁
vue3 选择字体的颜色，使用vue3-colorpicker来选择颜色
花花鱼的专栏
09-22 2406
vue3 使用颜色选择器，来选择颜色。
Vue3+Ts 仿写ElementPlus组件库（更ing）
lunabar的博客
07-30 493
是传入参数类型是数组（独立参数组成的数组），数组子项数据类型为任意类型，数据数量为任意数量。
vue 日期面板_基于Vue2-Calendar改进的日历组件（含中文使用说明）
weixin_35738304的博客
01-12 2029
一，前言我是刚学Vue的菜鸟，在使用过程中需要用到日历控件，由于项目中原来是用jQuery写的，因此用了bootstarp的日历控件，但是配合Vue实在有点蛋疼，不够优雅……于是网上搜了好久找到了Vue2-Calendar，不用说，挺好用的，但是同时也发现这个组件有些问题，有些功能挺不符合我们的要求，于是着手改了一版二，改进的功能在Vue2-Calendar v2.2.4 版基础上作了优化。改进原...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
热门推荐
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：&lt;el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
旅游网站（携程旅行网页学习 vue3+element）
wxid_856d59fjl8ea22的博客
06-13 2866
【携程旅行网页学习】进入element官网，https://element-plus.org/zh-CN/，选择组件，然后选择Basic 基础组件中的Container 布局容器。根据上面的图，选择左上下结构，复制代码。在index.vue文件中，先设置一个简单页面，输入如下代码：（安装了插件就可以输入vue，然后选择默认vue结构，会自动补全vue结构）(1)在views文件夹中新建menu.vue、logo.vue和main.vue三个页面，然后将这三个组成部分的代码分别输入到对应的页面中。
vue20搭建的仿饿了么App
08-12
- **响应式数据绑定**：Vue.js的`v-model`指令用于双向数据绑定，确保视图和模型之间的同步。 - **指令**：如`v-if`、`v-for`、`v-bind`等，用于在DOM上应用特殊行为。 - **计算属性与侦听器**：用于处理复杂逻辑...
基于vue的颜色选择器组件
08-09
基于vue的颜色选择器组件
vue-colorPicker:基于vue的轻量颜色选择器
05-05
vue-colorPicker 基于vue的轻量颜色选择器
Vue中如何进行颜色选择与取色器？
程序猿徐师兄的博客
06-14 5985
如果我们想自定义颜色选择器组件，可以使用Vue.js的组件功能。下面是一个简单的自定义颜色选择器组件的示例代码。
vue3颜色选择器
echo_Ae的博客
07-07 4409
因为需求需要一个颜色选择器，因为我使用的是vue3，我也去github搜索了，也就vue-color比较多星星，然后就选用了它。但是呢！遇到一个问题然后就在issues里面找了一个vue3版本重写的，然后在基于它我在进行二开得到下面的结果安装依赖 代码使用 ts使用...
【vue】vue组件之颜色选择器（基于element-ui）
Meditation_Crazy
06-24 4231
vue组件之颜色选择器（基于element-ui）1. 代码(待优化，后面会改为双向绑定)2. 引用3. 示例 ps：需要引入element-ui 1. 代码(待优化，后面会改为双向绑定) <template> <div class="public-input-color-picker"> <el-input v-model="value2" :placeholder="placeholder" @input="_change"></el-input&g
在Vue中实现颜色选择器
此人很懒，未填写博客简介
07-07 2093
说明 对于前端程序员来说，很多时候写功能页面的都是直接调用UI库的组件，这也确实加快了开发效率，但是我个人认为这对开发基础有所阻碍，我本身也是一个初级前端程序员，所以在我闲暇之余，很注重基础技能的提升。 今天这篇文章是向大家分享一下我闲暇之余做的颜色选择器。 程序运行截图 程序说明 通过左边滑块选择一个基准颜色 再在右边的详细颜色中选择颜色 选中的颜色结果显示在左下角的小圆角方块里，同时结果将以rgb形式和十六进制形式显示在小圆角方块的右边两个输入框中 程序缺陷：用户可以通过该程序的输入框输入rgb或者
一款支持vue3 的颜色选择器
qq_45768871的博客
01-29 5600
一款支持vue3 的颜色选择器 npm 地址 特点 简单易用，UI在原插件基础上优化增加了圆角和过渡动画 提供以 npm 的形式安装提供全局组件 在支持 html5 input[type=‘color’] 的浏览器实现了「更多颜色」的功能 安装 npm i colorpicker-v3 使用 在main中注册组件 在 main.js 文件中引入插件并注册 import { createApp } from 'vue' import App from './App.vue' import ColorP
基于 Vue3 的颜色选择器
王文聪的博客
03-15 3903
1. 参考文章 https://blog.csdn.net/qq_43297527/article/details/110188935 https://blog.csdn.net/maple_leaf_red/article/details/108362552 https://github.com/xiaokaike/vue-color/blob/master/src/components/Sketch.vue 2. 原理 3. 遇到的问题 选择 value 和 saturation 值的圆圈的位置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值