tdesign-mobile-vue
Version:
tdesign-mobile-vue
1 lines • 9.2 kB
Source Map (JSON)
{"version":3,"file":"image.mjs","sources":["../../src/image/image.tsx"],"sourcesContent":["import { ref, computed, defineComponent, watchEffect } from 'vue';\nimport { useIntersectionObserver } from '@vueuse/core';\nimport { CloseIcon } from 'tdesign-icons-vue-next';\n\nimport TLoading from '../loading';\nimport config from '../config';\nimport { useTNodeJSX } from '../hooks/tnode';\nimport { usePrefixClass } from '../hooks/useClass';\n\nimport props from './props';\n\nconst { prefix } = config;\n\nexport default defineComponent({\n name: `${prefix}-image`,\n props,\n setup(props, context) {\n const imageClass = usePrefixClass('image');\n const renderTNodeJSX = useTNodeJSX();\n\n // 默认loading和error状态展示，slot支持Node和Function\n const closeIcon = <CloseIcon size=\"22px\" />;\n const LoadingIcon = <TLoading theme=\"dots\" inheritColor={true} />;\n\n // 记录图片的loading、error状态\n const isLoading = ref(true);\n const isError = ref(false);\n\n // 图片自定义样式\n const imageStyles = computed(() => ({\n objectFit: props.fit,\n objectPosition: props.position,\n }));\n const imageClasses = computed(() => ({\n [`${imageClass.value}`]: true,\n [`${imageClass.value}--${props.shape}`]: true,\n }));\n\n // 图片懒加载\n const imageDOM = ref();\n const realSrc = ref('');\n\n watchEffect(() => {\n realSrc.value = props.lazy ? '' : props.src;\n });\n\n const { stop } = useIntersectionObserver(imageDOM, ([{ isIntersecting }], observerElement) => {\n if (isIntersecting && props.lazy) {\n // 停止监听\n stop();\n realSrc.value = props.src;\n }\n });\n\n // 图片加载完成回调\n const handleImgLoadCompleted = (e: Event) => {\n props.onLoad?.({ e });\n isLoading.value = false;\n };\n\n // 图片加载失败回调\n const handleImgLoadError = (e: Event) => {\n if (realSrc.value === '') {\n return;\n }\n props.onError?.({ e });\n isLoading.value = false;\n isError.value = true;\n if (props.fallback) {\n realSrc.value = props.fallback;\n isError.value = false;\n }\n };\n\n const maskContent = computed(() => {\n const statusContent = () => {\n if (context.slots?.loading && isLoading.value) {\n return renderTNodeJSX('loading');\n }\n if (!context.slots?.loading && isLoading.value) {\n return LoadingIcon;\n }\n if (context.slots?.error && isError.value) {\n return renderTNodeJSX('error');\n }\n if (!context.slots?.error && isError.value) {\n return closeIcon;\n }\n return false;\n };\n const node = () => {\n if (isLoading.value || isError.value) {\n if (props.lazy && realSrc.value === '') {\n return;\n }\n return <div class={`${imageClass.value}__mask`}>{statusContent()}</div>;\n }\n };\n return node();\n });\n\n return () => {\n return (\n <div class={imageClasses.value}>\n {maskContent.value}\n <picture>\n {props.srcset &&\n Object.entries(props.srcset).map((item, index) => <source key={index} type={item[0]} srcset={item[1]} />)}\n <img\n ref={imageDOM}\n class={`${imageClass.value}__img`}\n style={imageStyles.value}\n src={realSrc.value}\n alt={props.alt}\n referrerpolicy={props.referrerpolicy}\n onLoad={handleImgLoadCompleted}\n onError={handleImgLoadError}\n />\n </picture>\n </div>\n );\n };\n },\n});\n"],"names":["prefix","config","defineComponent","name","props","setup","context","imageClass","usePrefixClass","renderTNodeJSX","useTNodeJSX","closeIcon","_createVNode","CloseIcon","LoadingIcon","isLoading","ref","isError","imageStyles","computed","objectFit","fit","objectPosition","position","imageClasses","_defineProperty","concat","value","shape","imageDOM","realSrc","watchEffect","lazy","src","_useIntersectionObser","useIntersectionObserver","_ref2","observerElement","_ref3","_slicedToArray","isIntersecting","stop","handleImgLoadCompleted","e","_props2$onLoad","onLoad","handleImgLoadError","_props2$onError","onError","fallback","maskContent","statusContent","_context$slots","_context$slots2","_context$slots3","_context$slots4","slots","loading","error","node","srcset","Object","entries","map","item","index","alt","referrerpolicy"],"mappings":"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"}