VUE项目 弹窗改为页面供其他项目嵌入iframe - 截取地址栏URL中的参数

新页面 <ndl-page> 包裹组件

删除组件中的dialog和下部按钮

新建页面引入组件 注意:窗口的表格宽度要改为100vw

截取地址栏URL中的参数

复制代码
<template>
  <div class="view-box">
    <ndl-page>
      <detailDialog ref="projectDetailDialogRef" @refreshList="query" />
    </ndl-page>
  </div>
</template>

<script>
import detailDialog from '@/views/varehouseView/components/detailDialogView.vue';
export default {
  components: {
    detailDialog ,
  },
  data() {
    return {};
  },
  mounted() { },
  async created() {
    this.getParams();
  },
  methods: {
    // 获得iframe的src的params
    getParams(val) {
      let search = location.search;
      let params1 = search.substring(search.indexOf('?') + 1, search.length).split('&');
      params1[params1.length - 1] = params1[params1.length - 1].slice(0, -1);
      let params2 = {};
      for (let i = 0; i < params1.length; i++) {
        let v = params1[i] || '';
        if (v && v.indexOf('=') > -1) {
          let t = (params1[i] || '').split('=') || [];
          if (t.length == 2) {
            params2[t[0]] = t[1];
          }
        }
      }
      if (params2) {
        if (params2.id) {
          this.$nextTick(() => {
            this.toDetail(params2.id, params2.contactNumber);
          })
        }
      }
    },
    toDetail(id, contactNumber) {
      this.$refs.projectDetailDialogRef.open(id, contactNumber);
    },
  },
};
</script>

<style lang="scss" scoped></style>
相关推荐
ShineWinsu2 小时前
对于JavaScript:操作元素的解析
开发语言·前端·javascript·面试·web·dom·元素
福兮说2 小时前
JSON 格式正确,数据就可靠吗?我用一份自编配置检查类型与空值
java·前端·json
程序员老赵4 小时前
Docker 部署青龙面板:轻松搭建定时任务管理平台
前端·docker·开源
Swot4 小时前
Asciidoctor 公式数字下标错位问题:原因分析与解决方案
前端
Swot4 小时前
leo-editor 中将 Markdown 内容转成 asciidoc 格式
前端
狒狒AI4 小时前
Remotion / GSAP+Three / HyperFrames / Skia 四栈实测:代码渲染知识视频的选栈方法(附开源技能)
前端·人工智能·aigc
修炼的dance4 小时前
浏览器里导出H.265,8.5秒和55.5秒差在硬件
前端
补码缩写4 小时前
WebCodecs选编码器,探测之后还要验解码和播放
前端
大文说跨境4 小时前
亚马逊多账号管理浏览器怎么选?云登/紫鸟/AdsPower 对比
java·前端·自动化
hunter_0765 小时前
iOS 首页复杂嵌套滚动技术方案:头部固定 + 网格滚动 + Tab 吸顶 + 每 Tab 独立下拉刷新
前端