`
huangyongxing310
  • 浏览: 477783 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

vueDialogTest004(打开别的页面)

 
阅读更多
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- <script src="../../../miniui/scripts/jquery-1.11.1.min.js"
            type="text/javascript"></script> -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="TestC002.js"></script>
    <!--<script src="asideMenu.js"></script>-->
    <!-- <script src="TestD.js"></script> -->

</head>

<body>
    <div id="app">
        <el-button type="text" @click="open()">点击打开 Dialog</el-button>

        <runoob :name="name" :sex="sex"></runoob>
    </div>

    <!--<div>-->
    <!--<el-dialog-->
    <!--title="提示"-->
    <!--:visible="show"-->
    <!--size="tiny"-->
    <!--:before-close="handleClose">-->
    <!--</el-dialog>-->
    <!--</div>-->

</body>
</html>


<script type="text/javascript">
    var temp = `
    <div>
        <el-dialog
                title="提示"
                :visible="show"
                size="tiny"
                :before-close="handleClose" >
               <!--<div v-html="Url"></div>-->
           <iframe :src="Url" width="100%" height="100%"
        style="border: 0px;"></iframe>
        </el-dialog>
    </div>
    `;

    // 创建构造器
    var dialog = Vue.extend({
        template : temp,
        data : function () {
            return {
                show : true,
                name : "nameTets",
                Url : "html001.html",
                sex : "sss"
            }
        },
        methods : {
            handleClose : function () {
                console.log("el-dialog.handleClose");
                var data = {name : this.name, show : this.show};
                this.getDataFun(data);
                console.log(" this.getDataFun(data); end");
                this.show = false;
                this.$el.remove()
                this.$destroy()
            },
        }
    });

    Vue.prototype.$dialog = function (model, getData) {
        var $dialog = new dialog();
        $dialog.getDataFun = getData;
        //        model.show = true;
        //        $Profile.model = model;
        document.body.appendChild($dialog.$mount().$el);
    };

    var vm = new Vue({
        el : '#app',
        data : {
            show : true,
            name : "nameTets",
            sex : "sss"
        },
        methods : {
            open : function () {
                vm.$dialog(true, function (date) {
                    console.log("getData;");
                    console.log(" vue getData;");
                    console.log(date);
                });
            },
            //            getData :
        }
    })


</script>
分享到:
评论

相关推荐

    【图像融合】加权算法高分辨率和低分辨率图像融合(含清晰度)【含Matlab源码 4405期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    源代码-BASISBBS最易ASP论坛 v1.0.7.zip

    源代码-BASISBBS最易ASP论坛 v1.0.7.zip

    【图像去噪】高斯滤波+均值滤波+中值滤波+双边滤波图像去噪(含信噪比)【含Matlab源码 2747期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    华为2019创新大赛的工程文件+各种模型的backbone和tricks

    华为大模型 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks

    【脑肿瘤检测】 GUI SOM脑肿瘤检测【含Matlab源码 2322期】.zip

    【脑肿瘤检测】 GUI SOM脑肿瘤检测【含Matlab源码 2322期】

    顾客满意度调查表.doc

    顾客满意度调查表.doc

    Excel模板个人简历优雅简约单页30.docx

    Excel模板个人简历优雅简约单页30.docx

    响应式web前段开发程序源代码

    响应式web前段开发程序一书的所有源代码,PPT,课件,免费不要钱,有需要的下载即可,我是好人!给我点赞,让更多的大学生看见,大学生help大学生!

    HC400-20标定版描述文件及标定版ps文件

    HC400-20标定版描述文件及标定版ps文件

    光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip

    【备注】 1.项目代码功能经验证ok,确保稳定可靠运行。欢迎下载使用!在使用过程中,如有问题或建议,请及时私信沟通。 2.主要针对各个计算机相关专业,包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间,不仅可作为入门进阶,也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。 5.期待你能在项目中找到乐趣和灵感,也欢迎你的分享和反馈! 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip

    【交通标志识别】 GUI BP神经网络雾霾天气交通标志识别(带面板)【含Matlab源码 1771期】.zip

    【交通标志识别】 GUI BP神经网络雾霾天气交通标志识别(带面板)【含Matlab源码 1771期】

    【图像加密】 GUI混沌系统图像加密解密【含Matlab源码 147期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    stm32八路灰度循迹小车

    STM32F103

    Excel模板Github上10个值得学习的Springboot开发项目.pdf

    Spring Boot 是一个开源的 Java 框架,用于简化 Spring 应用程序的初始搭建以及开发过程。它提供了许多默认配置,使得开发者能够更快速地构建应用。以下是一些 Spring Boot 的开发案例,这些案例展示了如何使用 Spring Boot 来构建不同类型的应用程序。 Web 应用程序: 博客系统:可以使用 Spring Boot 创建一个简单的博客系统,包括用户注册、登录、发布文章、评论等功能。利用 Spring Boot 的自动配置特性,可以快速搭建起一个 Web 服务器,并通过 Spring MVC 实现 RESTful API。 在线商店:Spring Boot 可以用来构建电商网站,包括商品展示、购物车、订单处理、支付集成等功能。

    node-v0.9.6-x64.msi

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    从交易模式看游戏陪玩平台的运行逻辑(一).docx

    从交易模式看游戏陪玩平台的运行逻辑(一).docx

    产品属性检验记录表(注塑).xls

    产品属性检验记录表(注塑).xls

    【车牌识别】 GUI模板匹配车牌识别门禁系统(带面板)【含Matlab源码 1091期】.zip

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    基于SpringBoot+Maven的校园二手交易网站

    项目背景: 校园二手交易网站旨在为学生提供一个便捷、安全的二手物品交易平台,促进资源循环利用,减轻学生经济负担。通过SpringBoot和Maven技术栈,构建一个高效、易维护的二手交易网站。 项目目标: 搭建一个功能齐全的二手交易平台,方便学生发布和浏览二手商品信息。 提供安全的用户认证和交易保护机制,确保交易的可靠性和安全性。 实现简洁美观的用户界面,提升用户体验。 主要功能: 用户管理:支持用户注册、登录、信息修改和账户管理。 商品发布与管理:用户可以发布、编辑、删除自己的二手商品信息,并查看其他用户发布的商品。 商品搜索与分类:支持按关键词、类别和价格范围等条件搜索商品,方便用户快速找到所需物品。 消息通知:提供买卖双方的消息通知和交流功能,促进交易沟通。 交易记录:记录用户的交易历史,方便用户查看和管理交易信息。 技术实现: 后端开发:使用SpringBoot框架构建后端服务,处理用户认证、商品管理和交易记录等功能。 前端开发:使用Thymeleaf模板引擎和Bootstrap框架开发用户界面,实现响应式设计和良好的用户体验。 数据持久化:使用MySQL数据库存储用

    labelme, 一个用于图像标记的工具

    使用python3以上版本

Global site tag (gtag.js) - Google Analytics