当前位置：首页 >UI设计 >Element-ui实现多标签页

Element-ui实现多标签页

发布时间：2024-04-08 12:28:50 浏览量：227次

实现类似于浏览器打开多个网页的效果，可同时查看网站的多个页面。

1.添加tabs标签页

其中<p v-html=item.content></p>是为了防止Html转义，使其能够在页签中显示网页而不是字符串。

<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
  <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
  >
    <p v-html=item.content></p>



  </el-tab-pane>
</el-tabs>

2.data中添加默认页面，这样不至于打开网站之后是空白。

editableTabsValue: '1',

editableTabs: [
  {
  title: '员工管理',
  name: '1',
  content: "<iframe ref='1' width='100%' height='850px' src='page/member/list.html'></iframe>"
  }

],
tabIndex: 1

3.methods中添加js脚本，用来关闭和添加页签

关闭页签

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

导航中的单击事件中添加页签，如果已添加则无需添加直接打开

//动态添加标签页
//首先判断是否已经打开
let tabs = this.editableTabs;
let findActive = 0
tabs.forEach((tab, index) => {
  if (tab.name == item.id) {
    this.editableTabsValue = item.id
    findActive = 1
  }
});
if (findActive == 0)
{
  this.editableTabs.push({
    title: item.name,
    name: item.id,
    content: "<iframe ref=" + item.id + " width='100%' height='850px' " + " src=" + item.url + "></iframe>"
  });
  this.editableTabsValue = item.id;
}
//////

导航的html如下

<el-scrollbar wrap-class="scrollbar-wrapper">
  <el-menu
          :default-active="defAct"
          :unique-opened="false"
          :collapse-transition="false"
          background-color="#343744"
          text-color="#bfcbd9"
          active-text-color="#f4f4f5"
  >
    <div v-for="item in menuList" :key="item.id">
      <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
        <template slot="title">
          <i class="iconfont" :class="item.icon"></i>
          <span slot="title">{{item.name}}</span>
        </template>
        <el-menu-item
                v-for="sub in item.children"
                :index="sub.id"
                :key="sub.id"
                @click="menuHandle(sub,false)"
        >
          <i class="iconfont" :class="sub.icon"></i>
          <span slot="title">{{sub.name}}</span>
        </el-menu-item
        >
      </el-submenu>
      <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
        <i class="iconfont" :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>


    </div>
  </el-menu>
</el-scrollbar>

上一篇北师大未来设计学院在第六届中国教博会发布五项PBL大挑战项目

下一篇闹钟app的UI界面设计

热门课程推荐

热门资讯

1. iPhone6的UI设计尺寸规范，原来如此重要！

想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
2. 12个绝佳的UI设计网站，助力你的创作之旅!

将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？

通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
4. 10个免费学习UI设计的网站提升你的设计能力

怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
5. 移动端列表页和表单页设计秘诀:让你的APP点击率翻倍

在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
6. 推荐10本适合UI设计师看的书籍，轻松掌握技能!

对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
7. 零基础学UI设计要多久？培训完能拿多少工资？

探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
8. 物联网APP UI设计:创造智能硬件领域的沉浸式体验

ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
9. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？

想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用

摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...

Element-ui实现多标签页

请绑定手机号