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">
            <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">
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>sign out</el-dropdown-item>

            <el-aside width="200px">
                    <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 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-main class="mainMain">
                <iframe id="mainIframe" class="mainIframe"  v-bind:src="iframeUrl" frameborder="0"></iframe>

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>
        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();


Tags: PHP Vue npm Database

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