|
|
|
|
@@ -10,40 +10,14 @@ import Iframe from "./Iframe.vue";
|
|
|
|
|
import Title from "./Title.vue";
|
|
|
|
|
import CloseBtn from "./CloseBtn.vue";
|
|
|
|
|
import Resize from "./Resize.vue";
|
|
|
|
|
import {
|
|
|
|
|
Ref,
|
|
|
|
|
ref,
|
|
|
|
|
watch,
|
|
|
|
|
computed,
|
|
|
|
|
useSlots,
|
|
|
|
|
VNodeTypes,
|
|
|
|
|
nextTick,
|
|
|
|
|
inject,
|
|
|
|
|
} from "vue";
|
|
|
|
|
import {
|
|
|
|
|
nextId,
|
|
|
|
|
maxArea,
|
|
|
|
|
maxOffset,
|
|
|
|
|
getArea,
|
|
|
|
|
calculateArea,
|
|
|
|
|
calculateOffset,
|
|
|
|
|
calculateContent,
|
|
|
|
|
calculateType,
|
|
|
|
|
minArea,
|
|
|
|
|
minOffset,
|
|
|
|
|
updateMinArrays,
|
|
|
|
|
getDrawerAnimationClass,
|
|
|
|
|
calculateDrawerArea,
|
|
|
|
|
} from "../utils";
|
|
|
|
|
import { Ref, ref, watch, computed, useSlots, VNodeTypes, nextTick, inject } from "vue";
|
|
|
|
|
import { nextId, maxArea, maxOffset, getArea, calculateArea, calculateOffset, calculateContent, calculateType, minArea, minOffset, updateMinArrays, getDrawerAnimationClass, calculateDrawerArea } from "../utils";
|
|
|
|
|
import useMove from "../composable/useMove";
|
|
|
|
|
import useResize from "../composable/useResize";
|
|
|
|
|
import { zIndexKey } from "../tokens";
|
|
|
|
|
|
|
|
|
|
const slots = useSlots();
|
|
|
|
|
const layero = ref<HTMLElement | null>(null);
|
|
|
|
|
const emit = defineEmits(["close", "update:modelValue"]);
|
|
|
|
|
|
|
|
|
|
export interface LayModalProps {
|
|
|
|
|
domId?: string;
|
|
|
|
|
title?: string | boolean | Function;
|
|
|
|
|
icon?: string | number;
|
|
|
|
|
skin?: string;
|
|
|
|
|
@@ -53,7 +27,7 @@ export interface LayModalProps {
|
|
|
|
|
area?: string[] | "auto";
|
|
|
|
|
modelValue?: boolean;
|
|
|
|
|
maxmin?: boolean | string;
|
|
|
|
|
btn?: Record<string, unknown>[] | false;
|
|
|
|
|
btn?: Record<string, Function>[] | false;
|
|
|
|
|
move?: boolean | string;
|
|
|
|
|
resize?: boolean | string;
|
|
|
|
|
type?: 0 | 1 | 2 | 3 | "dialog" | "page" | "iframe" | "loading" | "drawer";
|
|
|
|
|
@@ -79,7 +53,8 @@ export interface LayModalProps {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const props = withDefaults(defineProps<LayModalProps>(), {
|
|
|
|
|
title: "信息",
|
|
|
|
|
domId: '',
|
|
|
|
|
title: "标题",
|
|
|
|
|
setTop: false,
|
|
|
|
|
offset: () => ["50%", "50%"],
|
|
|
|
|
area: "auto",
|
|
|
|
|
@@ -106,22 +81,18 @@ const props = withDefaults(defineProps<LayModalProps>(), {
|
|
|
|
|
isMessage: false,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const id: Ref<string> = ref(nextId());
|
|
|
|
|
const emit = defineEmits(["close", "update:modelValue"]);
|
|
|
|
|
|
|
|
|
|
const slots = useSlots();
|
|
|
|
|
const max: Ref<boolean> = ref(false);
|
|
|
|
|
const min: Ref<boolean> = ref(false);
|
|
|
|
|
const id: Ref<string> = ref(nextId());
|
|
|
|
|
const layero = ref<HTMLElement | null>(null);
|
|
|
|
|
const type: number = calculateType(props.type);
|
|
|
|
|
const area: Ref<string[]> = ref(
|
|
|
|
|
calculateArea(props.type, props.area, props.offset)
|
|
|
|
|
);
|
|
|
|
|
const offset: Ref<string[]> = ref(
|
|
|
|
|
calculateOffset(props.offset, area.value, props.type)
|
|
|
|
|
);
|
|
|
|
|
const contentHeight = ref(
|
|
|
|
|
calculateContent(area.value[1], props.btn, type, props.isMessage)
|
|
|
|
|
);
|
|
|
|
|
const index: Ref<number | Function> = ref(
|
|
|
|
|
props.zIndex ?? inject(zIndexKey, 99999)
|
|
|
|
|
);
|
|
|
|
|
const area: Ref<string[]> = ref(calculateArea(props.type, props.area, props.offset));
|
|
|
|
|
const offset: Ref<string[]> = ref(calculateOffset(props.offset, area.value, props.type));
|
|
|
|
|
const contentHeight = ref(calculateContent(area.value[1], props.btn, type, props.isMessage));
|
|
|
|
|
const index: Ref<number | Function> = ref(props.zIndex ?? inject(zIndexKey, 99999));
|
|
|
|
|
const visible: Ref<boolean> = ref(false);
|
|
|
|
|
const first: Ref<boolean> = ref(true);
|
|
|
|
|
|
|
|
|
|
@@ -146,17 +117,14 @@ const firstOpenDelayCalculation = function () {
|
|
|
|
|
area.value = calculateDrawerArea(props.offset, props.area);
|
|
|
|
|
}
|
|
|
|
|
offset.value = calculateOffset(props.offset, area.value, props.type);
|
|
|
|
|
|
|
|
|
|
w.value = area.value[0];
|
|
|
|
|
h.value = area.value[1];
|
|
|
|
|
t.value = offset.value[0];
|
|
|
|
|
l.value = offset.value[1];
|
|
|
|
|
|
|
|
|
|
_w.value = area.value[0];
|
|
|
|
|
_l.value = area.value[1];
|
|
|
|
|
_t.value = offset.value[0];
|
|
|
|
|
_l.value = offset.value[1];
|
|
|
|
|
|
|
|
|
|
supportMove();
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
@@ -367,7 +335,7 @@ const supportMove = function () {
|
|
|
|
|
* 弹层样式
|
|
|
|
|
* <p>
|
|
|
|
|
*/
|
|
|
|
|
const styles = computed(() => {
|
|
|
|
|
const styles = computed<any>(() => {
|
|
|
|
|
return {
|
|
|
|
|
top: t.value,
|
|
|
|
|
left: l.value,
|
|
|
|
|
|