Element UI of [javascript] vuejs and iframe to realize page Jump

Generally, the background interface has three parts: top navigation, left navigation and right main interface. Click the left and top navigation to display different interfaces in the right main interface

Most of the back-end interfaces are nested in iframe, which can be easily used based on vue

 

The html part is as follows:

It is mainly to bind a variable to iframe and a click event to the left navigation, which are all the uses in vuejs

<div id="app">
    <template>
        <el-menu 
            class="hg-header"
            default-active="2"
            mode="horizontal" 
            >
            <el-menu-item index="1" class="mainLogo">Haiguang media</el-menu-item>
            <el-menu-item index="2">Public opinion monitoring</el-menu-item>
            <el-menu-item index="3">Media database</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>sign out</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>yalaya</span>
            </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', 'Microblog monitoring')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">Microblog monitoring</span>
                    </el-menu-item>
                    <el-menu-item index="3" v-on:click="openUrl('index.php?r=media/toutiaolist', 'Headline monitoring')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">Headline monitoring</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>

You can use the v-on instruction to listen for DOM events and run some JavaScript code when triggered. v-on:click = "" to bind a click event and call a method. v-bind:src is to bind variables to properties. Properties must be written as follows
Methods are written in the methods block

This. Iframeurl = url + "& time =" + new date(). Gettime(); it can prevent the interface from changing without refreshing when the url is not changed

 

The js part is as follows:

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Import component library -->
    <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>

Tags: PHP Vue npm Database

Posted on Wed, 13 May 2020 09:58:05 -0700 by ljzxtww