`
huangyongxing310
  • 浏览: 499771 次
  • 性别: 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>
分享到：
| 开发过程总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics