theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'next' of https://gitee.com/layui/layui-vue into next

Browse Source
This commit is contained in:
就眠儀式 2022-07-09 20:04:26 +08:00
commit 6ffd6ce6de
3 changed files with 33 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
package/layer/src/component/Notifiy.vue
View File

@ -17,7 +17,7 @@ export default {
};
</script>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from "vue";
import { nextTick, onMounted, ref, shallowRef } from "vue";
import CloseBtnVue from "./CloseBtn.vue";
export interface LayNotifyProps {
@ -35,7 +35,7 @@ const emit = defineEmits(["close"]);
const close = () => {
emit("close");
};
function addClass(obj: { className: any }, cls: string) {
function addClass(obj: HTMLElement, cls: string) {
//获取 class 内容.
let obj_class = obj.className,
//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
@ -44,19 +44,17 @@ function addClass(obj: { className: any }, cls: string) {
obj.className = added; //替换原来的 class.
}
const notifyRef = ref<HTMLElement | null>(null);
const notifyRef = shallowRef<HTMLElement | null>(null);
onMounted(() => {
nextTick(() => {
if (notifyRef.value) {
setTimeout(() => {
//此处延迟加载class，以免影响弹出效果
// @ts-ignore
addClass(
notifyRef.value.parentElement?.parentElement,
"layui-layer-notify"
);
}, 300);
}
setTimeout(() => {
//此处延迟加载class，以免影响弹出效果
if (!notifyRef.value?.parentElement?.parentElement) return;
addClass(
notifyRef.value?.parentElement?.parentElement,
"layui-layer-notify"
);
}, 300);
});
});
</script>

14
package/layer/src/component/index.vue
View File

@ -177,7 +177,6 @@ const firstOpenDelayCalculation = function () {
area.value = calculateDrawerArea(props.offset, props.area);
}
if (type == 5) {
// @ts-ignore
area.value = await calculatePhotosArea(
props.imgList[props.startIndex].src,
props
@ -395,13 +394,14 @@ const boxClasses = computed(() => {
const supportMove = function () {
if (props.move && type != 4) {
nextTick(() => {
// @ts-ignore 拖拽
useMove(layero.value, (left, top) => {
// 拖拽
if (!layero.value) return;
useMove(layero.value, (left: string, top: string) => {
l.value = left;
t.value = top;
});
// @ts-ignore 拉伸
useResize(layero.value, (width, height) => {
// 拉伸
useResize(layero.value, (width: string, height: string) => {
h.value = height;
w.value = width;
});
@ -450,6 +450,7 @@ const closeHandle = () => {
//Notify 从队列中移除当前实例
if (type === 6) {
//@ts-ignore
removeNotifiyFromQueen(props.id);
}
};
@ -524,7 +525,7 @@ const leaveActiveClass = computed(() => {
});
/**
* 打卡弹层
* 打开弹层
* <p>
*/
const open = () => {
@ -576,7 +577,6 @@ const showTitle = computed(() => {
*/
const resetCalculationPohtosArea = function (index: number) {
nextTick(async () => {
// @ts-ignore
area.value = await calculatePhotosArea(props.imgList[index].src, props);
offset.value = calculateOffset(props.offset, area.value, props.type);
w.value = area.value[0];

45
package/layer/src/utils/index.ts
View File

@ -264,7 +264,10 @@ export function getDrawerAnimationClass(offset: any, isClose: boolean = false) {
}
//计算图片大小 并缩放
export async function calculatePhotosArea(url: string, options: object) {
export async function calculatePhotosArea(
url: string,
options: object
): Promise<Array<string>> {
let img = new Image();
img.src = url;
return new Promise((resolve, reject) => {
@ -311,10 +314,8 @@ export function calculateNotifOffset(offset: any, area: any, layerId: string) {
// 间隙
let transOffsetLeft = 15;
let transOffsetTop = 15;
// @ts-ignore
window.NotifiyQueen = window.NotifiyQueen || [];
// @ts-ignore
let notifiyQueen = window.NotifiyQueen;
(window as any).NotifiyQueen = (window as any).NotifiyQueen || [];
let notifiyQueen = (window as any).NotifiyQueen;
if (typeof offset != "string" || arr.indexOf(offset) === -1) {
offset = "rt";
}
@ -366,19 +367,14 @@ export function calculateNotifOffset(offset: any, area: any, layerId: string) {
}
//移除Notify队列中某项，并且重新计算其他Notify位置
export function removeNotifiyFromQueen(layerId: string | undefined) {
export function removeNotifiyFromQueen(layerId: string) {
// 间隙
let transOffsetTop = 15;
// @ts-ignore 删除项的高度
let offsetHeight =
// @ts-ignore
// @ts-ignore
document.getElementById(layerId)?.firstElementChild?.firstElementChild
?.offsetHeight;
// @ts-ignore
window.NotifiyQueen = window.NotifiyQueen || [];
// @ts-ignore
let notifiyQueen = window.NotifiyQueen;
// 删除项的高度
let notifiyDom = document.getElementById(layerId)?.firstElementChild?.firstElementChild as HTMLElement;
let offsetHeight = notifiyDom.offsetHeight;
(window as any).NotifiyQueen = (window as any).NotifiyQueen || [];
let notifiyQueen = (window as any).NotifiyQueen;
let index = notifiyQueen.findIndex((e: { id: string }) => e.id === layerId);
let offsetType = notifiyQueen[index].offset;
let list = notifiyQueen.filter((e: { offset: any }) => {
@ -390,22 +386,11 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
// //得到需要修改的定位的Notifiy集合
let needCalculatelist = list.slice(findIndex + 1);
needCalculatelist.forEach((e: { id: string }) => {
let dom = document.getElementById(e.id)?.firstElementChild
?.firstElementChild;
let dom = document.getElementById(e.id)?.firstElementChild?.firstElementChild as HTMLElement;
if (offsetType === "rt" || offsetType === "lt") {
// @ts-ignore
dom.style["top"] =
// @ts-ignore
parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
dom.style["top"] = parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
} else {
// @ts-ignore
let bottom =
// @ts-ignore
parseFloat(dom.style["top"].split(" - ")[1]) -
transOffsetTop -
offsetHeight;
// @ts-ignore
dom.style["top"] = "calc(100vh - " + bottom + "px)";
let bottom = parseFloat(dom.style["top"].split(" - ")[1]) - transOffsetTop - offsetHeight; dom.style["top"] = "calc(100vh - " + bottom + "px)";
}
});
notifiyQueen.splice(index, 1); //删除