首页 > 其他分享 >dialog 中引用iframe, 通过iframe 调用 dialog 父页面方法

dialog 中引用iframe, 通过iframe 调用 dialog 父页面方法

时间:2024-04-09 11:36:52浏览次数:24  
标签:vue dialog dialogVisible .__ iframe 页面

父页面: <div id="ksbhif">
<el-dialog :visible.sync="dialogVisible" title="开始备货" width="80%" top="50px">
  <iframe :src="iframeUrl" frameborder="0" width="100%" height="600px"></iframe>
</el-dialog>
</div> 父页面vue方法 updateDialog(){
  this.dialogVisible = false; //关闭dialog
  console.log("测试还傻傻地发挥");
}, 动态给iframeUrl赋值 this.iframeUrl = "./bhd_ksbh.html?type=2&bhdh="+row.id;
this.dialogVisible = true; 显示dialog   子页面调用方法 gb(){
  $(window.parent.document).find('#app').each(function() {
    if (this.__vue__.dialogVisible) {
      this.__vue__.dialogVisible = false;
      this.__vue__.updateDialog();
    }
  });
},

标签:vue,dialog,dialogVisible,.__,iframe,页面
From: https://www.cnblogs.com/jiwd/p/18123551

相关文章

  • 一个简单的Java程序,结合HTML页面,用于随机抽取人员
    importjava.util.ArrayList;importjava.util.List;importjava.util.Random;importjava.util.Scanner;publicclassRandomNamePicker{publicstaticvoidmain(String[]args){Scannerscanner=newScanner(System.in);List<String&g......
  • Vscode设置自动生成vue页面代码块
    1.ctrl+shift+p 2. 输入snippet->首选项:配置用户代码片段 3. 输入vue,选择vue.json(vue) 4.输入下面代码:"Printtoconsole":{      "prefix":"vue",    "body":[      "<template>",      &qu......
  • VOL框架 其他页面调用GetPageData的实现方法
    VOL框架其他页面调用GetPageData的实现方法例如:B页面访问A页面的GetPageData实现思路:1、A后端新建一个Controller,通过这个Controller调用A的service的GetPageData   注意 HttpPost参数要加上 [FromBody][HttpPost,Route("getSubList"),AllowAnonymous]......
  • Vue实现手机APP页面的切换,如何使用Vue Router进行路由管理呢?
    在Vue中,实现手机APP页面的切换,通常会使用VueRouter进行路由管理。VueRouter是Vue.js官方的路由管理器,它和Vue.js深度集成,使构建单页面应用变得易如反掌。以下是一个简单的步骤说明,展示如何使用VueRouter实现手机APP页面的切换:安装VueRouter如果你还没有安装VueRouter,可......
  • Vue2中使用iframe展示文件流(PDF)以及blob类型接口错误展示返回值
    需求使用iframe展示后端接口传输来的文件流(pdf),如果接口返回错误则弹出提示html部分<iframe:src="url"width="100%"/>接口部分//接口封装已忽略,注意:如需接口接收文件流,请在请求中加入responseType:'blob'以及type:"application/json;chartset=UTF-8"function......
  • 从输入URL到页面渲染的全过程详解
    当我们在浏览器中输入一个URL并按下回车键时,背后其实发生了一系列的复杂过程。这个过程涉及到了网络协议、服务器处理、数据传输等多个环节。下面,我们将详细解析这一过程。一、URL解析当我们在浏览器中输入URL并回车后,浏览器首先会进行URL解析。URL(UniformResourceLocat......
  • 全栈的自我修养 ———— react未知地址默认导航至404页面
    方法1在根目录上添加一个errorElement{path:'/',element:<Navigateto="/public/index"replace/>,errorElement:<div>errorPage</div>},方法2{path:'*',element:<div>errorPage</di......
  • WebUI测试-获取html页面表格数据并存到Excel中
    fromselenium.webdriver.supportimportexpected_conditionsasECimportpandasaspdtable=WebDriverWait(driver,10).until(EC.presence_of_element_located((By.CSS_SELECTOR,'table')))#表格元素rows=table.find_elements(By.CSS_SELECTOR,"tbody......
  • 解决WordPress页面错位问题的实用技巧
    解决WordPress页面错位问题的实用技巧WordPress作为世界上最流行的内容管理系统之一,提供了强大的功能和灵活的定制性,使得许多网站管理员和开发人员选择使用它来搭建自己的网站。然而,有时候在使用WordPress创建页面时,可能会遇到页面错位的问题,导致页面布局混乱,影响用户体验。那么,......
  • Android Studio学习13——认识Activity的页面任务栈
    ......