精华内容
下载资源
问答
  • let url='/river/monitor/videoController.html?stationId='+obj.data.stationId; if (top.layui.index) { top.layui.index.openTabsPage(url, '云台控制'); } else { window.open(url) }
    let url='/river/monitor/videoController.html?stationId='+obj.data.stationId;
    
    if (top.layui.index) {
        top.layui.index.openTabsPage(url, '云台控制');
    } else {
        window.open(url)
    }
    展开全文
  • Vue头部菜单,点击菜单新增tab页签 <template> <div class="wrapper"> <!-- 页面头部部分 --> <div class="header"> <div class="logo">SpringCloud-Study</div> <!-- ...

    Vue头部菜单,点击菜单新增tab页签

    <template>
    <div class="wrapper">
    <!-- 页面头部部分 -->
        <div class="header">
            <div class="logo">SpringCloud-Study</div>
            <!-- 水平一级菜单 -->
            <div style="float:left;">
                <el-menu  mode="horizontal" class="el-menu-demo" @select="handleSelect" active-text-color="#ffd04b">
                    <template  v-for="item in menus">
                       <el-menu-item v-if="item.children.length ===0" :key="item.menuUrl" :index="item.menuUrl">{{item.menuTitle}}</el-menu-item>
                       <el-submenu v-else-if="item.children.length >0" :key="item.menuUrl" :index="item.menuUrl">
                        <template slot="title">
                           <span>{{item.menuTitle}}</span>
                         </template>
                         <el-menu-item :index = "child.menuUrl" v-for="child in item.children" :key="child.menuUrl">
                           <span>{{child.menuTitle}}</span>
                         </el-menu-item>
                       </el-submenu>
                    </template>
                </el-menu>
            </div>
    
            <div class="header-right">
                <div class="header-user-con">
                    <!-- 用户头像 -->
                    <div class="user-avator"><img src="../../assets/img/img.jpg" /></div>
                    <!-- 用户名下拉菜单 -->
                    <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{ userName }}
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item disabled>修改密码</el-dropdown-item>
                            <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        
    
        <el-main>
            <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
              <el-tab-pane
                  v-for="(item) in editableTabs"
                  :key="item.name"
                  :label="item.title"
                  :name="item.name"
                >
                  {{item.content}}
                </el-tab-pane>
            </el-tabs>
        </el-main>
    
    </div>
    </template>
    
    <script>
    import Cookies from "js-cookie";
    export default {
        data() {
            return {
                menus :[],
                editableTabs: [{
                  title: '首页',
                  name: 'first_tab',
                  content: ''
                }],
                editableTabsValue:'first_tab',
            }
        },
        computed: {
            userName() {
                let userName = Cookies.get("ydy-user");
                return userName ;
            }
        },
        methods:{
            // 切换菜单栏
            handleSelect(key, keyPath) {
               console.log(key);
               this.addTab(key);
            },
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if (command == 'loginOut') {
                    Cookies.remove('ydy-user');
                    Cookies.remove('ydy-token');
                    this.$router.push('/login');
                }
            },
            //查询菜单
            queryUserMenus(){
                let req = {"userName":Cookies.get("ydy-user")};
                this.$api.QueryUserMenus(req).then(res => {
                    this.menus = res.data.data;
                }).catch(err => {
                    this.$commsgbox.alert(err);
                });
            },
    
            addTab(targetName) {
                let isAdd = true;
                this.editableTabs.forEach(function(item,index){
                    if(item.name == targetName){
                        isAdd = false;
                    }
                });
                if(isAdd){
                    this.editableTabs.push({
                      title: targetName,
                      name: targetName,
                      content: targetName
                    });
                }
                this.editableTabsValue = targetName;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                  tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                      let nextTab = tabs[index + 1] || tabs[index - 1];
                      if (nextTab) {
                        activeName = nextTab.name;
                      }
                    }
                  });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
        },
        created() {
            this.queryUserMenus();
        },
    
    }
    </script>
    
    <style scoped>
    .wrapper {
        width: 100%;
        height: 100%;
        background: #f0f0f0;
    }
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        background-color: #FFFFFF;
    }
    .header .logo {
        float: left;
        margin-left: 20px;
        margin-top: 20px;
        height: 29px;
        width: 200px;
        vertical-align: center;
    }
    /* --------------- 用户头像区域的样式 ---------------- */
    .header-right {
        float: right;
        padding-right: 50px;
    }
    .header-user-con {
        display: flex;
        height: 70px;
        align-items: center;
    }
    .user-avator {
        margin-left: 20px;
    }
    .user-avator img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .user-name {
        margin-left: 10px;
    }
    .el-dropdown-link {
        cursor: pointer;
    }
    .el-dropdown-menu__item {
        text-align: center;
    }
    /* --------------- 水平一级菜单栏的样式--------------------- */
    .el-menu.el-menu--horizontal {
        border-bottom: none !important;
        float: left;
        margin-left: 50px;
    }
    .el-menu--horizontal > .el-menu-item.is-active {
        border-bottom: 2px solid #409eff;
        color: #3989fa;
        font-weight: 700;
    }
    .el-menu--horizontal > .el-menu-item {
        font-size: 16px;
        margin: 0 15px;
        color: black;
    }
    
    /**  **/
    .el-main {
    padding : 0 0 0 0 ;
    }
    </style>
    

    查询菜单方法queryUserMenus返回的结果集格式为

    {"code":200,"msg":null,"data":[{"menuId":"1","menuParentId":"0","menuTitle":"系统管理","menuSequence":"0","menuUrl":"/user/system","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":[{"menuId":"2","menuParentId":"1","menuTitle":"用户管理","menuSequence":"1","menuUrl":"/user/user","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":null}]},{"menuId":"3","menuParentId":"0","menuTitle":"角色管理","menuSequence":"2","menuUrl":"/user/role","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":[{"menuId":"4","menuParentId":"3","menuTitle":"权限管理","menuSequence":"3","menuUrl":"/user/persimossion","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":null}]},{"menuId":"5","menuParentId":"0","menuTitle":"菜单管理","menuSequence":"4","menuUrl":"/user/menu","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":[]}]}
    
    展开全文
  • 需要修改的文件 ①src/config/router.config.js 将要调转的页面路径写基础路由constantRouterMap函数中 ②修改src/components/menu/Contextmenu.vue中函数 ③菜单管理中,设置

    需要修改的文件

    ①src/config/router.config.js

    将要调转的页面路径写在基础路由constantRouterMap函数中

     ②修改src/components/menu/Contextmenu.vue中函数

    ③菜单管理中,设置

     

     

    展开全文
  • route/index.js layout/components/SidebarItem.vue

    route/index.js

    layout/components/SidebarItem.vue

    展开全文
  • layui 链接打开新页面
  • 解决办法: 此方法是加入的一级菜单,如果加入二级菜单,就放入相应的children里面
  • <template> <div class="navbar"> <el-tabs v-model="activePage" type="card" closable @...el-tab-pane :key="item.fullPath" v-for="item in pageList" :label="item.meta.title" :name="ite...
  • 问题是:当我登陆之后,打开新的标签页TAB(通常是在登陆的主页面上,有些模块会在列表中加上链接,按下Ctrl和鼠标左键,会打开一个新的TAB页面),那么在新页面中应该能和上一个登陆之后的页面共享登陆状态。...
  • 来自: 帮助 警告:h1请点击按钮 打开一个 窗口/h1a href="javascript:void(0)" class="btn J_new_window" 窗口 打开当前 页面/ascriptfunction ready ... 按 应用崩溃 页面以及崩溃进程聚合分析不同 应用 ...
  • layui列表a链接跳转新tab

    千次阅读 2021-03-17 10:21:29
    //判断是否有这个id的tab页面已经打开,如果没有则新增tab(demo参数为父页面的lay-filter="demo") if(exist == 0){ window.parent.layui.element.tabAdd('demo', { title: id+'完成方案详情', content: '' //支持...
  • 打开新tab页之前的tab页都会重新发起请求 element-ui中的tabs每次点击时都会给所有页面重新渲染。 项目要求是首页和菜单栏是固定的,菜单每点一个多出一个tab页 <el-tabs v-model="activeName" @tab-click=...
  • LayuiAdmin iframe版子页面中a标签lay-href打开Tab页时,左侧菜单没有对应选中的解决方案 废话不多说,直接上代码。 <div class="lay-new-tab" lay-id="home/homepage">主页</div> var $ = jQuery = ...
  • 一、场景二、Tab栏是否打开1、截图2、判断1、判断 [ 商品管理 ] 标签是否打开了2、判断当前标签页是否是 [ 订单管理 ]三、查找Tab栏中的元素1、查找订单数据表格2、查找ID为99的订单行数据3、修改订单ID为99这一行的...
  • //跳转到gis的tab页面 //打开tab if(parent.getTab(url) == 0){ window.parent.layui.element.tabAdd('tab', { title: 'GIS可视化', content: '' //支持传入html , id: url });...
  • vue 实现组件切换tab页不刷新页面
  • 1.需求项目开发中,前端难免遇到需要路由缓存的需求。之前一个React项目中,查询各种资料和插件后,了解到React要配合React-router进行路由缓存,会有很多意想不到的问题。所以React项目中,我们都避免接收到...
  • 一、效果展示效果如下:二、绘制元件1、【中继器1】:命名为“菜单”,将中继器中的矩形命名为“菜单矩形”,矩形大小设置为230*184。备选数据的列:id,menu,url。添加的备选数据如下:2、【中继器2】:命名为“页...
  • 这是一款效果使用jQuery和CSS3制作的倾斜页面打开侧边栏菜单UI界面设计效果。这个效果中,用户点击页面上的汉堡包按钮时,整个页面会向右倾斜一些角度,隐藏左边的侧边栏被显示出来,整体效果非常炫酷。制作方法...
  • 业务情景描述后台界面,点击左侧边栏的菜单的时候,导航栏会出现Tab页面,就像是这样(我以阿里云后台的一个场景截图为示例):第一、我云产品页面中,按照一定时间查询出来之后,会出现查询结果。第二、我点击...
  • 首先说一下左侧菜单栏这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我导入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的:发现,绑定属性的菜单并没有下拉...
  • layuiAdmin打开新窗口、标签页

    千次阅读 2021-04-12 00:52:08
    这里写自定义目录标题前言打开新窗口打开新窗口的代码源码 前言 layuiAdmin.std-v1.2.1 打开新窗口 控件上添加 lay-href 属性。 <a lay-href="xxxx.html" lay-text="账号列表">打开新窗口</a> ...
  • 1、index页面 主要代码 <keep-alive :include="keepAliveList"> <router-view class="avue-view" v-if="keepAlive"/> </keep-alive> provide() { return { index: this, routerRefresh: this...
  • 说明:菜单栏选卡只有触发该菜单按钮的click事件后才会生成 菜单列表选项卡生成代码如下: $('.left-nav #nav li').click(function (event) { //菜单列表的click事件 if($(this).children('.sub-menu').length){...
  • 页面 <component :ref="child"></component> this.$nextTick(() => { this.$refs.child.cleartime(); // 调用清除定时器的方法 }); } //跳转路由均清除定时器 beforeRouteLeave(to, from, ...
  • easyui之菜单导航切换Tab

    千次阅读 2016-11-24 15:47:28
    1, 主页HTML 引包 ...DIV设置north(上,标题)south(下)west(左,菜单)east(右)center(居中,主工作区,Tab选项卡)          首页     2, 主页JS 菜单
  • idea的tab按照打开顺序排列

    千次阅读 2019-11-19 22:16:12
    最近习惯用IDEA开发工具 确实非常方便,效率,但是一直很不习惯他的某些配置 今天就来说下他的tab标签。默认是按照filename名排列,和eclipse的按打开顺序排列非常不同。尝试百度了好多都没找到设置方式。后来...
  • 1、如果你没有动过multitabs.js源码,找到342行、350行、357行即可。 //342行源码: self._fillTabPane($tabPane, navTabParam);原基础上多加参数,改成如下: self._fillTabPane($tabPane, navTabParam, navTab); /...
  • 【项目概要】项目中前台页面用的是EasyUI样式,用户登录后,左侧是导航栏,点击导航栏下的内容,在页面右侧显示的是具体内容。界面如下图所示:【需求说明】目前项目组长已经实现点击左侧导航菜单下的某个选项,界面...
  • 给console.html加上个任意参数,使url不要和默认的iFrame页面url不同即可。
  • //跳转到【工作管理】--人员管理页面 function navigateToTeamPersonModule() { window.parent.layui.element.tabAdd('layuiminiTab', { tabId: "/page/team-person", href: "/page/team-person", title

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,825
精华内容 18,330
关键字:

新的菜单在tab页面打开