UNPKG

tdesign-mobile-vue

Version:
167 lines (163 loc) 5.93 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; import _defineProperty from '@babel/runtime/helpers/defineProperty'; import { defineComponent, createVNode, ref, computed, watchEffect } from 'vue'; import { useIntersectionObserver } from '@vueuse/core'; import { CloseIcon } from 'tdesign-icons-vue-next'; import { Loading } from '../loading/index.js'; import config from '../config.js'; import { useTNodeJSX } from '../hooks/tnode.js'; import { usePrefixClass } from '../hooks/useClass.js'; import props from './props.js'; import '../loading/loading.js'; import '../loading/icon/gradient.js'; import '../_common/js/loading/circle-adapter.js'; import '../_common/js/utils/set-style.js'; import '../_common/js/utils/helper.js'; import '@babel/runtime/helpers/toConsumableArray'; import '@babel/runtime/helpers/objectWithoutProperties'; import 'lodash/isString'; import 'lodash/isNull'; import 'lodash/isUndefined'; import 'lodash/isNumber'; import 'lodash/isArray'; import '../loading/icon/spinner.js'; import '../loading/props.js'; import '../shared/dom.js'; import 'lodash/isFunction'; import '../loading/plugin.js'; import 'lodash/merge'; import 'lodash/camelCase'; import 'lodash/kebabCase'; import '../hooks/render-tnode.js'; import 'lodash/isEmpty'; import 'lodash/isObject'; import '../config-provider/useConfig.js'; import 'lodash/cloneDeep'; import '../config-provider/context.js'; import 'lodash/mergeWith'; import '../_common/js/global-config/mobile/default-config.js'; import '../_common/js/global-config/mobile/locale/zh_CN.js'; import '../_chunks/dep-d5364bc4.js'; import '@babel/runtime/helpers/typeof'; import '../_chunks/dep-eb734424.js'; import 'dayjs'; import '../shared/component.js'; var prefix = config.prefix; var _Image = defineComponent({ name: "".concat(prefix, "-image"), props: props, setup: function setup(props2, context) { var imageClass = usePrefixClass("image"); var renderTNodeJSX = useTNodeJSX(); var closeIcon = createVNode(CloseIcon, { "size": "22px" }, null); var LoadingIcon = createVNode(Loading, { "theme": "dots", "inheritColor": true }, null); var isLoading = ref(true); var isError = ref(false); var imageStyles = computed(function () { return { objectFit: props2.fit, objectPosition: props2.position }; }); var imageClasses = computed(function () { return _defineProperty(_defineProperty({}, "".concat(imageClass.value), true), "".concat(imageClass.value, "--").concat(props2.shape), true); }); var imageDOM = ref(); var realSrc = ref(""); watchEffect(function () { realSrc.value = props2.lazy ? "" : props2.src; }); var _useIntersectionObser = useIntersectionObserver(imageDOM, function (_ref2, observerElement) { var _ref3 = _slicedToArray(_ref2, 1), isIntersecting = _ref3[0].isIntersecting; if (isIntersecting && props2.lazy) { stop(); realSrc.value = props2.src; } }), stop = _useIntersectionObser.stop; var handleImgLoadCompleted = function handleImgLoadCompleted(e) { var _props2$onLoad; (_props2$onLoad = props2.onLoad) === null || _props2$onLoad === void 0 || _props2$onLoad.call(props2, { e: e }); isLoading.value = false; }; var handleImgLoadError = function handleImgLoadError(e) { var _props2$onError; if (realSrc.value === "") { return; } (_props2$onError = props2.onError) === null || _props2$onError === void 0 || _props2$onError.call(props2, { e: e }); isLoading.value = false; isError.value = true; if (props2.fallback) { realSrc.value = props2.fallback; isError.value = false; } }; var maskContent = computed(function () { var statusContent = function statusContent() { var _context$slots, _context$slots2, _context$slots3, _context$slots4; if ((_context$slots = context.slots) !== null && _context$slots !== void 0 && _context$slots.loading && isLoading.value) { return renderTNodeJSX("loading"); } if (!((_context$slots2 = context.slots) !== null && _context$slots2 !== void 0 && _context$slots2.loading) && isLoading.value) { return LoadingIcon; } if ((_context$slots3 = context.slots) !== null && _context$slots3 !== void 0 && _context$slots3.error && isError.value) { return renderTNodeJSX("error"); } if (!((_context$slots4 = context.slots) !== null && _context$slots4 !== void 0 && _context$slots4.error) && isError.value) { return closeIcon; } return false; }; var node = function node() { if (isLoading.value || isError.value) { if (props2.lazy && realSrc.value === "") { return; } return createVNode("div", { "class": "".concat(imageClass.value, "__mask") }, [statusContent()]); } }; return node(); }); return function () { return createVNode("div", { "class": imageClasses.value }, [maskContent.value, createVNode("picture", null, [props2.srcset && Object.entries(props2.srcset).map(function (item, index) { return createVNode("source", { "key": index, "type": item[0], "srcset": item[1] }, null); }), createVNode("img", { "ref": imageDOM, "class": "".concat(imageClass.value, "__img"), "style": imageStyles.value, "src": realSrc.value, "alt": props2.alt, "referrerpolicy": props2.referrerpolicy, "onLoad": handleImgLoadCompleted, "onError": handleImgLoadError }, null)])]); }; } }); export { _Image as default }; //# sourceMappingURL=image.js.map