@zhsz/cool-design-dv
Version:
158 lines (157 loc) • 5.01 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, provide, openBlock, createElementBlock, normalizeStyle, renderSlot, createBlock, unref, createCommentVNode } from "vue";
import { Icon } from "@iconify/vue";
import { dvPageSymbols } from "../../symbols/index.mjs";
import { debounce } from "lodash-es";
import { addClass, isFullScreen, removeClass, fullScreen, exitFullScreen } from "../../utils/bom.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
import { uid } from "../../utils/util.mjs";
import { useConfig } from "../../hooks/useConfig.mjs";
import "./style.css";
const _hoisted_1 = {
key: 0,
class: "my-dv-page__fullscreen"
};
const __default__ = defineComponent({
name: "DvPage"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
lock: { type: Boolean },
scale: { type: Boolean, default: true },
width: { default: 1920 },
height: { default: 1080 },
activeIndex: { default: 0 },
target: { type: [String, Function], default: () => document.body },
fit: { type: Boolean },
fullscreen: { type: Boolean },
layout: { default: "horizontal" },
config: {}
},
setup(__props) {
const WRAPPER_CLASS_NAME = "my-dv-page__wrapper";
const props = __props;
const { settings } = useConfig(props.config);
const dvPage = ref();
const proxyResize = ref();
const screens = ref([]);
const screenActiveIndex = computed(() => {
return props.activeIndex;
});
const _uid = ref(uid());
const widthScale = ref(1);
const heightScale = ref(1);
const isFullScreen$1 = ref(false);
const warpper = ref();
const styles = computed(() => {
return props.fit ? {
width: "100%",
height: "100%",
transform: "translateX(-50%) translateY(-50%)"
} : {
width: `${props.width}px`,
height: `${props.height}px`,
transform: `scaleX(${widthScale.value}) scaleY(${heightScale.value}) translateX(-50%) translateY(-50%)`
};
});
function getTarget() {
let target;
switch (typeof props.target) {
case "string":
target = props.target === "parent" ? dvPage.value.parentNode : document.querySelector(props.target);
break;
case "function":
target = props.target();
break;
default:
target = props.target;
break;
}
return target || document.body;
}
function resize() {
if (!props.scale || props.fit) {
widthScale.value = 1;
heightScale.value = 1;
return;
}
const { clientWidth, clientHeight } = warpper.value || {};
if (!clientWidth || !clientHeight)
return;
if (props.lock) {
if (props.layout === "horizontal") {
heightScale.value = widthScale.value = clientWidth / props.width;
} else {
heightScale.value = widthScale.value = clientHeight / props.height;
}
} else {
widthScale.value = clientWidth / props.width;
heightScale.value = clientHeight / props.height;
}
}
function fullScreen$1() {
const el = getTarget();
fullScreen(el);
isFullScreen$1.value = true;
}
function exitFullScreen$1() {
exitFullScreen();
isFullScreen$1.value = false;
}
onMounted(() => {
warpper.value = getTarget();
addClass(warpper.value, WRAPPER_CLASS_NAME + _uid.value);
proxyResize.value = debounce(resize, 100);
addResizeListener(warpper.value, proxyResize.value);
resize();
isFullScreen$1.value = props.fullscreen ? isFullScreen() : false;
});
onBeforeUnmount(() => {
proxyResize.value && removeResizeListener(warpper.value, proxyResize.value);
removeClass(warpper.value, WRAPPER_CLASS_NAME + _uid.value);
});
watch(
() => props,
() => {
resize();
},
{
deep: true,
immediate: true
}
);
provide(dvPageSymbols, {
widthScale,
heightScale,
settings,
screens,
screenActiveIndex
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "my-dv-page",
style: normalizeStyle(styles.value),
ref_key: "dvPage",
ref: dvPage
}, [
renderSlot(_ctx.$slots, "default"),
_ctx.fullscreen ? (openBlock(), createElementBlock("div", _hoisted_1, [
isFullScreen$1.value ? (openBlock(), createBlock(unref(Icon), {
key: 0,
icon: "ion:power",
title: "取消全屏",
onClick: exitFullScreen$1
})) : (openBlock(), createBlock(unref(Icon), {
key: 1,
icon: "icon-park-outline:full-screen",
title: "全屏",
onClick: fullScreen$1
}))
])) : createCommentVNode("", true)
], 4);
};
}
});
export {
_sfc_main as default
};