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

✨(component): 新增layer.notifiy()方法,修复layer传入time:0时直接执行销毁的错误

Browse Source 
ISSUES CLOSED: #I5BUMN
This commit is contained in:
0o张不歪o0
2022-06-29 18:03:31 +08:00
parent 7d52aa5423
commit 79509e99f9
7 changed files with 1132 additions and 827 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
package/layer/src/component/Notifiy.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<div class="layer-notifiy" ref="notifyRef">
<h2 class="title">
<i v-if="icon" :class="iconClass"></i>
{{ title }}
</h2>
<div class="content" v-if="!isHtmlFragment">
<p>{{ content }}</p>
</div>
<div class="content" v-html="content" v-else></div>
<CloseBtnVue @click="close"></CloseBtnVue>
</div>
</template>
<script lang="ts">
export default {
name: "Notifiy",
};
</script>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue';
import CloseBtnVue from './CloseBtn.vue';
export interface LayNotifyProps {
title: any;
content: any;
isHtmlFragment?: boolean;
icon?: string | number | undefined,
iconClass: string[]
}
const props = withDefaults(defineProps<LayNotifyProps>(), {
isHtmlFragment: false,
});
const emit = defineEmits(['close'])
const close = () => {
emit('close')
}
function addClass(obj: { className: any; }, cls: string) {
//获取 class 内容.
let obj_class = obj.className,
//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
blank = (obj_class != '') ? ' ' : '';
let added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
obj.className = added;//替换原来的 class.
}
const notifyRef = ref<HTMLElement | null>(null)
onMounted(() => {
nextTick(() => {
if (notifyRef.value) {
setTimeout(() => {//此处延迟加载class，以免影响弹出效果
// @ts-ignore
addClass(notifyRef.value.parentElement?.parentElement, 'layui-layer-notify')
}, 300);
}
})
})
</script>

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

