打包问题
arco.design自带的a-color-picker色彩选择器有bug,暂时不能用于生产环境
该选择器打包时会报错,提示未找到a-color-picker的css样式文件,如果有用到色彩选择器的地方,请选择其它替代方案。
替代方案
这里推荐一个替代方案:vue-color-kit
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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。