58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
// src/directives/smartImage.js
|
|
import { imageCacheManager } from '@/utils/imageCacheManager'
|
|
|
|
export const smartImage = {
|
|
async mounted(el, binding) {
|
|
// 只有当绑定的值存在时才处理
|
|
if (binding.value) {
|
|
// 设置加载状态样式
|
|
el.style.opacity = '0'
|
|
el.style.transition = 'opacity 0.3s ease-in-out'
|
|
|
|
// 等待DOM更新确保样式生效
|
|
await nextTick()
|
|
|
|
try {
|
|
// 统一使用缓存管理器处理所有可缓存资源
|
|
if (imageCacheManager.isBuildAsset(binding.value)) {
|
|
await imageCacheManager.loadImage(binding.value)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
} else {
|
|
// 外部链接直接加载
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
} catch (error) {
|
|
console.warn(`图片加载失败: ${binding.value}`, error)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
}
|
|
},
|
|
|
|
async updated(el, binding) {
|
|
if (binding.value !== binding.oldValue && binding.value) {
|
|
el.style.opacity = '0'
|
|
|
|
// 等待DOM更新确保样式生效
|
|
await nextTick()
|
|
|
|
try {
|
|
if (imageCacheManager.isBuildAsset(binding.value)) {
|
|
await imageCacheManager.loadImage(binding.value)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
} else {
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
} catch (error) {
|
|
console.warn(`图片更新失败: ${binding.value}`, error)
|
|
el.src = binding.value
|
|
el.style.opacity = '1'
|
|
}
|
|
}
|
|
},
|
|
}
|