song-ui-u
Version:
vue3 + js的PC前端组件库
269 lines (241 loc) • 9.26 kB
JavaScript
import { mergeModels, useModel, ref, computed, openBlock, createBlock, Transition, withCtx, createElementVNode, normalizeClass, createVNode, normalizeStyle, createElementBlock, toDisplayString, createCommentVNode } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { ZoomIn, ZoomOut, RotateCw, ChevronLeft, ChevronRight, X } from 'song-ui-pro-icon';
import '../../../hook/use-zindex/index.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import { XMask } from '../../mask/index.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
const _sfc_main = /*#__PURE__*/Object.assign({
name: "x-image-preview",
}, {
__name: 'preview',
props: /*#__PURE__*/mergeModels({
previewSrcList: {
type: Array,
default: () => [],
},
src: {
type: String,
default: "",
},
}, {
"modelValue": {},
"modelModifiers": {},
}),
emits: /*#__PURE__*/mergeModels([
"error",
"load",
"close",
"prev",
"next",
"rotate",
"zoomIn",
"zoomOut",
], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
const ns = useNamespace("image-preview");
const visible = useModel(__props, "modelValue");
const props = __props;
const emits = __emit;
const scale = ref(1);
const rotate = ref(0);
const handleZoomIn = () => {
scale.value += 0.2;
emits("zoomIn", scale.value);
};
const handleZoomOut = () => {
if (scale.value > 0.2) {
scale.value -= 0.2;
}
emits("zoomOut", scale.value);
};
const handleRotate = () => {
rotate.value += 90;
emits("rotate", rotate.value);
};
const close = () => {
visible.value = false;
};
const previewSrcList = computed(() => {
return props.previewSrcList;
});
const isArr = computed(() => {
return previewSrcList.value.length > 0;
});
const currentIndex = ref(0);
const handlePrev = (e) => {
e.stopPropagation();
if (currentIndex.value > 0) {
currentIndex.value--;
}
emits("prev", currentIndex.value);
};
const handleNext = (e) => {
e.stopPropagation();
if (currentIndex.value < previewSrcList.value.length - 1) {
currentIndex.value++;
}
emits("next", currentIndex.value);
};
const srcUrl = computed(() => {
return isArr.value ? previewSrcList.value[currentIndex.value] : props.src;
});
const __returned__ = { ns, visible, props, emits, scale, rotate, handleZoomIn, handleZoomOut, handleRotate, close, previewSrcList, isArr, currentIndex, handlePrev, handleNext, srcUrl, get useNamespace() { return useNamespace }, get XMask() { return XMask }, get XIcon() { return XIcon }, ref, computed, get ZoomIn() { return ZoomIn }, get ZoomOut() { return ZoomOut }, get RotateCw() { return RotateCw }, get ChevronLeft() { return ChevronLeft }, get ChevronRight() { return ChevronRight }, get X() { return X } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}
});
const _hoisted_1 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createBlock(Transition, {
name: $setup.ns.b()
}, {
default: withCtx(() => [
($setup.visible)
? (openBlock(), createBlock($setup["XMask"], { key: 0 }, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass($setup.ns.b())
}, [
createElementVNode("div", {
class: normalizeClass($setup.ns.e('close')),
onClick: $setup.close
}, [
createVNode($setup["XIcon"], null, {
default: withCtx(() => [
createVNode($setup["X"])
]),
_: 1 /* STABLE */
})
], 2 /* CLASS */),
createElementVNode("div", {
class: normalizeClass($setup.ns.e('img'))
}, [
createElementVNode("div", {
class: normalizeClass($setup.ns.e('left')),
onClick: $setup.handlePrev
}, [
createVNode($setup["XIcon"], null, {
default: withCtx(() => [
createVNode($setup["ChevronLeft"])
]),
_: 1 /* STABLE */
})
], 2 /* CLASS */),
createElementVNode("img", {
style: normalizeStyle({
transform: `scale(${$setup.scale}) rotate(${$setup.rotate}deg)`,
}),
src: $setup.srcUrl,
alt: "",
onError: _cache[0] || (_cache[0] = (e) => $setup.emits('error', e)),
onLoad: _cache[1] || (_cache[1] = (e) => $setup.emits('load', e))
}, null, 44 /* STYLE, PROPS, NEED_HYDRATION */, _hoisted_1),
createElementVNode("div", {
class: normalizeClass($setup.ns.e('right')),
onClick: $setup.handleNext
}, [
createVNode($setup["XIcon"], null, {
default: withCtx(() => [
createVNode($setup["ChevronRight"])
]),
_: 1 /* STABLE */
})
], 2 /* CLASS */)
], 2 /* CLASS */),
($setup.isArr)
? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass($setup.ns.e('counter'))
}, toDisplayString($setup.currentIndex + 1) + " / " + toDisplayString($setup.previewSrcList.length), 3 /* TEXT, CLASS */))
: createCommentVNode("v-if", true),
createElementVNode("div", {
class: normalizeClass($setup.ns.e('menu'))
}, [
createElementVNode("div", {
class: normalizeClass($setup.ns.e('menu-item')),
onClick: $setup.handleZoomIn
}, [
createVNode($setup["XIcon"], null, {
default: withCtx(() => [
createVNode($setup["ZoomIn"])
]),
_: 1 /* STABLE */
})
], 2 /* CLASS */),
createElementVNode("div", {
class: normalizeClass($setup.ns.e('menu-item')),
onClick: $setup.handleZoomOut
}, [
createVNode($setup["XIcon"], null, {
default: withCtx(() => [
createVNode($setup["ZoomOut"])
]),
_: 1 /* STABLE */
})
], 2 /* CLASS */),
createElementVNode("div", {
class: normalizeClass($setup.ns.e('menu-item')),
onClick: $setup.handleRotate
}, [
createVNode($setup["XIcon"], null, {
default: withCtx(() => [
createVNode($setup["RotateCw"])
]),
_: 1 /* STABLE */
})
], 2 /* CLASS */)
], 2 /* CLASS */)
], 2 /* CLASS */)
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["name"]))
}
var imagePreview = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\image\\src\\preview.vue"]]);
export { imagePreview as default };
//# sourceMappingURL=preview.vue.mjs.map