✨(layer): 发布 1.4.0
This commit is contained in:
就眠儀式
parent
dc56a071b7
commit
43c4ef2e47
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "1.2.6",
|
||||
"version": "1.2.7-alpha.1",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 321 B |
BIN
package/document-layer/src/assets/demo.png
Normal file
BIN
package/document-layer/src/assets/demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -124,8 +124,7 @@ const load4 = function() {
|
||||
<button @click="openMaxmin">缩小放大</button>
|
||||
<button @click="openResize">尺寸拉伸</button>
|
||||
<button @click="openIndex">设置层级</button>
|
||||
<button @click="openAreaAuto">内容适应</button>
|
||||
<button @click="openAreaAuto2">内容适应2</button>
|
||||
<button @click="openClose2">关闭主题</button>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</template>
|
||||
@ -165,7 +164,7 @@ const openIframe = function() {
|
||||
title: "标题",
|
||||
resize: true,
|
||||
area: ['500px','500px'],
|
||||
content: "http://layui-vue.pearadmin.com"
|
||||
content: "http://www.layui-vue.com"
|
||||
})
|
||||
}
|
||||
|
||||
@ -210,28 +209,18 @@ const openResize = function() {
|
||||
const openIndex = function() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "标题",
|
||||
zIndex: 999,
|
||||
title: "标题",
|
||||
content: "设置层级"
|
||||
})
|
||||
}
|
||||
|
||||
const openAreaAuto = function(){
|
||||
const openClose2 = function() {
|
||||
layer.open({
|
||||
type:1,
|
||||
title:"area:auto",
|
||||
isHtmlFragment:true,
|
||||
content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
|
||||
})
|
||||
}
|
||||
|
||||
const openAreaAuto2 = function(){
|
||||
layer.open({
|
||||
type:1,
|
||||
title:"area:auto",
|
||||
offset:['10px','50%'],
|
||||
isHtmlFragment:true,
|
||||
content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>",
|
||||
type: 1,
|
||||
closeBtn: 2,
|
||||
title: "其他关闭",
|
||||
content: "内容"
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -294,9 +283,9 @@ const openRight = function() {
|
||||
::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数`options`主要传入预览的图片链接。
|
||||
|
||||
<template>
|
||||
<button @click="signleImg">图片查看</button>
|
||||
<button @click="signleImg2">图片标题</button>
|
||||
<button @click="groupImg">图片分组</button>
|
||||
<button @click="signleImg">图片查看</button>
|
||||
<button @click="signleImg2">图片标题</button>
|
||||
<button @click="groupImg">图片分组</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -319,7 +308,6 @@ const groupImg = function() {
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
@ -331,12 +319,10 @@ const groupImg = function() {
|
||||
<template>
|
||||
<lay-row :space="30" >
|
||||
<lay-col :span="24">
|
||||
<button @click="baseNotifiy">基本使用</button>
|
||||
<button @click="baseNotifiyRB">右下</button>
|
||||
<button @click="baseNotifiyLT">左上</button>
|
||||
<button @click="baseNotifiyLB">左下</button>
|
||||
<button @click="baseNotifiyTime0">不主动关闭</button>
|
||||
<button @click="baseNotifiyHtml">HTML解析</button>
|
||||
<button @click="baseNotifiy">右上位置</button>
|
||||
<button @click="baseNotifiyRB">右下位置</button>
|
||||
<button @click="baseNotifiyLT">左上位置</button>
|
||||
<button @click="baseNotifiyLB">左下位置</button>
|
||||
</lay-col>
|
||||
<lay-col :span="24">
|
||||
<button @click="NotifiySuccess">成功通知</button>
|
||||
@ -377,22 +363,6 @@ const baseNotifiyLB = function() {
|
||||
offset:'lb',
|
||||
})
|
||||
}
|
||||
const baseNotifiyTime0 = function() {
|
||||
layer.notifiy({
|
||||
title:"这是标题",
|
||||
content:"不会主动关闭，请点击右上角关闭图标",
|
||||
time:0
|
||||
})
|
||||
}
|
||||
const baseNotifiyHtml = function() {
|
||||
layer.notifiy({
|
||||
title:"这是标题,有图片时请设置area参数",
|
||||
isHtmlFragment:true,
|
||||
content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>",
|
||||
area:['330px','220px'],
|
||||
time:3000
|
||||
})
|
||||
}
|
||||
const NotifiySuccess=function(){
|
||||
layer.notifiy({
|
||||
title:"Success",
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>选项</legend>
|
||||
</fieldset>
|
||||
|
||||
我们提供了丰富的 `options` 配置, 你可以通过配置来满足对 layer 的定制化, 需要注意的是有些属性仅适用部分组件。
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -- | -- | -- | -- | -- |
|
||||
| type | 类型 | string | `1` | `0` `1` `2` `3` `4` `5` |
|
||||
| title | 标题 | string boolean | `信息` | -- |
|
||||
| content | 内容 | string vnode | -- | -- |
|
||||
| v-model | 显示 | boolean | `false` | `true` `false` |
|
||||
| offset | 位置 | string array | `['50%','50%']` | -- |
|
||||
| area | 尺寸 | string array | `auto` | -- |
|
||||
| move | 拖拽 | boolean | `true` | `true` `false` |anim
|
||||
| maxmin | 缩放 | boolean | `false` | `true` `false` |
|
||||
| resize | 拉伸 | boolean | `false` | `true` `false` |
|
||||
| anim | 入场动画 | number | `0` | `0` - `6` |
|
||||
| isOutAnim | 出场动画 | boolean | `true` | `true` `false` |
|
||||
| btnAlign | 按钮位置 | string | `r` | `l` `c` `r` |
|
||||
| closeBtn | 关闭按钮 | boolean string | `1` | `false` `1` `2` |
|
||||
| time | 关闭时间 | number | `0` | -- |
|
||||
| shade | 遮盖层 | boolean | `true` | `true` `false` |
|
||||
| shadeClose | 遮盖层关闭 | boolean | `true` | `true` `false` |
|
||||
| shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` |
|
||||
| isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` |
|
||||
| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - |
|
||||
| startIndex | 图片初始浏览索引 | number | 0 | - |
|
||||
| full | 最大化回调 | function | - | - |
|
||||
| min | 最小化回调 | function | - | - |
|
||||
| restore | 重置回调 | function | - | - |
|
||||
| success | 打开回调 | function | - | - |
|
||||
| end | 关闭回调 | function | - | - |
|
||||
@ -27,7 +27,7 @@ app.use(layer).mount('#app');
|
||||
|
||||
因 layer-vue 可以独立使用，也可以在 layui-vue 中使用。所以请按照你的实际需求来选择。
|
||||
|
||||
如果你想独立使用 layer-vue, 你需要通过 npm 安装。如果你使用的是 layui-vue, 那么你无需安装 layer-vue。
|
||||
如果你想独立使用 layer-vue, 你需要通过 npm 安装。如果你使用的是 layui-vue, 那么你无需安装 layer-vue, 已内置。
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>入门</legend>
|
||||
@ -69,82 +69,3 @@ const changeVisible = () => {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>选项</legend>
|
||||
</fieldset>
|
||||
|
||||
我们提供了丰富的 `options` 配置, 你可以通过配置来满足对 layer 的定制化, 需要注意的是有些属性仅适用部分组件。
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -- | -- | -- | -- | -- |
|
||||
| type | 类型 | string | `1` | `0` `1` `2` `3` |
|
||||
| title | 标题 | string boolean | `信息` | -- |
|
||||
| content | 内容 | string vnode | -- | -- |
|
||||
| v-model | 显示 | boolean | `false` | `true` `false` |
|
||||
| offset | 位置 | string array | `['50%','50%']` | -- |
|
||||
| area | 尺寸 | string array | `auto` | -- |
|
||||
| move | 拖拽 | boolean | `true` | `true` `false` |anim
|
||||
| maxmin | 缩放 | boolean | `false` | `true` `false` |
|
||||
| resize | 拉伸 | boolean | `false` | `true` `false` |
|
||||
| anim | 入场动画 | number | `0` | `0` - `6` |
|
||||
| isOutAnim | 出场动画 | boolean | `true` | `true` `false` |
|
||||
| btnAlign | 按钮位置 | string | `r` | `l` `c` `r` |
|
||||
| closeBtn | 关闭按钮 | boolean | `true` | `true` `false` |
|
||||
| time | 关闭时间 | number | `0` | -- |
|
||||
| shade | 遮盖层 | boolean | `true` | `true` `false` |
|
||||
| shadeClose | 遮盖层关闭 | boolean | `true` | `true` `false` |
|
||||
| shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` |
|
||||
| isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` |
|
||||
| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - |
|
||||
| startIndex | 图片初始浏览索引 | number | 0 | - |
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>动画</legend>
|
||||
</fieldset>
|
||||
|
||||
anim：Number，默认：0
|
||||
|
||||
我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。
|
||||
|
||||
另外需要注意的是，3.0之前的版本用的是 shift 参数。
|
||||
|
||||
| 属性 | 描述 |
|
||||
| -- | -- |
|
||||
| anim:0 | 平滑放大 |
|
||||
| anim:1 | 从上掉落 |
|
||||
| anim:2 | 从最底部往上滑入 |
|
||||
| anim:3 | 从左滑入 |
|
||||
| anim:4 | 从左翻滚 |
|
||||
| anim:5 | 渐显 |
|
||||
| anim:5 | 抖动 |
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>问题</legend>
|
||||
</fieldset>
|
||||
|
||||
直接调用 layer 的方法，组件会通过 Vue.render 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
|
||||
|
||||
当你需要 context 信息（例如使用全局注册的组件）时，可以通过 appContext 属性传递当前组件 context, 当你需要保留属性响应式时，你可以使用函数返回:
|
||||
|
||||
```
|
||||
import { getCurrentInstance, ref } from 'vue';
|
||||
import { layer } from "@layui/layer-vue";
|
||||
|
||||
const appContext = getCurrentInstance().appContext;
|
||||
|
||||
const title = ref("标题")
|
||||
|
||||
layer.open({
|
||||
title: () => title.value,
|
||||
content: h("children"),
|
||||
appContext: appContext
|
||||
})
|
||||
```
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>结语</legend>
|
||||
</fieldset>
|
||||
|
||||
::: demo 以写作为工具，为道途，先帮助自己一程，再以自己的领悟帮助他人一程, 这是一种服务 -- 庆山
|
||||
<template></template>
|
||||
<script setup></script>
|
||||
:::
|
||||
22
package/document-layer/src/document/zh-CN/question.md
Normal file
22
package/document-layer/src/document/zh-CN/question.md
Normal file
@ -0,0 +1,22 @@
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>问题</legend>
|
||||
</fieldset>
|
||||
|
||||
直接调用 layer 的方法，组件会通过 Vue.render 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
|
||||
|
||||
当你需要 context 信息（例如使用全局注册的组件）时，可以通过 appContext 属性传递当前组件 context。
|
||||
|
||||
```
|
||||
import { getCurrentInstance, ref } from 'vue';
|
||||
import { layer } from "@layui/layer-vue";
|
||||
|
||||
const appContext = getCurrentInstance().appContext;
|
||||
|
||||
const title = ref("标题")
|
||||
|
||||
layer.open({
|
||||
title: () => title.value,
|
||||
content: h("children"),
|
||||
appContext: appContext
|
||||
})
|
||||
```
|
||||
@ -3,25 +3,18 @@
|
||||
<div class="markdown-body light-scheme">
|
||||
<div class="alone-header">
|
||||
<img class="alone-logo" src="../assets/logo.png" />
|
||||
<a
|
||||
style="
|
||||
<a style="
|
||||
position: absolute;
|
||||
right: 16%;
|
||||
line-height: 60px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
"
|
||||
>{{ version }}</a
|
||||
>
|
||||
<a
|
||||
href="https://gitee.com/layui-vue/layer-vue"
|
||||
style="position: absolute; right: 10%; line-height: 75px"
|
||||
>
|
||||
">{{ version }}</a>
|
||||
<a href="https://gitee.com/layui-vue/layer-vue" style="position: absolute; right: 10%; line-height: 75px">
|
||||
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
|
||||
></path>
|
||||
<path fill="#fff"
|
||||
d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
@ -37,9 +30,14 @@
|
||||
<lay-tab-item title="入门" id="/zh-CN/index"></lay-tab-item>
|
||||
<lay-tab-item title="示例" id="/zh-CN/demo"></lay-tab-item>
|
||||
<lay-tab-item title="帮助" id="/zh-CN/help"></lay-tab-item>
|
||||
<lay-tab-item title="问题" id="/zh-CN/question"></lay-tab-item>
|
||||
</lay-tab>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div class="footer footer-index">
|
||||
<p>Released under the <a href="/index.html">MIT License</a>.</p>
|
||||
<p>Copyright © 2021-2022 layui-vue.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</lay-scroll>
|
||||
</template>
|
||||
@ -104,12 +102,14 @@ body {
|
||||
border-bottom: none !important;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.alone-banner p {
|
||||
padding-top: 40px;
|
||||
color: #e2e2e2;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.alone-download {
|
||||
width: 77.5%;
|
||||
border-radius: 4px;
|
||||
@ -124,6 +124,10 @@ body {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
.layui-container {
|
||||
padding-bottom: 50px!important;
|
||||
}
|
||||
|
||||
.layui-elem-field {
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
@ -135,4 +139,16 @@ body {
|
||||
.layui-tab-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 30px 0px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #eee;
|
||||
color: rgba(60, 60, 60, 0.7);
|
||||
font-weight: 300;
|
||||
font-size: 13.6px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -22,6 +22,11 @@ const zhCN = [
|
||||
component: () => import("../document/zh-CN/help.md"),
|
||||
meta: { title: "帮助" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/question",
|
||||
component: () => import("../document/zh-CN/question.md"),
|
||||
meta: { title: "问题" },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -7,6 +7,12 @@ export default {
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineEmits } from "vue";
|
||||
|
||||
export interface CloseBtnProps {
|
||||
closeBtn?: number | string | boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<CloseBtnProps>();
|
||||
|
||||
const emit = defineEmits(["closeHandle"]);
|
||||
|
||||
const closeHandle = () => {
|
||||
@ -16,7 +22,7 @@ const closeHandle = () => {
|
||||
|
||||
<template>
|
||||
<a
|
||||
class="layui-layer-ico layui-layer-close layui-layer-close1"
|
||||
:class="['layui-layer-ico layui-layer-close layui-layer-close' + closeBtn]"
|
||||
href="javascript:;"
|
||||
@click="closeHandle"
|
||||
></a>
|
||||
|
||||
@ -12,37 +12,10 @@ import CloseBtn from "./CloseBtn.vue";
|
||||
import Resize from "./Resize.vue";
|
||||
import Photos from "./Photos.vue";
|
||||
import Notifiy from "./Notifiy.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,
|
||||
calculatePhotosArea,
|
||||
calculateNotifOffset,
|
||||
removeNotifiyFromQueen,
|
||||
getNotifyAnimationClass,
|
||||
} from "../utils";
|
||||
import useMove from "../composable/useMove";
|
||||
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, calculatePhotosArea, calculateNotifOffset, removeNotifiyFromQueen, getNotifyAnimationClass } from "../utils";
|
||||
import useResize from "../composable/useResize";
|
||||
import useMove from "../composable/useMove";
|
||||
import { zIndexKey } from "../tokens";
|
||||
|
||||
export interface LayModalProps {
|
||||
@ -59,21 +32,7 @@ export interface LayModalProps {
|
||||
btn?: Record<string, Function>[] | false;
|
||||
move?: boolean | string;
|
||||
resize?: boolean | string;
|
||||
type?:
|
||||
| 0
|
||||
| 1
|
||||
| 2
|
||||
| 3
|
||||
| 4
|
||||
| 5
|
||||
| 6
|
||||
| "dialog"
|
||||
| "page"
|
||||
| "iframe"
|
||||
| "loading"
|
||||
| "drawer"
|
||||
| "photos"
|
||||
| "notifiy";
|
||||
type?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | "dialog" | "page" | "iframe" | "loading" | "drawer" | "photos" | "notifiy";
|
||||
content?: string | Function | object | VNodeTypes;
|
||||
isHtmlFragment?: boolean;
|
||||
shade?: boolean | string;
|
||||
@ -113,19 +72,19 @@ const props = withDefaults(defineProps<LayModalProps>(), {
|
||||
shade: true,
|
||||
shadeClose: true,
|
||||
shadeOpacity: "0.1",
|
||||
closeBtn: true,
|
||||
closeBtn: "1",
|
||||
btnAlign: "r",
|
||||
load: 0,
|
||||
anim: 0,
|
||||
resize: false,
|
||||
isHtmlFragment: false,
|
||||
isOutAnim: true,
|
||||
destroy: () => {},
|
||||
success: () => {},
|
||||
end: () => {},
|
||||
full: () => {},
|
||||
min: () => {},
|
||||
restore: () => {},
|
||||
destroy: () => { },
|
||||
success: () => { },
|
||||
end: () => { },
|
||||
full: () => { },
|
||||
min: () => { },
|
||||
restore: () => { },
|
||||
yesText: "确定",
|
||||
isFunction: false,
|
||||
isMessage: false,
|
||||
@ -148,7 +107,7 @@ const offset: Ref<string[]> = ref(
|
||||
calculateOffset(props.offset, area.value, props.type)
|
||||
);
|
||||
const contentHeight = ref(
|
||||
calculateContent(area.value[1], props.btn, type, props.isMessage)
|
||||
calculateContent(props.title,area.value[1], props.btn, type, props.isMessage)
|
||||
);
|
||||
const index: Ref<number | Function> = ref(
|
||||
props.zIndex ?? inject(zIndexKey, 99999)
|
||||
@ -172,33 +131,30 @@ const _l: Ref<string> = ref(offset.value[1]);
|
||||
*/
|
||||
const firstOpenDelayCalculation = function () {
|
||||
nextTick(async () => {
|
||||
area.value = getArea(layero.value);
|
||||
if (type == 4) {
|
||||
area.value = calculateDrawerArea(props.offset, props.area);
|
||||
}
|
||||
if (type == 5) {
|
||||
// @ts-ignore
|
||||
area.value = await calculatePhotosArea(
|
||||
props.imgList[props.startIndex].src,
|
||||
props
|
||||
);
|
||||
}
|
||||
if (props.isHtmlFragment && props.area === "auto") {
|
||||
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];
|
||||
_l.value = area.value[1];
|
||||
t.value = offset.value[0];
|
||||
l.value = offset.value[1];
|
||||
_t.value = offset.value[0];
|
||||
_l.value = offset.value[1];
|
||||
supportMove();
|
||||
area.value = getArea(layero.value);
|
||||
if (type == 4) {
|
||||
area.value = calculateDrawerArea(props.offset, props.area);
|
||||
}
|
||||
if (type == 5) {
|
||||
// @ts-ignore
|
||||
area.value = await calculatePhotosArea(
|
||||
props.imgList[props.startIndex].src,
|
||||
props
|
||||
);
|
||||
}
|
||||
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];
|
||||
_l.value = area.value[1];
|
||||
t.value = offset.value[0];
|
||||
l.value = offset.value[1];
|
||||
_t.value = offset.value[0];
|
||||
_l.value = offset.value[1];
|
||||
supportMove();
|
||||
});
|
||||
};
|
||||
|
||||
@ -360,6 +316,7 @@ watch(
|
||||
() => h.value,
|
||||
() => {
|
||||
contentHeight.value = calculateContent(
|
||||
props.title,
|
||||
h.value,
|
||||
props.btn,
|
||||
type,
|
||||
@ -423,31 +380,6 @@ const styles = computed<any>(() => {
|
||||
height: h.value,
|
||||
zIndex: index.value,
|
||||
};
|
||||
if (props.isHtmlFragment && props.area === "auto") {
|
||||
// @ts-ignore
|
||||
style.maxWidth = "calc(100% - 2px)";
|
||||
// @ts-ignore
|
||||
style.maxHeight = "calc(100% - 51px)";
|
||||
style.top = "50%";
|
||||
style.left = "50%";
|
||||
if (Array.isArray(offset.value)) {
|
||||
if (offset.value[0].indexOf("px") > -1) {
|
||||
style.top = offset.value[0];
|
||||
}
|
||||
if (offset.value[1].indexOf("px") > -1) {
|
||||
style.left = offset.value[1];
|
||||
}
|
||||
if (
|
||||
offset.value[0].indexOf("%") > -1 ||
|
||||
offset.value[1].indexOf("%") > -1
|
||||
) {
|
||||
// @ts-ignore
|
||||
style.transform = `translate(-${
|
||||
style.left.indexOf("%") > -1 ? style.left : 0
|
||||
},-${style.top.indexOf("%") > -1 ? style.top : 0})`;
|
||||
}
|
||||
}
|
||||
}
|
||||
return style;
|
||||
});
|
||||
|
||||
@ -623,33 +555,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>
|
||||
@ -661,55 +575,28 @@ 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>
|
||||
<Notifiy
|
||||
v-if="type === 6"
|
||||
@close="closeHandle"
|
||||
:title="props.title"
|
||||
:content="props.content"
|
||||
:isHtmlFragment="props.isHtmlFragment"
|
||||
:icon="props.icon"
|
||||
:iconClass="iconClass"
|
||||
></Notifiy>
|
||||
<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 && type != 6"
|
||||
>
|
||||
<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>
|
||||
<CloseBtn v-if="closeBtn" @closeHandle="closeHandle"></CloseBtn>
|
||||
<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 != false" :close-btn="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>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { title } from "process";
|
||||
import { layer } from "../index";
|
||||
|
||||
// 随机数
|
||||
@ -132,6 +133,7 @@ export function calculateType(modalType: number | string) {
|
||||
// @param height 高度
|
||||
// @param btn 操作集合
|
||||
export function calculateContent(
|
||||
title: any,
|
||||
height: any,
|
||||
btn: any,
|
||||
type: any,
|
||||
@ -141,24 +143,48 @@ export function calculateContent(
|
||||
height = "100%";
|
||||
}
|
||||
if (btn && btn.length > 0) {
|
||||
if (type === 0) {
|
||||
return "calc(" + height + " - 137px)";
|
||||
if (type == 0) {
|
||||
if(title) {
|
||||
return "calc(" + height + " - 137px)";
|
||||
} else {
|
||||
return "calc(" + height + " - 86px)";
|
||||
}
|
||||
}
|
||||
if (type === 1) {
|
||||
return "calc(" + height + " - 102px)";
|
||||
if (type == 1) {
|
||||
if(title) {
|
||||
return "calc(" + height + " - 102px)";
|
||||
} else {
|
||||
return "calc(" + height + " - 51px)";
|
||||
}
|
||||
}
|
||||
if (type === 2) {
|
||||
return "calc(" + height + " - 102px)";
|
||||
if (type == 2) {
|
||||
if(title) {
|
||||
return "calc(" + height + " - 102px)";
|
||||
} else {
|
||||
return "calc(" + height + " - 51px)";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (type === 0) {
|
||||
return isMessage ? height : "calc(" + height + " - 137px)";
|
||||
if (type == 0) {
|
||||
if(title) {
|
||||
return isMessage ? height : "calc(" + height + " - 137px)";
|
||||
} else {
|
||||
return isMessage ? height : "calc(" + height + " - 86px)";
|
||||
}
|
||||
}
|
||||
if (type === 1) {
|
||||
return "calc(" + height + " - 51px)";
|
||||
if (type == 1) {
|
||||
if(title) {
|
||||
return "calc(" + height + " - 51px)";
|
||||
} else {
|
||||
return "calc(" + height + " - 0px)";
|
||||
}
|
||||
}
|
||||
if (type === 2) {
|
||||
return "calc(" + height + " - 51px)";
|
||||
if (type == 2) {
|
||||
if(title) {
|
||||
return "calc(" + height + " - 51px)";
|
||||
} else {
|
||||
return "calc(" + height + " - 0px)";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -344,9 +370,7 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
|
||||
// 间隙
|
||||
let transOffsetTop = 15;
|
||||
// @ts-ignore 删除项的高度
|
||||
let offsetHeight =
|
||||
document.getElementById(layerId)?.firstElementChild?.firstElementChild
|
||||
?.offsetHeight;
|
||||
let offsetHeight = document.getElementById(layerId)?.firstElementChild?.firstElementChild ?.offsetHeight;
|
||||
// @ts-ignore
|
||||
window.NotifiyQueen = window.NotifiyQueen || [];
|
||||
// @ts-ignore
|
||||
@ -366,14 +390,10 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
|
||||
?.firstElementChild;
|
||||
if (offsetType === "rt" || offsetType === "lt") {
|
||||
// @ts-ignore
|
||||
dom.style["top"] =
|
||||
parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
|
||||
dom.style["top"] = parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
|
||||
} else {
|
||||
// @ts-ignore
|
||||
let bottom =
|
||||
parseFloat(dom.style["top"].split(" - ")[1]) -
|
||||
transOffsetTop -
|
||||
offsetHeight;
|
||||
let bottom = parseFloat(dom.style["top"].split(" - ")[1]) - transOffsetTop - offsetHeight;
|
||||
// @ts-ignore
|
||||
dom.style["top"] = "calc(100vh - " + bottom + "px)";
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user