feat(图片加载指令): 部分特殊图片不需要渐渐显现的效果，增加指令后缀v-smart-img.noFade作为取消效果的标志

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'
+    }
   }
 }