其他选择器：一款支持vue3 的颜色选择器 | ColorPickerV3基于vue3的颜色选择器支持颜色透明度与rgba、hexhttps://colorpickerv3.wcrane.cn/guide/#%E7%89%B9%E7%82%B9

这个选择器也挺好看的， 只是貌似不能外部打开选择器面板

官网：Webpack Apphttps://aesoper101.github.io/vue3-colorpicker/?path=/story/example-introduction--page

官方示例：Webpack Apphttps://aesoper101.github.io/vue3-colorpicker/?path=/story/example-colorpicker--square&args=isWidget:true;format:prgb 

优点： 

• 支持外部打开选择器面板
• 支持渐变色 

安装

npm i -S vue3-colorpicker

 引入

import Vue3ColorPicker from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

createApp(App)
  .use(router)
  .use(Vue3ColorPicker)
  .mount("#app");

使用：

<template>
  <div class="main">
    <color-picker
      v-model:pureColor="pureColor"
      :isWidget="isShow"
      :disableHistory="true"
      format="hex"
      :zIndex="1"
      @pureColorChange="handle_pureColorChange"
    />
    <el-button @click="isShow = true">打开</el-button>
    <el-button @click="isShow = false">关闭</el-button>
  </div>
</template>
<script setup>
import { ref } from "vue";
const pureColor = ref("#71afe5");

const isShow = ref(false);

const handle_pureColorChange = (e) => {
  console.log(e);
};
</script>
<style lang="scss" scoped>
.main {
  :deep(.vc-color-wrap) {
    width: 0;
  }
}
</style>

效果