📝: 更新文档
This commit is contained in:
parent
b4e67b46c6
commit
7ad08fde58
@ -16,6 +16,32 @@
|
|||||||
<lay-row :space="30" >
|
<lay-row :space="30" >
|
||||||
<lay-col :span="24">
|
<lay-col :span="24">
|
||||||
<lay-button type="primary" @click="baseNotifiy">右上位置</lay-button>
|
<lay-button type="primary" @click="baseNotifiy">右上位置</lay-button>
|
||||||
|
</lay-col>
|
||||||
|
</lay-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { layer } from "@layui/layer-vue"
|
||||||
|
|
||||||
|
const baseNotifiy = function() {
|
||||||
|
layer.notifiy({
|
||||||
|
title:"这是标题",
|
||||||
|
content:"默认就是右上,也是用得最多的"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 不同位置
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-row :space="30" >
|
||||||
|
<lay-col :span="24">
|
||||||
|
<lay-button type="primary" @click="baseNotifiyRT">右上位置</lay-button>
|
||||||
<lay-button type="primary" @click="baseNotifiyRB">右下位置</lay-button>
|
<lay-button type="primary" @click="baseNotifiyRB">右下位置</lay-button>
|
||||||
<lay-button type="primary" @click="baseNotifiyLT">左上位置</lay-button>
|
<lay-button type="primary" @click="baseNotifiyLT">左上位置</lay-button>
|
||||||
<lay-button type="primary" @click="baseNotifiyLB">左下位置</lay-button>
|
<lay-button type="primary" @click="baseNotifiyLB">左下位置</lay-button>
|
||||||
@ -26,7 +52,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { layer } from "@layui/layer-vue"
|
import { layer } from "@layui/layer-vue"
|
||||||
|
|
||||||
const baseNotifiy = function() {
|
const baseNotifiyRT = function() {
|
||||||
layer.notifiy({
|
layer.notifiy({
|
||||||
title:"这是标题",
|
title:"这是标题",
|
||||||
content:"默认就是右上,也是用得最多的"
|
content:"默认就是右上,也是用得最多的"
|
||||||
|
@ -7,15 +7,13 @@
|
|||||||
::: describe 预览图片。
|
::: describe 预览图片。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title 指定图标
|
::: title 基本使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button @click="signleImg">图片查看</lay-button>
|
<lay-button @click="signleImg">图片查看</lay-button>
|
||||||
<lay-button @click="signleImg2">图片标题</lay-button>
|
|
||||||
<lay-button @click="groupImg">图片分组</lay-button>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -24,11 +22,43 @@ import { layer } from "@layui/layui-vue"
|
|||||||
const signleImg = function() {
|
const signleImg = function() {
|
||||||
layer.photos("http://www.pearadmin.com/assets/images/un1.svg")
|
layer.photos("http://www.pearadmin.com/assets/images/un1.svg")
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 设置标题
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-button @click="signleImg2">图片标题</lay-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { layer } from "@layui/layui-vue"
|
||||||
|
|
||||||
const signleImg2 = function() {
|
const signleImg2 = function() {
|
||||||
layer.photos({
|
layer.photos({
|
||||||
imgList:[{src:'http://www.pearadmin.com/assets/images/un2.svg',alt:'layer for vue'}]
|
imgList:[{src:'http://www.pearadmin.com/assets/images/un2.svg',alt:'layer for vue'}]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 图片分组
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-button @click="groupImg">图片分组</lay-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { layer } from "@layui/layui-vue"
|
||||||
|
|
||||||
const groupImg = function() {
|
const groupImg = function() {
|
||||||
layer.photos({
|
layer.photos({
|
||||||
imgList:[
|
imgList:[
|
||||||
|
@ -13,9 +13,7 @@
|
|||||||
<ul class="layui-row layui-col-space6">
|
<ul class="layui-row layui-col-space6">
|
||||||
<li class="layui-col-sm12">
|
<li class="layui-col-sm12">
|
||||||
<div class="alone">
|
<div class="alone">
|
||||||
<a
|
<a href="http://layer.layui-vue.com/zh-CN/demo" target="_blank"
|
||||||
href="http://layer.layui-vue.com/zh-CN/demo"
|
|
||||||
target="_blank"
|
|
||||||
>layer - vue<cite>通用型弹出层组件</cite></a
|
>layer - vue<cite>通用型弹出层组件</cite></a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
@ -53,11 +53,12 @@
|
|||||||
import config from "../../../layer/package.json";
|
import config from "../../../layer/package.json";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
|
||||||
const version = config.version;
|
const route = useRoute();
|
||||||
|
|
||||||
const active = ref("/zh-CN/index");
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const version = config.version;
|
||||||
|
const active = ref(route.path);
|
||||||
|
|
||||||
watch(active, (val) => {
|
watch(active, (val) => {
|
||||||
router.push(val);
|
router.push(val);
|
||||||
|
@ -51,7 +51,10 @@ onMounted(() => {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
//此处延迟加载class,以免影响弹出效果
|
//此处延迟加载class,以免影响弹出效果
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
addClass(notifyRef.value.parentElement?.parentElement,"layui-layer-notify");
|
addClass(
|
||||||
|
notifyRef.value.parentElement?.parentElement,
|
||||||
|
"layui-layer-notify"
|
||||||
|
);
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -145,7 +145,7 @@ const layer = {
|
|||||||
offset: "rt",
|
offset: "rt",
|
||||||
time: 2000,
|
time: 2000,
|
||||||
area: "auto",
|
area: "auto",
|
||||||
shade:false
|
shade: false,
|
||||||
};
|
};
|
||||||
return layer.create(option, defaultOption, callback);
|
return layer.create(option, defaultOption, callback);
|
||||||
},
|
},
|
||||||
|
@ -370,7 +370,9 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
|
|||||||
// 间隙
|
// 间隙
|
||||||
let transOffsetTop = 15;
|
let transOffsetTop = 15;
|
||||||
// @ts-ignore 删除项的高度
|
// @ts-ignore 删除项的高度
|
||||||
let offsetHeight = document.getElementById(layerId)?.firstElementChild?.firstElementChild ?.offsetHeight;
|
let offsetHeight =
|
||||||
|
document.getElementById(layerId)?.firstElementChild?.firstElementChild
|
||||||
|
?.offsetHeight;
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
window.NotifiyQueen = window.NotifiyQueen || [];
|
window.NotifiyQueen = window.NotifiyQueen || [];
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -390,10 +392,14 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
|
|||||||
?.firstElementChild;
|
?.firstElementChild;
|
||||||
if (offsetType === "rt" || offsetType === "lt") {
|
if (offsetType === "rt" || offsetType === "lt") {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
dom.style["top"] = parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
|
dom.style["top"] =
|
||||||
|
parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
|
||||||
} else {
|
} else {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
let bottom = parseFloat(dom.style["top"].split(" - ")[1]) - transOffsetTop - offsetHeight;
|
let bottom =
|
||||||
|
parseFloat(dom.style["top"].split(" - ")[1]) -
|
||||||
|
transOffsetTop -
|
||||||
|
offsetHeight;
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
dom.style["top"] = "calc(100vh - " + bottom + "px)";
|
dom.style["top"] = "calc(100vh - " + bottom + "px)";
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user