layui多层弹窗的实现

1.先引入layui的样式和JS

<link href="layui.css" rel="stylesheet" /

<script src="layui.js"></script>

2.定义父级弹窗

<script type="text/javascript">

layui.use('table',function(){

        var layer=layui.layer,

                $=layui.$;

        layer.open({

                type:2,                               //弹窗样式

                title:"父级弹窗",                //弹窗名字

                content:' '                         //新页面的地址

                end:function(){}               //操作成功后的执行步骤

        })

});

</script>

3. 定义子级弹窗

<script type="text/javascript">

layui.use('table',function(){

        var layer=layui.layer,

                $=layui.$;

        parent.layer.open({

                type:2,                               //弹窗样式

                title:"子级弹窗",                //弹窗名字

                content:' '                         //新页面的地址

                end:function(){}               //操作成功后的执行步骤

        })

});

</script>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue3中实现多层弹窗的嵌套可以通过以下步骤实现: 1.在父组件中定义一个状态变量来控制弹窗的显示与隐藏。 2.在父组件中通过v-if指令来控制弹窗的显示与隐藏,同时通过v-bind指令将状态变量传递给子组件。 3.在子组件中定义一个状态变量来控制弹窗的显示与隐藏,同时通过props接收父组件传递的状态变量。 4.在子组件中通过v-if指令来控制弹窗的显示与隐藏,同时通过v-bind指令将状态变量传递给子组件的子组件。 5.重复以上步骤即可实现多层弹窗的嵌套。 示例代码如下: // 父组件 <template> <div> <button @click="showModal = true">打开弹窗</button> <modal :show="showModal" @close="showModal = false"> <h2>这是一个弹窗</h2> <button @click="showSubModal = true">打开子弹窗</button> <sub-modal :show="showSubModal" @close="showSubModal = false"> <h2>这是一个子弹窗</h2> </sub-modal> </modal> </div> </template> <script> import Modal from './Modal.vue' import SubModal from './SubModal.vue' export default { components: { Modal, SubModal }, data() { return { showModal: false, showSubModal: false } } } </script> // modal组件 <template> <div v-if="show" class="modal"> <div class="modal-content"> <slot></slot> <button @click="$emit('close')">关闭弹窗</button> </div> </div> </template> <script> export default { props: { show: { type: Boolean, default: false } } } </script> // sub-modal组件 <template> <div v-if="show" class="modal"> <div class="modal-content"> <slot></slot> <button @click="$emit('close')">关闭子弹窗</button> </div> </div> </template> <script> export default { props: { show: { type: Boolean, default: false } } } </script>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值