27 lines
632 B
TypeScript
27 lines
632 B
TypeScript
|
import { getImageMainColor } from '@/utils/tools';
|
||
|
|
|
||
|
|
// 创建图片主色调指令
|
||
|
|
const imageMainColorDirective = {
|
||
|
|
mounted(el: HTMLElement, binding: any) {
|
||
|
|
const imageUrl = binding.value;
|
||
|
|
|
||
|
|
if (!imageUrl) return;
|
||
|
|
|
||
|
|
getImageMainColor(imageUrl)
|
||
|
|
.then(color => {
|
||
|
|
el.style.backgroundColor = color;
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('获取图片主色调失败:', error);
|
||
|
|
// 设置默认背景色
|
||
|
|
el.style.backgroundColor = '#E6E6E8';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
export default {
|
||
|
|
install(app: any) {
|
||
|
|
app.directive('image-main-color', imageMainColorDirective);
|
||
|
|
}
|
||
|
|
};
|