@@ -11,6 +11,7 @@ import Title from "./Title.vue";
import CloseBtn from "./CloseBtn.vue";
import Resize from "./Resize.vue";
import Photos from "./Photos.vue";
import Notifiy from "./Notifiy.vue";
import {
Ref,
ref,
@@ -36,11 +37,12 @@ import {
getDrawerAnimationClass,
calculateDrawerArea,
calculatePhotosArea,
calculateNotifOffset,
removeNotifiyFromQueen,
} from "../utils";
import useMove from "../composable/useMove";
import useResize from "../composable/useResize";
import { zIndexKey } from "../tokens";
import { arrayExpression } from "@babel/types";
export interface LayModalProps {
id?: string;
@@ -57,18 +59,20 @@ export interface LayModalProps {
move?: boolean | string;
resize?: boolean | string;
type?:
| 0
| 1
| 2
| 3
| 4
| 5
| "dialog"
| "page"
| "iframe"
| "loading"
| "drawer"
| "photos";
| 0
| 1
| 2
| 3
| 4
| 5
| 6
| "dialog"
| "page"
| "iframe"
| "loading"
| "drawer"
| "photos"
| "notifiy";
content?: string | Function | object | VNodeTypes;
isHtmlFragment?: boolean;
shade?: boolean | string;
@@ -115,12 +119,12 @@ const props = withDefaults(defineProps<LayModalProps>(), {
resize: false,
isHtmlFragment: false,
isOutAnim: true,
destroy: () => {},
success: () => {},
end: () => {},
full: () => {},
min: () => {},
restore: () => {},
destroy: () => { },
success: () => { },
end: () => { },
full: () => { },
min: () => { },
restore: () => { },
yesText: "确定",
isFunction: false,
isMessage: false,
@@ -182,6 +186,9 @@ const firstOpenDelayCalculation = function () {
area.value = ["auto", "auto"];
}
offset.value = calculateOffset(props.offset, area.value, props.type);
if (type == 6) {
offset.value = calculateNotifOffset(props.offset, area.value, id.value)
}
w.value = area.value[0];
h.value = area.value[1];
_w.value = area.value[0];
@@ -375,6 +382,7 @@ const boxClasses = computed(() => {
type === 3 ? "layui-layer-loading" : "",
type === 4 ? "layui-layer-drawer" : "",
type === 5 ? "layui-layer-photos" : "",
type === 6 ? "layui-layer-notifiy-border" : "",
props.isMessage ? "layui-layer-msg" : "",
props.isMessage && !props.icon ? "layui-layer-hui" : "",
props.skin,
@@ -433,9 +441,8 @@ const styles = computed<any>(() => {
offset.value[1].indexOf("%") > -1
) {
// @ts-ignore
style.transform = `translate(-${
style.left.indexOf("%") > -1 ? style.left : 0
},-${style.top.indexOf("%") > -1 ? style.top : 0})`;
style.transform = `translate(-${style.left.indexOf("%") > -1 ? style.left : 0
},-${style.top.indexOf("%") > -1 ? style.top : 0})`;
}
}
}
@@ -462,9 +469,15 @@ const contentClasses = computed(() => {
* @param null
*/
const closeHandle = () => {
emit("close");
emit("update:modelValue", false);
props.destroy();
//Notify 从队列中移除当前实例
if(type===6){
removeNotifiyFromQueen(props.id)
}
};
/**
@@ -578,7 +591,7 @@ const showResize = computed(() => {
* @param type 类型
*/
const showTitle = computed(() => {
return props.title && props.type != 3 && props.type != "photos";
return props.title && props.type != 3 && props.type != 5 && props.type != 6;
});
/*
@@ -606,33 +619,15 @@ defineExpose({ reset, open, close });
<template>
<div>
<!-- 遮盖层 -->
<Shade
:index="index"
:visible="shadeVisible"
:opacity="shadeOpacity"
@shadeClick="shadeHandle"
></Shade>
<Shade :index="index" :visible="shadeVisible" :opacity="shadeOpacity" @shadeClick="shadeHandle"></Shade>
<!-- 动画容器 -->
<transition
:enter-active-class="enterActiveClass"
:leave-active-class="leaveActiveClass"
>
<transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
<!-- 弹出层 -->
<div
ref="layero"
class="layui-layer layui-layer-border"
:class="boxClasses"
:style="styles"
v-if="visible"
>
<div ref="layero" class="layui-layer layui-layer-border" :class="boxClasses" :style="styles" v-if="visible">
<!-- 标题 -->
<Title v-if="showTitle" :title="title"></Title>
<!-- 内容 -->
<div
class="layui-layer-content"
:style="{ height: contentHeight }"
:class="contentClasses"
>
<div class="layui-layer-content" :style="{ height: contentHeight }" :class="contentClasses">
<template v-if="type === 0 || type === 1 || type === 4">
<i v-if="icon" :class="iconClass"></i>
<slot v-if="slots.default"></slot>
@@ -644,43 +639,26 @@ defineExpose({ reset, open, close });
</template>
</template>
<Iframe v-if="type === 2" :src="props.content"></Iframe>
<Photos
v-if="type === 5"
:imgList="props.imgList"
:startIndex="props.startIndex"
@resetCalculationPohtosArea="resetCalculationPohtosArea"
></Photos>
<Photos v-if="type === 5" :imgList="props.imgList" :startIndex="props.startIndex" @resetCalculationPohtosArea="resetCalculationPohtosArea"></Photos>
<Notifiy v-if="type === 6" @close="closeHandle" :title="props.title" :content="props.content" :isHtmlFragment="props.isHtmlFragment" :icon="props.icon" :iconClass="iconClass"></Notifiy>
</div>
<!-- 工具栏 -->
<span class="layui-layer-setwin" v-if="type != 3 && type != 5">
<a
v-if="maxmin && !max"
class="layui-layer-min"
:class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
href="javascript:;"
@click="minHandle"
>
<span class="layui-layer-setwin" v-if="type != 3 && type != 5 && type != 6">
<a v-if="maxmin && !max" class="layui-layer-min" :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
href="javascript:;" @click="minHandle">
<cite v-if="!min"></cite>
</a>
<a
v-if="maxmin && !min"
class="layui-layer-ico layui-layer-max"
:class="[max ? 'layui-layer-maxmin' : '']"
href="javascript:;"
@click="maxHandle"
></a>
<a v-if="maxmin && !min" class="layui-layer-ico layui-layer-max" :class="[max ? 'layui-layer-maxmin' : '']"
href="javascript:;" @click="maxHandle"></a>
<CloseBtn v-if="closeBtn" @closeHandle="closeHandle"></CloseBtn>
</span>
<!-- 操作栏 -->
<div
v-if="((btn && btn.length > 0) || type === 0) && !isMessage"
class="layui-layer-btn"
:class="[`layui-layer-btn-${btnAlign}`]"
>
<div v-if="((btn && btn.length > 0) || type === 0) && !isMessage" class="layui-layer-btn"
:class="[`layui-layer-btn-${btnAlign}`]">
<template v-if="btn && btn.length > 0">
<template v-for="(b, index) in btn" :key="index">
<a :class="[`layui-layer-btn${index}`]" @click="b.callback(id)">{{
b.text
b.text
}}</a>
</template>
</template>