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