diff --git a/src/directives/smartImage.js b/src/directives/smartImage.js index f9b9b5f..5374ae5 100644 --- a/src/directives/smartImage.js +++ b/src/directives/smartImage.js @@ -4,15 +4,20 @@ import { nextTick } from 'vue' export const smartImage = { async mounted(el, binding) { + // 检查是否需要跳过渐变效果 + const skipFade = binding.modifiers.noFade || binding.arg === 'noFade' + // 设置加载状态样式 - el.style.opacity = '0' - el.style.transition = 'opacity 0.3s ease-in-out' + if (!skipFade) { + el.style.opacity = '0' + el.style.transition = 'opacity 0.3s ease-in-out' + } // 获取 URL:优先使用 binding.value,如果为空则尝试从元素获取 const url = getValidUrl(binding.value, el) if (url) { - await processImage(el, url) + await processImage(el, url, skipFade) // 保存当前处理的 URL,用于后续比较 el._smartImageCurrentUrl = url @@ -20,11 +25,16 @@ export const smartImage = { el._smartImageOriginalBindingValue = binding.value } else { // 如果 URL 无效,恢复透明度 - el.style.opacity = '1' + if (!skipFade) { + el.style.opacity = '1' + } } }, async updated(el, binding) { + // 检查是否需要跳过渐变效果 + const skipFade = binding.modifiers.noFade || binding.arg === 'noFade' + // 获取当前有效的 URL const currentUrl = getValidUrl(binding.value, el) @@ -37,8 +47,10 @@ export const smartImage = { if (bindingChanged || elementSrcChanged) { if (currentUrl && currentUrl !== el._smartImageCurrentUrl) { // 设置加载状态 - el.style.opacity = '0' - await processImage(el, currentUrl) + if (!skipFade) { + el.style.opacity = '0' + } + await processImage(el, currentUrl, skipFade) el._smartImageCurrentUrl = currentUrl el._smartImageOriginalBindingValue = binding.value } @@ -79,7 +91,7 @@ function getValidUrl(bindingValue, el) { } // 将图片处理逻辑提取为单独函数 -async function processImage(el, url) { +async function processImage(el, url, skipFade = false) { if (!url) { return } @@ -94,7 +106,9 @@ async function processImage(el, url) { // 设置加载完成的回调 const handleLoad = () => { - el.style.opacity = '1' + if (!skipFade) { + el.style.opacity = '1' + } el.removeEventListener('load', handleLoad) } el.addEventListener('load', handleLoad) @@ -103,7 +117,9 @@ async function processImage(el, url) { // 设置错误处理回调 const handleError = (error) => { console.error(`图片加载失败:`, url, error) - el.style.opacity = '1' + if (!skipFade) { + el.style.opacity = '1' + } el.removeEventListener('error', handleError) } el.addEventListener('error', handleError) @@ -114,7 +130,9 @@ async function processImage(el, url) { } else { // 外部链接直接加载 const handleLoad = () => { - el.style.opacity = '1' + if (!skipFade) { + el.style.opacity = '1' + } el.removeEventListener('load', handleLoad) } el.addEventListener('load', handleLoad) @@ -122,7 +140,9 @@ async function processImage(el, url) { const handleError = (error) => { // console.error(`外部图片加载失败:`, url, error) - el.style.opacity = '1' + if (!skipFade) { + el.style.opacity = '1' + } el.removeEventListener('error', handleError) } el.addEventListener('error', handleError) @@ -133,6 +153,8 @@ async function processImage(el, url) { } catch (error) { console.warn(`图片处理失败: ${url}`, error) el.src = url - el.style.opacity = '1' + if (!skipFade) { + el.style.opacity = '1' + } } }