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

美食家大橙子  论坛元老 | 3 天前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1885|帖子 1885|积分 5655

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

需求分析

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




需求功能

   

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

   

  • vue3+elementPlus。
  • elementPlus的Popconfirm 气泡确认框。
  • elementPlus的ColorPicker 颜色选择器。
  从UI哪里拿到主题颜色标准色

  1. // 主题色
  2. const themeColors = ref([
  3.   "#FFFFFF",
  4.   "#000000",
  5.   "#E7E6E6",
  6.   "#44546A",
  7.   "#4874CB",
  8.   "#EE822F",
  9.   "#F2BA02",
  10.   "#75BD42",
  11.   "#30C0B4",
  12.   "#E54C5E",
  13. ]);
  14. // 标准色 Standard color
  15. const standardColors = ref([
  16.   "#C00000",
  17.   "#FF0000",
  18.   "#FFC000",
  19.   "#FFFF00",
  20.   "#92D050",
  21.   "#00B050",
  22.   "#00B0F0",
  23.   "#0070C0",
  24.   "#002060",
  25.   "#7030A0",
  26. ]);
  27. // 主题渐变色
  28. const gradientColors = ref([
  29.   ["#F2F2F2", "#D9D9D9", "#BFBFBF", "#A6A6A6", "#808080"],
  30.   ["#808080", "#595959", "#404040", "#262626", "#0D0D0D"],
  31.   ["#D0CECE", "#AFABAB", "#767171", "#3B3838", "#181717"],
  32.   ["#D6DCE5", "#ADB9CA", "#8497B0", "#333F50", "#222A35"],
  33.   ["#DAE3F5", "#B6C7EA", "#91ACE0", "#2E54A1", "#1E386B"],
  34.   ["#FCE6D5", "#F8CDAC", "#F5B482", "#C65F10", "#843F0B"],
  35.   ["#FFF2CA", "#FEE695", "#FED961", "#B68C02", "#795D01"],
  36.   ["#E3F2D9", "#C8E5B3", "#ACD78E", "#588E32", "#3B5F21"],
  37.   ["#D4F4F2", "#A9E9E4", "#7DDFD7", "#249087", "#18605A"],
  38.   ["#FADBDF", "#F5B7BF", "#EF949E", "#C81D31", "#851321"],
  39. ]);
复制代码
进行子主组件的v-model实现

  1. const emit = defineEmits(["update:modelValue"]);
  2. const props = defineProps({
  3.   modelValue: {
  4.     type: String,
  5.     default: "#FFFFFF",
  6.   },
  7. });
  8. watch(
  9.   () => props.modelValue,
  10.   (newVal) => {
  11.     // console.log("modelValue changed:", newVal);
  12.     colorValue.value = newVal; // 更新子组件的内部状态
  13.   }
  14. );
  15. const colorSelect = (val: any) => {
  16.   colorValue.value = val;
  17.   emit("update:modelValue", colorValue.value); // 更新父组件中的值
  18.   handleCancel();
  19. };
复制代码
子组件布局实现

使用el-popover套一层，然后遍历主题色标准色进行flex布局，假如弹窗组件使用了:visible="popconfirmVisible" 则需要配置trigger="focus"进行鼠标移出弹窗隐蔽弹窗。
  1. <template>
  2.   <div class="color-picker-wrapper" ref="wrapperRef">
  3.     <el-popover
  4.       width="205px"
  5.       ref="colorPopover"
  6.       @confirm="handleConfirm"
  7.       @cancel="handleCancel"
  8.       v-model:visible="popconfirmVisible"
  9.       trigger="focus"
  10.     >
  11.       <template #reference>
  12.         <div @click="handleClick" class="color-box">
  13.           <div
  14.             class="color-pice"
  15.             :style="{ backgroundColor: colorValue }"
  16.           ></div>
  17.         </div>
  18.       </template>
  19.       <div style="width: 180px; text-align: left">
  20.         <div
  21.           style="
  22.             font-size: 12px;
  23.             width: 100%;
  24.             background-color: #f4f5f7;
  25.             height: 20px;
  26.             line-height: 20px;
  27.             padding-left: 5px;
  28.             margin-bottom: 5px;
  29.             color: #444e63;
  30.           "
  31.         >
  32.           主题颜色
  33.         </div>
  34.         <div
  35.           style="height: 20px; display: flex; justify-content: space-between"
  36.         >
  37.           <div
  38.             class="theme-color-item"
  39.             v-for="(item, index) in themeColors"
  40.             @click="colorSelect(item)"
  41.             :key="index"
  42.             :style="{ background: item }"
  43.           ></div>
  44.         </div>
  45.         <div style="width: 100%; display: flex; justify-content: space-between">
  46.           <div
  47.             v-for="(item, index) in gradientColors"
  48.             :key="index"
  49.             style="
  50.               height: 64px;
  51.               width: 12px;
  52.               display: flex;
  53.               flex-direction: column;
  54.               justify-content: space-between;
  55.             "
  56.           >
  57.             <div
  58.               v-for="(item1, index1) in item"
  59.               :key="index1"
  60.               @click="colorSelect(item1)"
  61.               :style="{ background: item1 }"
  62.               class="theme-color-block"
  63.             ></div>
  64.           </div>
  65.         </div>
  66.       </div>
  67.       <div class="theme-color">标准色</div>
  68.       <div style="height: 20px; display: flex; justify-content: space-between">
  69.         <div
  70.           class="theme-color-item"
  71.           v-for="(item, index) in standardColors"
  72.           :key="index"
  73.           @click="colorSelect(item)"
  74.           :style="{ background: item }"
  75.         ></div>
  76.       </div>
  77.       <el-divider style="margin: 0; margin-top: 5px"></el-divider>
  79.       <div class="colorPalette-box">
  80.         <!-- <img :src="'../../assets/image/colorPalette.png':'../../assets/image/colorPalette.png'" style="width: 26px" /> -->
  81.         <div class="colorPalette-text" @click="showColor" style="display: flex">
  82.           <div style="" class="colorPalette-icon"></div>
  83.           <div style="width: 90px">其他字体颜色...</div>
  84.           <el-color-picker
  85.             :teleported="false"
  86.             v-model="colorValue"
  87.             @change="colorChange"
  88.             size="small"
  89.           />
  90.         </div>
  91.       </div>
  92.     </el-popover>
  93.   </div>
  94. </template>
复制代码
子组件样式实现

样式中，需要修改elementPlus的组件,其中最需要修改el-color-picker使其拉长得以点击其他字体颜色...的div块唤醒弹窗。
  2. <style lang="scss" scoped>
  3. .color-box:hover {
  4.   border-color: #409eff;
  5.   transition: 0.5s;
  6. }
  7. .color-box {
  8.   width: 22px;
  9.   height: 22px;
  10.   background-color: #fff;
  11.   border: 1px solid #dcdfe6;
  12.   border-radius: 2px;
  13.   display: flex;
  14.   justify-content: center;
  15.   align-items: center;
  16.   cursor: pointer;
  17.   .color-pice {
  18.     width: 14px;
  19.     height: 14px;
  20.   }
  21. }
  22. ::v-deep .el-popconfirm__action {
  23.   margin-top: 0px !important;
  24.   text-align: left;
  25. }
  26. .theme-color-block {
  27.   width: 12px;
  28.   height: 12px;
  29.   cursor: pointer;
  30.   border: 1px solid #dcdfe6;
  31. }
  32. .theme-color-block:hover {
  33.   border: 1px solid #ffa800 !important;
  34.   transition: 0.5s !important;
  35. }
  36. .theme-color-item {
  37.   width: 12px;
  38.   height: 12px;
  39.   cursor: pointer;
  40.   border: 1px solid #dcdfe6;
  41. }
  42. .theme-color-item:hover {
  43.   border: 1px solid #ffa800;
  44.   transition: 0.5s;
  45. }
  46. .colorPalette-box {
  47.   display: flex;
  48.   font-size: 12px;
  49.   width: 100%;
  50.   cursor: pointer;
  51.   height: 26px;
  52.   line-height: 26px;
  53.   padding-left: 2px;
  54.   margin-bottom: 5px;
  55.   margin-top: 6px;
  56.   text-align: left;
  57.   color: #444e63;
  58. }
  59. .colorPalette-box:hover {
  60.   color: #165dff;
  61.   .colorPalette-icon {
  62.     background-image: url("../../assets/image/colorPaletteActive.png");
  63.   }
  64. }
  65. .colorPalette-box:hover {
  66.   background: #f2f2f2;
  67.   transition: 0.3s;
  68. }
  69. .colorPalette-icon {
  70.   width: 26px;
  71.   height: 26px;
  72.   position: relative;
  73.   left: -5px;
  74.   background-image: url("../../assets/image/colorPalette.png");
  75.   background-repeat: repeat; /* 在两个方向上平铺背景图片 */
  76.   background-size: cover; /* 覆盖整个元素，可能会被裁剪以适应尺寸 */
  77.   background-position: center; /* 背景图片居中 */
  78. }
  79. .colorPalette-text {
  80.   position: relative;
  81.   margin-left: 4px;
  82. }
  83. .theme-color {
  84.   font-size: 12px;
  85.   width: 100%;
  86.   background-color: #f4f5f7;
  87.   height: 20px;
  88.   text-align: left;
  89.   line-height: 20px;
  90.   padding-left: 5px;
  91.   margin-bottom: 5px;
  92.   margin-top: 6px;
  93.   color: #444e63;
  94. }
  95. ::v-deep .el-color-picker__panel {
  96.   position: absolute;
  97.   top: -0px !important;
  98.   left: 180px !important;
  99. }
  100. ::v-deep .el-color-picker__trigger {
  101.   width: 179px;
  102.   border: none;
  103.   position: relative;
  104.   top: 0px;
  105.   left: -142px;
  106.   z-index: 10000;
  107. }
  108. ::v-deep .el-color-picker__color {
  109.   display: none !important;
  110. }
  111. </style>
