vue3 二次封装颜色选择器组件

安装

npm install vue3-colorpicker

转自这个封装

使用

<template>
    <input-color v-model="form.rightColor" />
</template>
<script setup>
import { reactive, ref } from 'vue';
import InputColor from '@/components/ant-element/input-color.vue';
</script>

组件代码

<template>
  <div class="color-select-container">
    <color-picker
      v-model:pureColor="color"
      :format="props.format"
      @update:pureColor="updatePureColor"
    />
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from 'vue';
import { ColorPicker } from 'vue3-colorpicker';
import 'vue3-colorpicker/style.css';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  format: {
    type: String,
    default: 'rgb'
  }
});

const color = ref('');

const emits = defineEmits(['update:modelValue']);

const updatePureColor = (val) => {
  emits('update:modelValue', val);
};

onMounted(() => {
  const els = document.querySelectorAll(
    '.color-select-container .vc-color-wrap'
  );
  els.forEach((item) => {
    item.style.width = '100%';
  });
});

watch(
  () => props.modelValue,
  (val) => {
    color.value = val || 'rgba(0, 0, 0, 0)';
  },
  { immediate: true, deep: true }
);
</script>
<style scoped>
.color-select-container {
  position: relative;
  padding: 2px;
  border: 1px solid #d9d9d9;
}

.color-select-container .vc-color-wrap,
.color-select-container .ant-input-affix-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}
.color-select-container .ant-input-affix-wrapper {
  z-index: -1;
}

.color-select-container .vc-color-wrap {
  width: 100% !important;
}
</style>