element-ui跳转导致弹框关闭问题

本文介绍了在Vue.js应用中如何实现A页面打开弹窗并保持不关闭,即使跳转到B页面复制内容后返回A页面,弹窗仍然保持打开状态。关键在于设置弹窗样式使其固定,并利用keep-alive组件进行页面缓存,确保页面状态的持久化。同时,代码示例展示了如何配置el-dialog元素以及App.vue中的keep-alive部分。
摘要由CSDN通过智能技术生成

业务需求:A页面打开了弹窗,要跳转至B页面复制内容粘贴在A页面的弹窗form里。所以要保持A页面的弹窗不关闭。
在这里插入图片描述
A页面:设置弹窗样式和不关闭

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible" :fullscreen="false" :modal="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
/deep/.el-dialog__wrapper {
  position: fixed;
  top: 95px;
  right: 0;
  bottom: 0;
  left: 210px;
  overflow: auto;
  margin: 0;
  background-color: rgba(0,0,0,.5);
}

App.vue:使用keep-alive添加页面缓存,

   <keep-alive>
     <router-view v-if="isRouterAlive"></router-view>
   </keep-alive>

注意:页面必须设置name属性缓存才能生效

export default {
  name:"codeGenerate",
}

参考链接:https://www.jb51.net/article/191439.htm

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值