头图

打包问题

arco.design自带的a-color-picker色彩选择器有bug,暂时不能用于生产环境
image.png
该选择器打包时会报错,提示未找到a-color-picker的css样式文件,如果有用到色彩选择器的地方,请选择其它替代方案。

替代方案

这里推荐一个替代方案:vue-color-kit
image.png

npm i vue-color-kit

使用

<ColorPicker 
 :theme="'light'" 
 sucker-hide 
 :colors-default="presetColors" 
 :color="themeColor" 
  @change-color="themeColorChange"
/>
import { ColorPicker } from "vue-color-kit";
import "vue-color-kit/dist/vue-color-kit.css";

// 主题色
const themeColor = ref<string>("#165DFF");

// 预设色彩
const presetColors = ref<string[]>([
    "#165DFF",
    "#F53F3F",
    "#F77234",
    "#FF7D00",
    "#F7BA1E",
    "#FADC19",
    "#9FDB1D",
    "#00B42A",
    "#3491FA",
    "#c34d9c",
    "#722ED1",
    "#E6A23C",
    "#F56C6C",
    "#409EFF",
    "#42b883",
    "#b1d391"
  ]);

interface IThemeColor {
  hex: string;
  hsv: {
    h: number;
    s: number;
    v: number;
  };
  rgba: {
    r: number;
    g: number;
    b: number;
    a: number;
  };
}

// 主题色设置
const themeColorChange = (value: IThemeColor) => {
  console.log('色彩选择',value)
};

参考资料:
npm官网:vue-color-kit


兔子先森
399 声望17 粉丝

致力于新技术的推广与优秀技术的普及。