精华内容
下载资源
问答
  • 本篇文章主要介绍了详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli),具有一定的参考价值,有需要的可以了解下
  • vue项目中一个模板组件,不同iframe的src地址,对应不同的路由,不同标签页,且切换标签页不重载。这种客户的要求是特例在网上没有,所以纯自行手码。由于项目在vuex保存了标签页,所以初次进入该组件时,调用了一次...
  • 主要介绍了vue.js实现标签页切换效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue_01之实现Element标签页动态切换

    千次阅读 2018-12-19 12:00:41
    Vue_01之实现Element标签页动态切换1 使用场景2 需要知识3 演示 1 使用场景 在Vue项目中使用Element标签页,并且在一个标签页中点击文字或者按钮实现跳转到其他标签页中 父组件与子组件嵌套,在子组件中点击,在父...

    1 使用场景

    • 在Vue项目中使用Element标签页,并且在一个标签页中点击文字或者按钮实现跳转到其他标签页中
    • 父组件与子组件嵌套,在子组件中点击,在父组件中实现跳转.
    • 子组件向父组件传递数据,并且将数据传递到其他子组件,并且重新刷新这个被传递数据的子组件.

    2 需要知识

    • 需要知道Vue的父组件与子组件之间的消息传递,主要是子组件向父组件传递数据.
    • 会使用Element标签页
    • Vue的基础知识

    3 演示

    3.1 单组件标签页的跳转

    <template>
        <el-container>
            <el-tabs v-model="activeName">
            <el-tab-pane  label="用户管理" name="first">
              <h1>用户管理界面</h1>
              <el-button type="primary" @click="switchTab">角色管理</el-button>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">
              <h1>配置管理</h1>
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="third">
              <h1>角色管理</h1>
            </el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">
              <h1>定时任务补偿</h1>
            </el-tab-pane>
            </el-tabs>
        </el-container>
    </template>
    
    <script>
        export default {
          data() {
            return {
              activeName : 'first'
            }
          },
          methods: {
            switchTab() {
              // 这里写你要跳转的标签页的name
              this.activeName = "third"
            }
          }
        }
    </script>
    
    <style>
    
    </style>
    

    3.1 父组件和子组件联动

    在这里插入图片描述

    • 标签页在父组件中

    • 标签页中包含子组件

    • 某一个的标签页(用户管理)中的子组件向父组件传递数据

    • 父组件接收到该数据并把数据传递到另一个标签页中的子组件中

    • 刷新该标签页的子组件,跳转到该标签页.

    • 父组件

    <template>
      <el-container class="container_home">
        <el-tabs v-model="activeName">
          <el-tab-pane  label="用户管理" name="first">
            <h1>用户管理界面</h1>
            <!-- 监听方法-->
            <tabs v-on:listenToChildEvent="switchTab"></tabs>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">
            <h1>配置管理</h1>
          </el-tab-pane>
          <el-tab-pane label="角色管理" name="third">
            <h1>角色管理</h1>
            <tabs :data="data"></tabs>
          </el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">
            <h1>定时任务补偿</h1>
          </el-tab-pane>
        </el-tabs>
      </el-container>
    </template>
    
    <script>
    import tabs from '../module/tabs'
        export default {
          components: {
            tabs
          },
          data() {
            return {
              activeName : 'first',
              // 销毁,渲染子组件
              reset: false,
              // 子组件传递的数据
              data: ''
            }
          },
          methods: {
            switchTab(data) {
              // 这里写你要跳转的标签页的name
              this.activeName = "third"
              this.data = data;
              this.$alert(data)
              //this.resetZuJian()
            },
            resetZuJian() {
              this.reset = false // 销毁组件
              this.$nextTick(() => {
                this.reset = true //重建组件
              })
            }
          }
        }
    </script>
    
    <style>
    </style>
    
    
    • 子组件
    <template>
        <el-container>
          <el-button type="primary" @click="switchTab('返回的数据: 角色ID')">角色管理</el-button>
          <h1>接受的数据: {{data}}</h1>
        </el-container>
    </template>
    
    <script>
        export default {
          // 接受父组件传递的数据
          props: ['data'],
          methods: {
            switchTab(mesg) {
              // 这里把返回的数据写死了,实际数据是动态的
              this.$emit('listenToChildEvent',mesg)
            }
          }
        }
    </script>
    
    <style>
    
    </style>
    
    
    展开全文
  • 但是切换时,Vue路由默认地会重新加载每个路由页面,现在的需求就是想实现保留每个页面的状态,比如输入的文字,不在切换页面时丢失状态。 2. 解决方案 首先将<router-view通过<keep-alive>标签包裹起来,...

    1. 场景

    左侧是导航菜单,点击后可以打开多个页面,通过标签切换已打开的页面。

    但是切换时,Vue路由默认地会重新加载每个路由页面,现在的需求就是想实现保留每个页面的状态,比如输入的文字,不在切换页面时丢失状态。

    2. 解决方案

    首先将<router-view通过<keep-alive>标签包裹起来,注意exclude="Dashboard"属性表示不保留状态的页面组件名称。

         	<keep-alive exclude="Dashboard">
              <router-link :to="item.path" class="tags-li-title">
                {{item.title}}
              </router-link>
            </keep-alive>
    

    其次,需要为想保留状态的页面添加名称,如下该页面名称为AppForm且不是被排除的Dashboard,所以其状态可以保留。

    export default {
      name: 'AppForm',
      data() {
        return {
        }
      }
    }
    

    最后,在我的测试中,如果不为组件添加name名称,则该组件页面状态将无法保留。

    展开全文
  • Vue 实现tabs标签页切换

    千次阅读 2020-03-16 16:55:11
    Vue 实现tabs标签页切换 <template> <div class="aside"> <div class="asideList" :class="{active:number == index}" v-for="(item,index) in list" :...

    Vue 实现tabs标签页的切换

    效果图

    <template>
    	<div class="aside">
            <div
              class="asideList"
              :class="{active:number == index}"
              v-for="(item,index) in list"
              :key="index"
              @click="tabList(index)"
            >
              <div class="asideInfo">
                <img :src="item.icon" alt />
                <span>{{item.name}}</span>
              </div>
            </div>
          </div>
          <div class="content" v-for="(item,index) in listDetail" :key="index" v-show="number == index">
            <div class="field">
              <p class="title">{{item.name}}</p>
              <el-divider></el-divider>
              <div class="detailInfo" v-show="showDetailInfo">
                <img :src="item.imgUrl" alt />
                <div>
                  <p>{{item.textTitle}}</p>
                  <p>{{item.textInfo}}</p>
                </div>
              </div>
           </div>
         </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          list: [
            {
              id: 0,
              name: "条目1",
              icon: "图片地址"
            },
            {
              id: 1,
              name: "条目2",
              icon: "图标地址"
            },
            {
              id: 2,
              name: "条目3",
              icon: "图标地址"
            },
            {
              id: 3,
              name: "条目4",
              icon: "图标地址"
            }
          ],
          listDetail: [
            {
              id: 0,
              name: "条目1",
              imgUrl:"图标地址",
              textTitle: "标题,",
              textInfo: "信息"
            },
            {
              id: 1,
              name: "条目2",
              imgUrl:"图片地址",
              textTitle: "标题",
              textInfo: "信息"
            },
            {
              id: 2,
              name: "条目3",
              imgUrl:"图片地址",
              textTitle: "标题",
              textInfo: "信息"
            },
            {
              id: 3,
              name: "条目4",
              imgUrl:"图片地址",
              textTitle: "标题",
              textInfo: "信息"
            }
          ],
          number: "0",
          }
        },
      methods:{
        tabList(index) {
          this.number = index;
          console.log(this.number);
        },
      }
     }
    
    <style lang="less" scoped>
    .asideList{
    	&.active {
             color: #3482fd;
             background: #f4f8fc;
             border-left: 4px solid #307ffd;
       	}
    }	
    </style>
    
    展开全文
  • pc端项目中为了优化SEO搜索,要求首页和内容的title/keywords/description 保持...标签只有一个,那么只能通过判断切换的路由 2)判断切换路由 需要在main.js全局js中 使用 router.beforeEach,to中可以获得将要...

    pc端项目中为了优化SEO搜索,要求首页和内容页的title/keywords/description 保持不一样
    用vue+webpack搭建的项目

    思路:

    1)由于vue是单页面应用,index.html入口文件< head >标签只有一个,那么只能通过判断切换的路由

    2)判断切换路由 需要在main.js全局js中 使用 router.beforeEach,to中可以获得将要去的组件的路由参数

    3)如果title和meta标签内容是已经定好的,那就在router.js文件中设置需要辨别的参数–》在meta对象里自定义一个变量名 如:content / title,路由切换时直接读取

    4)如果title和meta标签内容是后台配置的,我现在是请求接口获取。 传参是数字
    可以在router.js文件中设置需要辨别的参数–》在meta对象里自定义一个数字变量名 如:index,这里有一个好处是哪些页面的title和meta标签内容是一样的 就可以设置一样的index,同样 路由切换时直接读取

    5)下面就是请求接口,写个函数,该传参的传参,获取到接口的结果后 append给head标签

    总体思路是这样,中间有些细节问题

    1)刚进去的时候没有路由切换 或者切换完路由后刷新了页面 也就相当于没切换
    有两种情况:一是第一次进入,index默认是首页的;二是切换了路由,这个可以在切换路由是记住这个变量
    解决办法是:使用sessionstorage,无论首次还是刷新,只要改变储存的同一个变量

    2)来回切换时 每次都创建一个新标签< meta > 和 < title >,需要销毁上一次的内容

    3)路由里的index相同时 可以不请求,判断 router.beforeEach中to 和 from中参数

    代码如下:

    router.js

    在routes的meta中自定义变量index

    routes: [
        {
          path: '/',
          name: 'Index',
          component: Index,
          meta: {
           index: 1,        // 自定义标识
            keepAlive: true
          }
        },
        {
          path: '/consult/newslist',
          name: 'Newslist',
          component: Newslist,
          meta: {
            index: 2,       // 自定义标识
            keepAlive: true
          }
    
    },
    {
      path: '/consult/details',
      name: 'Details',
      component: Details,
      meta: {
        index: 2,      // 同样的标识
        keepAlive: true
      }
    }]
    

    main.js

    该文件是全局的,最好写在代码块里
    概要:创建meta标签,定义name属性,写好方法
    1)利用本地存储,获取组件index,调用方法
    2)切换router时,获取组件index,调用方法

    {
    
      let head = document.getElementsByTagName('head');        // 创建head标签
      let meta1 = document.createElement('meta');           // 创建meta标签
      let meta2 = document.createElement('meta');
      
      meta1.name = "keywords";                         // 设置name
      meta2.name = "description";
    	
      function getMetaContent(index, h, m1, m2){
        $.ajax({
          type: 'POST',
          url: urlhost+'/news/page',
          data$Type: 'jsonp',
          data: {
            type: index
          },
          success: (res) => {
            let data = JSON.parse(res)
            if(data.status == 0) return;
            let list = data.message[0];
            let key = list.keywords;
            let desc = list.description;
            let title = list.title;
            document.title = title || '设置默认内容';
            m1.content = key || '设置默认内容';
            m2.content = desc || '设置默认内容';
            h[0].appendChild(m1)
            h[0].appendChild(m2)
          }
        })
      }
      
      let cIndex = sessionStorage.currentRouteIndex;                 // 先保存一把
      if(cIndex){
        cIndex = parseInt(cIndex);
        getMetaContent(cIndex, head, meta1, meta2)
      }else{
        getMetaContent(1, head, meta1, meta2)
        sessionStorage.currentRouteIndex = 1                 // 首次 进入
      }
      
      router.beforeEach((to, from, next) =>{
        let i = to.meta.index;
        let j = from.meta.index;
        if(i == j) return                            // 减少请求次数
        
        if(meta1.name == "keywords" || meta2.name == "description"){     // 如果之前有获取过关键字,先清空内容
          meta1.content = '';
          meta2.content = '';
        }
        sessionStorage.setItem('currentRouteIndex', i)       // 保存到浏览器中去
        getMetaContent(i, head, meta1, meta2);
        next()
      })
    }
    
    展开全文
  • 动态组件---标签页动态切换
  • 使用了keep-alive 页面数据将被缓存下来 不会再走vue中的created()方法 而是走vue中的activated()方法 下面直接上源码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&...
  • 下面小编就为大家分享一篇Vue2.0 给Tab标签页和页面切换过渡添加样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue实现nav tabs标签页切换

    千次阅读 2019-03-28 21:16:56
    效果图,支持右键关闭其他关闭全部 ...1.页面组件tagsView.vue、scrollPane.vue <template> <div class="tags-view-container"> <scroll-pane class="tags-view-wrapper" ...
  • Vue.js动态切换组件

    千次阅读 2018-10-13 22:01:47
      在同一个界面区域内,要根据不同的情况展示不同的内容,比如像文件浏览器(windows资源管理器,finder)有列表显示文件夹内的内容和表格显示文件夹的内容,一般通过点击工具栏上的按钮进入切换.   那么像这种需求...
  • Vue img src 动态切换的一个解决方案

    千次阅读 2019-11-06 19:21:05
    Vue img src 动态切换的一个解决方案 在Vue 中,如果img 的src 为动态切换的话, 会出现图片无法加载的情况。 网上已经有了很多讨论,在解决这个问题, 基本上都是大同小异。 这里记录一下自己的解决方案,可能会和...
  • vue.js实现标签页切换

    千次阅读 2018-06-06 17:03:27
    第二个实例是关于标签页切换的,先看一下效果:这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟...
  • 先绑定属性 :before-leave="beforeTagsLeave" 实现事件函数 // 控制标签页切换,未完成指定内容填写不允许切换 beforeTagsLeave (activeName, oldActiveName) { if (oldActiveName === '0' && this.goods.goods_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,268
精华内容 8,107
关键字:

vue的标签页动态切换

vue 订阅