[javascript] vuejs的elementui配合iframe实现页面跳转

2021-01-23 21:16

阅读：568

标签：efault 退出 back def mod asi ade new 刷新

一般后台界面都有三大部分 , 顶部导航 , 左侧导航,右侧的主界面 . 点击左侧和顶部的导航 , 可以在右侧的主界面展示不同的界面

大部分后台的界面都是使用的iframe嵌套的形式,基于vue也是可以方便的使用iframe的

html部分如下:

主要就是给iframe绑定一个变量 , 给左侧导航绑定点击事件 ,都是vuejs里面的用法

div id="app">
    template>
        el-menu 
            class="hg-header"
            default-active="2"
            mode="horizontal" 
            >
            el-menu-item index="1" class="mainLogo">海广传媒el-menu-item>
            el-menu-item index="2">舆情监控el-menu-item>
            el-menu-item index="3">媒资库el-menu-item>
            el-header style="text-align: right; font-size: 12px">
                el-dropdown>
                    i class="el-icon-setting" style="margin-right: 15px">i>
                    el-dropdown-menu slot="dropdown">
                        el-dropdown-item>退出el-dropdown-item>
                    el-dropdown-menu>
                el-dropdown>
                span>yalayaspan>
            el-header>
        el-menu>

        el-container>
            el-aside width="200px">
                el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    >
                    el-menu-item index="1" v-on:click="openUrl(‘index.php?r=media/weibolist‘, ‘微博监控‘)">
                        i class="el-icon-menu">i>
                        span slot="title">微博监控span>
                    el-menu-item>
                    el-menu-item index="3" v-on:click="openUrl(‘index.php?r=media/toutiaolist‘, ‘头条监控‘)">
                        i class="el-icon-menu">i>
                        span slot="title">头条监控span>
                    el-menu-item>
                el-menu>
            el-aside>



            el-main class="mainMain">
                iframe id="mainIframe" class="mainIframe"  v-bind:src="iframeUrl" frameborder="0">iframe>
            el-main>
        el-container>
    template>            
div>

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on:click=""绑定点击事件并且调用一个方法 , v-bind:src 是给属性绑定变量 , 属性的必须这么写
方法都是写在methods块里

this.iframeUrl=url+"&time="+new Date().getTime(); 可以防止url没有变化的时候 , 界面不变化不刷新

js部分如下:

   script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    
    script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js">script>
    script>
        new Vue({
            el: ‘#app‘,
            data: function () {
                return {
                    iframeUrl: "index.php?r=media/weibolist",
                }
            },
            methods: {
                openUrl: function (url,msg) {
                    this.iframeUrl=url+"&time="+new Date().getTime();
                },
            }
        });

    script>

[javascript] vuejs的elementui配合iframe实现页面跳转

标签：efault 退出 back def mod asi ade new 刷新

原文地址：https://www.cnblogs.com/taoshihan/p/12881343.html

上一篇：Spring的依赖注入

下一篇：1、python基础语法

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：[javascript] vuejs的elementui配合iframe实现页面跳转
文章链接：http://soscw.com/index.php/essay/46040.html

亲，登录后才可以留言！

[javascript] vuejs的elementui配合iframe实现页面跳转

评论

热门文章

推荐文章

最新文章

置顶文章