vue3项目中-颜色选择器

使用@ans1998/vue3-color

引入依赖 :

npm i @ans1998/vue3-color

我实现的效果：

颜色选择器主要代码：

  import { Sketch } from '@ans1998/vue3-color'; 
   
   //颜色选择器
  <Sketch
        style="position: absolute; z-index: 1"
        v-model="colorObj.color"
        v-show="colorObj.showSelColor"
        @changButton="changeColor"
      />

 单单引入一个这个肯定不能实现我想要的效果。于是我进行进一步处理,这样就可以在界面显示出我想要的颜色：

<div>
      <div
        class="color_selector"
        @click="
          () => {
            colorObj.showSelColor = true;
          }
        "
      >
        <div class="color_selector_inner" :style="{ backgroundColor: hex }"> </div>
      </div>
      <Sketch
        style="position: absolute; z-index: 1"
        v-model="colorObj.color"
        v-show="colorObj.showSelColor"
        @changButton="changeColor"
      />
    </div>

<style>
.color_selector {
    width: 28px;
    height: 28px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #ededed;
    cursor: pointer;
    .color_selector_inner {
      width: 100%;
      height: 100%;
    }
  }
</style>

这是全部代码！ 我封装成了一个组件，需要时直接引入就行！

组件代码：

<template>
  <div class="header-color">
    <div class="hex">{{ hex }}</div>
    <div>
      <div
        class="color_selector"
        @click="
          () => {
            colorObj.showSelColor = true;
          }
        "
      >
        <div class="color_selector_inner" :style="{ backgroundColor: hex }"> </div>
      </div>
      <Sketch
        style="position: absolute; z-index: 1"
        v-model="colorObj.color"
        v-show="colorObj.showSelColor"
        @changButton="changeColor"
      />
    </div>
    <div
      ><down-outlined style="font-size: 9px" v-if="!colorObj.showSelColor" /><up-outlined
        style="font-size: 9px"
        v-else
    /></div>
  </div>
</template>

<script setup lang="ts">
  import { Sketch } from '@ans1998/vue3-color';
  import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    hex: {
      type: String,
      default: '#FFFFFF',
    },
    data: {
      type: Object,
      default: () => {},
    },
  });
  const emits = defineEmits(['colorHex']);
  const colorObj = reactive({
    color: '',
    showSelColor: false,
  });
  const changeColor = (e) => {
    // console.log(e);
    if (!e.isOk) {
      colorObj.showSelColor = false;
      return;
    }
    // colorObj.hex = '#' + e.hex;
    // props.hex = '#' + e.hex;
    emits('colorHex', e, props.data);
    colorObj.showSelColor = false;
  };
</script>

<style lang="less" scoped>
  .header-color {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 130px;
    height: 36px;
    border-radius: 4px;
    opacity: 1;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #ededed;
    .hex {
      width: 60px;
    }
  }
  .color_selector {
    width: 28px;
    height: 28px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #ededed;
    cursor: pointer;
    .color_selector_inner {
      width: 100%;
      height: 100%;
    }
  }
</style>