📝: 更新文档

This commit is contained in:
就眠儀式 2022-07-07 12:31:50 +08:00
parent b4e67b46c6
commit 7ad08fde58
7 changed files with 79 additions and 15 deletions

View File

@ -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:"默认就是右上,也是用得最多的"

View File

@ -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:[

View File

@ -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>

View File

@ -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);

View File

@ -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);
} }
}); });

View File

@ -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);
}, },

View File

@ -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)";
} }