373 lines
8.4 KiB
Plaintext
373 lines
8.4 KiB
Plaintext
::: anchor
|
|
:::
|
|
|
|
::: title 基本介绍
|
|
:::
|
|
|
|
::: describe 需要用户处理事务，又不希望跳转页面以致打断工作流程时，承载相应的操作。
|
|
:::
|
|
|
|
::: title 基本使用
|
|
:::
|
|
|
|
::: demo 通过 `lay-layer` 创建一个基础弹层, 使用 `v-model` 控制显示状态。
|
|
|
|
<template>
|
|
<lay-button @click="changeVisible1">打开</lay-button>
|
|
<lay-layer title="基础使用" v-model="visible1">
|
|
内容
|
|
</lay-layer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
export default {
|
|
setup() {
|
|
const visible1 = ref(false)
|
|
const changeVisible1 = function() {
|
|
visible1.value = !visible1.value
|
|
}
|
|
return {
|
|
visible1,
|
|
changeVisible1
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 禁止拖拽
|
|
:::
|
|
|
|
::: demo 通过 `move` 属性设置弹层是否可拖动, 默认为 `true`。
|
|
|
|
<template>
|
|
<lay-button @click="changeVisible2">打开</lay-button>
|
|
<lay-layer title="标题" :move="false" v-model="visible2">
|
|
内容
|
|
</lay-layer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
const visible2 = ref(false)
|
|
const changeVisible2 = function() {
|
|
visible2.value = !visible2.value
|
|
}
|
|
return {
|
|
visible2,
|
|
changeVisible2
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 放大缩小
|
|
:::
|
|
|
|
::: demo 通过 `maxmin` 属性开启放大缩小操作, 默认为 `false`。
|
|
|
|
<template>
|
|
<lay-button @click="changeVisible3">打开</lay-button>
|
|
<lay-layer title="标题" v-model="visible3" :maxmin="true">
|
|
内容
|
|
</lay-layer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
const visible3 = ref(false)
|
|
const changeVisible3 = function() {
|
|
visible3.value = !visible3.value
|
|
}
|
|
return {
|
|
visible3,
|
|
changeVisible3
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 指定位置
|
|
:::
|
|
|
|
::: demo 通过 `offset` 属性设置初始显示位置, 支持 `string` 与 `array` 类型。
|
|
|
|
<template>
|
|
<lay-button @click="changeVisible4">打开</lay-button>
|
|
<lay-layer title="标题" v-model="visible4" move="true" :offset="['100px','100px']">
|
|
内容
|
|
</lay-layer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
const visible4 = ref(false)
|
|
const changeVisible4 = function() {
|
|
visible4.value = !visible4.value
|
|
}
|
|
return {
|
|
visible4,
|
|
changeVisible4
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 尺寸拉伸
|
|
:::
|
|
|
|
::: demo 通过 `resize` 属性开启窗体拉伸, 默认为 `false`。
|
|
|
|
<template>
|
|
<lay-button @click="changeVisible8" type="primary">尺寸拉伸</lay-button>
|
|
<lay-layer title="拉伸尺寸" :resize="true" v-model="visible8">
|
|
内容
|
|
</lay-layer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
const visible8 = ref(false)
|
|
const changeVisible8 = function() {
|
|
visible8.value = !visible8.value
|
|
}
|
|
return {
|
|
visible8,
|
|
changeVisible8
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 远程窗体
|
|
:::
|
|
|
|
::: demo 你可以使用 layer 展示其他网站页面, 只需要设置 `type` 属性为 2, `content` 属性设置为指定页面的链接。
|
|
|
|
<template>
|
|
<lay-button @click="changeVisible5" type="primary">打开</lay-button>
|
|
<lay-layer title="加载 Iframe 内容" :area="['500px','400px']" v-model="visible5" move="true" :type="2" content="http://www.pearadmin.com"></lay-layer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
const visible5 = ref(false)
|
|
const changeVisible5 = function() {
|
|
visible5.value = !visible5.value
|
|
}
|
|
return {
|
|
visible5,
|
|
changeVisible5
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 定义操作
|
|
:::
|
|
|
|
::: demo 通过 `btn` 属性定义弹层底部操作。
|
|
|
|
<template>
|
|
<lay-button @click="changeVisible6">打开</lay-button>
|
|
<lay-layer title="标题" v-model="visible6" :btn="btn6">
|
|
内容
|
|
</lay-layer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
const visible6 = ref(false)
|
|
const changeVisible6 = function() {
|
|
visible6.value = !visible6.value
|
|
}
|
|
const btn6 = [
|
|
{text:'确认', callback: ()=>{ alert("确认事件") }},
|
|
{text:'取消', callback: ()=>{ alert("取消事件") }}
|
|
]
|
|
return {
|
|
btn6,
|
|
visible6,
|
|
changeVisible6
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 关闭遮盖
|
|
:::
|
|
|
|
::: demo 通过 `shade` 属性设置开启遮盖层, `shadeClose` 属性用于指定在点击遮盖层时是否关闭对应窗体。
|
|
|
|
<template>
|
|
<lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
|
|
<lay-layer title="开启遮盖" move="true" shade="true" shadeClose="true" v-model="visible7">
|
|
内容
|
|
</lay-layer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
const visible7 = ref(false)
|
|
const changeVisible7 = function() {
|
|
visible7.value = !visible7.value
|
|
}
|
|
return {
|
|
visible7,
|
|
changeVisible7
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 关闭标题
|
|
:::
|
|
|
|
::: demo
|
|
|
|
<template>
|
|
<lay-button @click="changeVisible9" type="primary">关闭标题</lay-button>
|
|
<lay-layer title="false" move="true" shade="false" v-model="visible9">
|
|
内容
|
|
</lay-layer>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
const visible9 = ref(false)
|
|
const changeVisible9 = function() {
|
|
visible9.value = !visible9.value
|
|
}
|
|
return {
|
|
visible9,
|
|
changeVisible9
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 函数调用
|
|
:::
|
|
|
|
::: demo 你可以通过 `lay-layer` 标签来创建弹, 亦可以通过 `layer.open` 方法来唤起一个弹出层。
|
|
|
|
<template>
|
|
<lay-button @click="open" type="primary">打开</lay-button>
|
|
<lay-button @click="close" type="primary">关闭</lay-button>
|
|
<lay-button @click="closeAll" type="primary">关闭所有</lay-button>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, watch } from "vue";
|
|
import { layer } from "@layui/layer-vue"
|
|
import { useRoute, useRouter } from "vue-router";
|
|
export default {
|
|
setup() {
|
|
|
|
let id = null;
|
|
|
|
const open = function() {
|
|
id = layer.open({title:"标题",content:"内容", shade: false, btn: [
|
|
{text:"关闭", callback: function(layerId) {
|
|
layer.close(layerId);
|
|
}}
|
|
]})
|
|
}
|
|
|
|
const close = function() {
|
|
layer.close(id)
|
|
}
|
|
|
|
const closeAll = function() {
|
|
layer.closeAll()
|
|
}
|
|
|
|
return {
|
|
open,
|
|
close,
|
|
closeAll
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
:::
|
|
|
|
::: title 弹层属性
|
|
:::
|
|
|
|
::: table
|
|
|
|
| 备注 | 描述 | 默认值 |
|
|
| --------------- | ------------- | --------------------------|
|
|
| title | 标题 | -- |
|
|
| move | 允许拖拽 | `false` |
|
|
| maxmin | 最小化 最大化 | `false` |
|
|
| offset | 位置 | -- |
|
|
| area | 尺寸 | -- |
|
|
| v-model | 展示 隐藏 | false |
|
|
| content | 内容 | -- |
|
|
| shade | 开启遮盖 | -- |
|
|
| shadeClose | 遮盖点击关闭 | -- |
|
|
| shadeOpacity | 遮盖层透明度 | `0.1` |
|
|
| zIndex | 自定义层级 | -- |
|
|
| type | 类型 | `1: component` `2: iframe` |
|
|
| closeBtn | 显示关闭 | true |
|
|
| btn | 按钮 格式:{text:"",callback:function(){}} | -- |
|
|
| btnAlign | 按钮布局 | `l` `r` `c` |
|
|
| anim | 入场动画 | `0` `-` `6` |
|
|
| isOutAnim | 关闭动画 | `true` `false` |
|
|
| success | 显示回调 | -- |
|
|
| close | 关闭回调 | -- |
|
|
|
|
:::
|
|
|
|
::: contributor modal
|
|
:::
|
|
|
|
::: previousNext modal
|
|
::: |