layui/example/docs/zh-CN/components/modal.md

::: anchor :::

::: title 基本使用 :::

::: demo

基础使用 内容 <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 }; } }; </script>

:::

::: title 允许拖动 :::

::: demo

允许拖动 内容 <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 }; } }; </script>

:::

::: title 放大缩小 :::

::: demo

放大缩小 内容 <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 }; } }; </script>

:::

::: title 指定位置 :::

::: demo

指定位置 内容 <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 }; } }; </script>

:::

::: title 尺寸拉伸 :::

::: demo

尺寸拉伸 内容 <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 }; } }; </script>

:::

::: title 远程窗体 :::

::: demo

远程窗体 <script> import { ref, watch } from "vue"; import { useRoute, useRouter } from "vue-router"; export default { setup() { const type5 = ref(2) const visible5 = ref(false) const changeVisible5 = function() { visible5.value = !visible5.value } return { type5, visible5 }; } }; </script>

:::

::: title 定义操作 :::

::: demo

定义操作 内容 <script> import { ref, watch } from "vue"; import { useRoute, useRouter } from "vue-router"; export default { setup() { const visible6 = ref(false) const btn6 = [ {text:'确认', callback: ()=>{ alert("确认事件") }}, {text:'取消', callback: ()=>{ alert("取消事件") }} ] const changeVisible6 = function() { visible6.value = !visible6.value } return { btn6, visible6 }; } }; </script>

:::

::: title 关闭遮盖 :::

::: demo

开启遮盖 内容 <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 }; } }; </script>

:::

::: title 函数调用 :::

::: demo

打开 关闭 关闭所有 <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}) } 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	按钮
btnAlign	按钮布局	l r c
anim	入场动画	0 - 6
isOutAnim	关闭动画	true false
success	显示回调	--
end	关闭回调	--

:::

::: comment :::

::: previousNext modal :::