复制代码
子组件全部代码：

  1. <template>
  2.   <div class="color-picker-wrapper" ref="wrapperRef">
  3.     <el-popover
  4.       width="205px"
  5.       ref="colorPopover"
  6.       @confirm="handleConfirm"
  7.       @cancel="handleCancel"
  8.       v-model:visible="popconfirmVisible"
  9.       trigger="focus"
  10.     >
  11.       <template #reference>
  12.         <div @click="handleClick" class="color-box">
  13.           <div
  14.             class="color-pice"
  15.             :style="{ backgroundColor: colorValue }"
  16.           ></div>
  17.         </div>
  18.       </template>
  19.       <div style="width: 180px; text-align: left">
  20.         <div
  21.           style="
  22.             font-size: 12px;
  23.             width: 100%;
  24.             background-color: #f4f5f7;
  25.             height: 20px;
  26.             line-height: 20px;
  27.             padding-left: 5px;
  28.             margin-bottom: 5px;
  29.             color: #444e63;
  30.           "
  31.         >
  32.           主题颜色
  33.         </div>
  34.         <div
  35.           style="height: 20px; display: flex; justify-content: space-between"
  36.         >
  37.           <div
  38.             class="theme-color-item"
  39.             v-for="(item, index) in themeColors"
  40.             @click="colorSelect(item)"
  41.             :key="index"
  42.             :style="{ background: item }"
  43.           ></div>
  44.         </div>
  45.         <div style="width: 100%; display: flex; justify-content: space-between">
  46.           <div
  47.             v-for="(item, index) in gradientColors"
  48.             :key="index"
  49.             style="
  50.               height: 64px;
  51.               width: 12px;
  52.               display: flex;
  53.               flex-direction: column;
  54.               justify-content: space-between;
  55.             "
  56.           >
  57.             <div
  58.               v-for="(item1, index1) in item"
  59.               :key="index1"
  60.               @click="colorSelect(item1)"
  61.               :style="{ background: item1 }"
  62.               class="theme-color-block"
  63.             ></div>
  64.           </div>
  65.         </div>
  66.       </div>
  67.       <div class="theme-color">标准色</div>
  68.       <div style="height: 20px; display: flex; justify-content: space-between">
  69.         <div
  70.           class="theme-color-item"
  71.           v-for="(item, index) in standardColors"
  72.           :key="index"
  73.           @click="colorSelect(item)"
  74.           :style="{ background: item }"
  75.         ></div>
  76.       </div>
  77.       <el-divider style="margin: 0; margin-top: 5px"></el-divider>
  79.       <div class="colorPalette-box">
  80.         <!-- <img :src="'../../assets/image/colorPalette.png':'../../assets/image/colorPalette.png'" style="width: 26px" /> -->
  81.         <div class="colorPalette-text" @click="showColor" style="display: flex">
  82.           <div style="" class="colorPalette-icon"></div>
  83.           <div style="width: 90px">其他字体颜色...</div>
  84.           <el-color-picker
  85.             :teleported="false"
  86.             v-model="colorValue"
  87.             @change="colorChange"
  88.             size="small"
  89.           />
  90.         </div>
  91.       </div>
  92.     </el-popover>
  93.   </div>
  94. </template>
  95. <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);// 主题色
  96. const themeColors = ref([
  97.   "#FFFFFF",
  98.   "#000000",
  99.   "#E7E6E6",
  100.   "#44546A",
  101.   "#4874CB",
  102.   "#EE822F",
  103.   "#F2BA02",
  104.   "#75BD42",
  105.   "#30C0B4",
  106.   "#E54C5E",
  107. ]);
  108. // 标准色 Standard color
  109. const standardColors = ref([
  110.   "#C00000",
  111.   "#FF0000",
  112.   "#FFC000",
  113.   "#FFFF00",
  114.   "#92D050",
  115.   "#00B050",
  116.   "#00B0F0",
  117.   "#0070C0",
  118.   "#002060",
  119.   "#7030A0",
  120. ]);
  121. // 主题渐变色
  122. const gradientColors = ref([
  123.   ["#F2F2F2", "#D9D9D9", "#BFBFBF", "#A6A6A6", "#808080"],
  124.   ["#808080", "#595959", "#404040", "#262626", "#0D0D0D"],
  125.   ["#D0CECE", "#AFABAB", "#767171", "#3B3838", "#181717"],
  126.   ["#D6DCE5", "#ADB9CA", "#8497B0", "#333F50", "#222A35"],
  127.   ["#DAE3F5", "#B6C7EA", "#91ACE0", "#2E54A1", "#1E386B"],
  128.   ["#FCE6D5", "#F8CDAC", "#F5B482", "#C65F10", "#843F0B"],
  129.   ["#FFF2CA", "#FEE695", "#FED961", "#B68C02", "#795D01"],
  130.   ["#E3F2D9", "#C8E5B3", "#ACD78E", "#588E32", "#3B5F21"],
  131.   ["#D4F4F2", "#A9E9E4", "#7DDFD7", "#249087", "#18605A"],
  132.   ["#FADBDF", "#F5B7BF", "#EF949E", "#C81D31", "#851321"],
  133. ]);
  134. 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>
  135. <style lang="scss" scoped>
  136. .color-box:hover {
  137.   border-color: #409eff;
  138.   transition: 0.5s;
  139. }
  140. .color-box {
  141.   width: 22px;
  142.   height: 22px;
  143.   background-color: #fff;
  144.   border: 1px solid #dcdfe6;
  145.   border-radius: 2px;
  146.   display: flex;
  147.   justify-content: center;
  148.   align-items: center;
  149.   cursor: pointer;
  150.   .color-pice {
  151.     width: 14px;
  152.     height: 14px;
  153.   }
  154. }
  155. ::v-deep .el-popconfirm__action {
  156.   margin-top: 0px !important;
  157.   text-align: left;
  158. }
  159. .theme-color-block {
  160.   width: 12px;
  161.   height: 12px;
  162.   cursor: pointer;
  163.   border: 1px solid #dcdfe6;
  164. }
  165. .theme-color-block:hover {
  166.   border: 1px solid #ffa800 !important;
  167.   transition: 0.5s !important;
  168. }
  169. .theme-color-item {
  170.   width: 12px;
  171.   height: 12px;
  172.   cursor: pointer;
  173.   border: 1px solid #dcdfe6;
  174. }
  175. .theme-color-item:hover {
  176.   border: 1px solid #ffa800;
  177.   transition: 0.5s;
  178. }
  179. .colorPalette-box {
  180.   display: flex;
  181.   font-size: 12px;
  182.   width: 100%;
  183.   cursor: pointer;
  184.   height: 26px;
  185.   line-height: 26px;
  186.   padding-left: 2px;
  187.   margin-bottom: 5px;
  188.   margin-top: 6px;
  189.   text-align: left;
  190.   color: #444e63;
  191. }
  192. .colorPalette-box:hover {
  193.   color: #165dff;
  194.   .colorPalette-icon {
  195.     background-image: url("../../assets/image/colorPaletteActive.png");
  196.   }
  197. }
  198. .colorPalette-box:hover {
  199.   background: #f2f2f2;
  200.   transition: 0.3s;
  201. }
  202. .colorPalette-icon {
  203.   width: 26px;
  204.   height: 26px;
  205.   position: relative;
  206.   left: -5px;
  207.   background-image: url("../../assets/image/colorPalette.png");
  208.   background-repeat: repeat; /* 在两个方向上平铺背景图片 */
  209.   background-size: cover; /* 覆盖整个元素，可能会被裁剪以适应尺寸 */
  210.   background-position: center; /* 背景图片居中 */
  211. }
  212. .colorPalette-text {
  213.   position: relative;
  214.   margin-left: 4px;
  215. }
  216. .theme-color {
  217.   font-size: 12px;
  218.   width: 100%;
  219.   background-color: #f4f5f7;
  220.   height: 20px;
  221.   text-align: left;
  222.   line-height: 20px;
  223.   padding-left: 5px;
  224.   margin-bottom: 5px;
  225.   margin-top: 6px;
  226.   color: #444e63;
  227. }
  228. ::v-deep .el-color-picker__panel {
  229.   position: absolute;
  230.   top: -0px !important;
  231.   left: 180px !important;
  232. }
  233. ::v-deep .el-color-picker__trigger {
  234.   width: 179px;
  235.   border: none;
  236.   position: relative;
  237.   top: 0px;
  238.   left: -142px;
  239.   z-index: 10000;
  240. }
  241. ::v-deep .el-color-picker__color {
  242.   display: none !important;
  243. }
  244. </style>
复制代码
父组件调用方式

  1. <template>
  2.         ColourSle v-model="selectedColor"></ColourSle>
  3. </template><
  4. <script lang="ts" setup>
  5.   const ColourSle = defineAsyncComponent(
  6.     () => import("../../components/colourSle/index.vue")
  7.   );
  8.   const selectedColor = ref("#00FF00");
  9. </script>
复制代码
使用结果：

后续代码待优化，优化后会更换当前代码。
完结


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

美食家大橙子

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表