一般后台界面都有三大部分,顶部导航,左侧导航,右侧的主界面 . 点击左侧和顶部的导航,可以在右侧的主界面展示不同的界面
大部分后台的界面都是使用的iframe嵌套的形式,基于vue也是可以方便的使用iframe的
html部分如下:
主要就是给iframe绑定一个变量,给左侧导航绑定点击事件,都是vuejs里面的用法
<@H_301_13@div @H_301_13@id@H_301_13@="app"@H_301_13@>@H_301_13@
template@H_301_13@>@H_301_13@
el-menu
@H_301_13@class@H_301_13@="hg-header"@H_301_13@
default-active@H_301_13@="2"@H_301_13@
mode@H_301_13@="horizontal"@H_301_13@
>@H_301_13@
el-menu-item @H_301_13@index@H_301_13@="1"@H_301_13@ class@H_301_13@="mainlogo"@H_301_13@>@H_301_13@海广传媒</@H_301_13@el-menu-item@H_301_13@="2"@H_301_13@>@H_301_13@舆情监控="3"@H_301_13@>@H_301_13@媒资库el-header @H_301_13@style@H_301_13@="text-align: right; font-size: 12px"@H_301_13@>@H_301_13@
el-dropdown@H_301_13@>@H_301_13@
i @H_301_13@="el-icon-setting"@H_301_13@ style@H_301_13@="margin-right: 15px"@H_301_13@></@H_301_13@i@H_301_13@el-dropdown-menu @H_301_13@slot@H_301_13@="dropdown"@H_301_13@>@H_301_13@
el-dropdown-item@H_301_13@>@H_301_13@退出el-dropdown-menu@H_301_13@span@H_301_13@>@H_301_13@yalayael-header@H_301_13@el-menu@H_301_13@>@H_301_13@
el-container@H_301_13@el-aside @H_301_13@width@H_301_13@="200px"@H_301_13@el-menu
@H_301_13@default-active@H_301_13@
class@H_301_13@="el-menu-vertical-demo"@H_301_13@
background-color@H_301_13@="#545c64"@H_301_13@
text-color@H_301_13@="#fff"@H_301_13@
active-text-color@H_301_13@="#ffd04b"@H_301_13@
v-on:click@H_301_13@="openUrl('index.PHP?r=media/weibolist','微博监控')"@H_301_13@="el-icon-menu"@H_301_13@span @H_301_13@="title"@H_301_13@>@H_301_13@微博监控="3"@H_301_13@="openUrl('index.PHP?r=media/toutiaolist','头条监控')"@H_301_13@>@H_301_13@头条监控el-aside@H_301_13@>@H_301_13@
el-main @H_301_13@="mainMain"@H_301_13@iframe @H_301_13@="mainIframe"@H_301_13@ v-bind:src@H_301_13@="iframeUrl"@H_301_13@ frameborder@H_301_13@="0"@H_301_13@iframe@H_301_13@el-main@H_301_13@>@H_301_13@
div@H_301_13@>@H_301_13@
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on:click=""绑定点击事件并且调用一个方法,v-bind:src 是给属性绑定变量,属性的必须这么写
方法都是写在methods块里
this.iframeUrl=url+"&time="+new Date().getTime(); 可以防止url没有变化的时候,界面不变化不刷新
js部分如下:
script @H_301_13@src@H_301_13@="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"@H_301_13@script@H_301_13@<!--@H_301_13@ 引入组件库 @H_301_13@-->@H_301_13@
="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"@H_301_13@>@H_301_13@
new@H_301_13@ Vue({
el: @H_301_13@'@H_301_13@#app@H_301_13@,data: @H_301_13@function@H_301_13@ () {
@H_301_13@return@H_301_13@ {
iframeUrl: @H_301_13@"@H_301_13@index.PHP?r=media/weibolist@H_301_13@301_13@ (url,msg) {
@H_301_13@this@H_301_13@.iframeUrl@H_301_13@=@H_301_13@url@H_301_13@+@H_301_13@&time=@H_301_13@ Date().getTime();
},}@H_301_13@
});
@H_301_13@>@H_301_13@
