0


Vxe UI vxe-modal 实现窗口的最大化与最小化,实现弹出多窗口

Vxe UI vue vxe-modal 实现窗口的最大化与最小化,实现弹出多窗口

通过js方式调用

js方式脱离模板,每次创建是多个实例。

mask:关闭遮罩层,如果不关闭则会显示遮罩层,就不能实现同时操作多窗口
lockView:锁定页面,如果不关闭则页面会被锁注,不能继续点击其他按钮
width:设置窗口宽度
height:设置窗口高度
showZoom:开启最小化和最大化功能
escClosable:按 Esc 键关闭窗口,按照层级以此关闭,最顶层优先触发关闭

<template><div><vxe-buttoncontent="点击弹出"@click="openEvent"></vxe-button></div></template><scriptsetup>import{ VxeUI }from'vxe-pc-ui'let num =1constopenEvent=()=>{
  VxeUI.modal.open({title:'标题2',content:`我是第 ${num++} 个`,mask:false,lockView:false,escClosable:true,width:600,height:400,showZoom:true})}</script>

效果:

请添加图片描述

通过模板方式调用

模板方式是单例模式,要多少个弹窗就写多少个模板。

<template><div><vxe-buttoncontent="点击弹出"@click="showPopup = true"></vxe-button><vxe-modalv-model="showPopup":width="600":height="400"show-zoom><div>窗口最大化和最小化</div></vxe-modal></div></template><scriptsetup>import{ ref }from'vue'const showPopup =ref(false)</script>

查看 https://github.com/x-extends/vxe-pc-ui
查看码云 https://gitee.com/x-extends/vxe-pc-ui


本文转载自: https://blog.csdn.net/xlz26296/article/details/139595035
版权归原作者 大猩猩X 所有, 如有侵权,请联系我们删除。

“Vxe UI vxe-modal 实现窗口的最大化与最小化,实现弹出多窗口”的评论:

还没有评论