美文网首页
vue 实现选项卡

vue 实现选项卡

作者: 伟笑_552f | 来源:发表于2020-05-19 17:57 被阅读0次

html 部分：

<div>
　　　<!-- 卡片按钮 -->
        <div>
          <ul>
            <li
              v-for="(item,index) in list"
              :key="item.index"
              :class="{active:num==index}"
              @click="getNum(index)"
            >{{item}}</li>
          </ul>
        </div>
  　　　　<!-- 卡片内容 -->
        <div class="tabCon">
          <!-- 遥感 -->
          <div v-show="num==0">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">监测机构:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">张店区站点1</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">点位编号:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">THUEF1542121311</div>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">车道号:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">33</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">通过时间:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">2017-12-25 13:35:30</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <div class="grid-content bg-purple">速度:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">20.11:30</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">判定结果:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">不合格</div>
              </el-col>
            </el-row>
          </div>
          <!-- 年检 -->
          <div v-show="num==1">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">监测站:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">张店区站点1</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">点位编号:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">THUEF1542121311</div>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">检测方法:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">稳态工况法</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">检测时间:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">2017-12-25 13:35:30</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <div class="grid-content bg-purple">是否初检:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">是</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">判定结果:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">不合格</div>
              </el-col>
            </el-row>
          </div>
          <!-- 路检 -->
          <div v-show="num==2">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">监测机构:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">郑州环保局</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">检测编号:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">T542121311</div>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">车牌号码:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">冀B6XXXXX</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">车牌类型:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">轻型汽油车</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <div class="grid-content bg-purple">检测时间:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">2019、223、</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">检测结果:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">不合格</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">是否处罚:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">是</div>
              </el-col>
            </el-row>
          </div>
          <!-- IM站治理 -->
          <div v-show="num==3">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">治理原因:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">尾气超标</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">治理站名称:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">郑州祥和汽车维修公司</div>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">维修内容:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">OBD清洗</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">维修时间:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">2017-12-25 13:35:30</div>
              </el-col>
            </el-row>
          </div>
          <!-- 预警处罚清单 -->
          <div v-show="num==4">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">预警时间:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">2019-12-25 15：30：35</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">预警地点:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">郑州市和平大道</div>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple">预警内容:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">氮氧化合物超标</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">处理结果:</div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">已处理</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

js部分：

export default {
  data() {
    return {
      num: 0, //默认显示第一个
      list: ["遥感", "年检", "路检", "IM站治理", "预警处罚清单"],
    };
  },
  methods: {
    getNum(index) {
      console.log(index);
      this.num = index;
    }
  }
};

还有一种情况是点击选项卡直接切换路由，通过路由导航直接改变页面。

注意路由变化 
<template>
  <div class="pageIndex">
    <!-- tab切换栏 -->
    <div class="tabs">
      <span :class="['tab', currentTab == 1 ? 'active' : '']" @click="turnPage(1)">遥感监测点位</span>
      <span :class="['tab', 'tab1', currentTab == 2 ? 'active' : '']" @click="turnPage(2)">机动车排放检验机构</span>
      <span :class="['tab', 'tab1', currentTab == 3 ? 'active' : '']" @click="turnPage(3)">柴油货车OBD远程监控</span>
      <span :class="['tab', 'tab1', currentTab == 4 ? 'active' : '']" @click="turnPage(4)">抽检抽查分析</span>
    </div>

    <router-view />
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentTab: 1,
      showProper: true
    }
  },
  methods: {
    turnPage(v) {
      if(v === 4) return
      this.currentTab = v
      this.$router.push('/index/page' + v)
    }
  }
}
</script>

<style lang="less">
.pageIndex {
  height: 100%;
  width: 100%;
  position: relative;
  .tabs{
    font-size: 14px;
    position: absolute;
    z-index: 121;
    left: 56px;
    top: 32px;
    display: flex;
    .tab{
      display: flex;
      justify-content: center;
      align-items: center;
      // width: 167px;
      // height: 32px;
      padding: 9px 12px;
      min-width: 167px;
      color: #DBDBDB;
      background: #FFFFFF;
      border: 1px solid #DBDBDB;
      box-sizing: border-box;
      cursor: pointer;
      &.tab1{
        border-left: none;
      }
      &.active{
        border: 1px solid #1890FF;
        color: #FFFFFF;
        background: #1890FF;
      }
    }
  }
}
</style>

相关文章

  • vue饿了么移动端app总结第一篇

    使用的是vue-cli 2.x脚手架 一、头部组件的实现 二、使用vue-router实现选项卡 项目的地址： 一...

  • vue 实现选项卡

    html 部分： js部分： 还有一种情况是点击选项卡直接切换路由，通过路由导航直接改变页面。

  • 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果，选项卡个数为3个，点击选项卡或滑动...

  • Vue实现选项卡效果

    效果图：点击上方选项卡实现下方数字切换效果 body部分： js部分： style部分：

  • Vue实现选项卡效果

    body部分： {{item.tab}} {{item.title}} js部分： new Vue({el:...

  • vue实现选项卡效果

    html: js: css: 查看原文请点击

  • Vue实现选项卡效果

    效果图：点击上方选项卡实现下方数字切换效果 body部分： {{item.tab}} {{item.title...

  • vue实现tab选项卡

    效果图: 应用场景: 不同注册和登录方式切换 操作选项切换 如保存和取消 后台管理系统中各菜单选项切换等 新闻标题...

  • v-for列表渲染

    vue中对json数据格式的渲染，实现选项卡的功能 利用v-for列表渲染 HTML结构部分 script部分 v...

  • 2018-09-16

    1.vue的购物车效果 2. vue做的选项卡 3.vue做的邮箱

网友评论

      本文标题：vue 实现选项卡

      本文链接：https://www.haomeiwen.com/subject/ictiohtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|vue 实现选项卡|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！