vue组件开发之tab切换组件使用详解


Posted in Javascript onAugust 21, 2020

本文实例为大家分享了vue组件开发之tab切换组件的具体使用代码,供大家参考,具体内容如下

vue组件开发之tab切换组件使用详解

代码:

<template>
 <div class="tab-slider">
  <div class="tab">
   <span v-for="(item, index) in items" v-bind:class="{active: actived == index}" @click="toggle(index)">{{item.tab}}</span>
  </div>
  <div class="tab-content">
   <div class="wrapbox clearboth">
    <div class="item" v-for="(item, index) in items">{{item.tabContent}}</div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
  name: 'tabSlider',
  data (){
   return {
    actived: 0,
    items: [{
     'tab': 'tab1',
     'tabContent': 'content1'
    },{
     'tab': 'tab2',
     'tabContent': 'content2'
    },{
     'tab': 'tab3',
     'tabContent': 'content3'
    },{
     'tab': 'tab4',
     'tabContent': 'content4'
    }]
   }
  },
  methods: {
   //获取图片base64实现预览
   toggle(index){
    this.actived = index;       
    document.querySelector(".tab-content .wrapbox").style.webkitTransform = "translateX(-" + (this.actived * 400) + "px)";

   }

  }
 }
</script>
<style scoped>
 *{margin:0 auto;padding:0;font-family:"微软雅黑";}
 .clearboth::after{
  content:"";
  display:block;
  clear:both;
 }
 .tab-slider{
  height:auto;
  width:400px;
  margin:50px auto;
 }
 .tab-slider .tab{
  display:flex;
  height:40px;
  line-height:40px;
  background:#ccc;
 }
 .tab-slider .tab span{
  display:block;
  width:100%;
  text-align:center;
  cursor:default;
 }
 .tab-slider .tab .active{
  background:red;
 }
 .tab-slider .tab-content{
  height:300px;
  width:400px;
  overflow:hidden;
 }
 .tab-slider .tab-content .item{
  float:left;
  height:300px;
  width:400px;
  line-height:300px;
  text-align:center;
  font-size:60px;
  background:#eee;
 }
 .tab-slider .wrapbox{
  width:2000px;
  transition: all 1s;
 }
</style>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
纯JS实现五子棋游戏
May 28 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
vue组件开发之slider组件使用详解
Aug 21 #Javascript
Vue左滑组件slider使用详解
Aug 21 #Javascript
vue实现移动端触屏拖拽功能
Aug 21 #Javascript
vue实现移动端拖动排序
Aug 21 #Javascript
微信小程序实现聊天室
Aug 21 #Javascript
vue实现折线图 可按时间查询
Aug 21 #Javascript
Vue按时间段查询数据组件使用详解
Aug 21 #Javascript
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP define函数的使用说明
2008/08/27 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python实现批量改文件名称的方法
2015/05/25 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python3实现磁盘空间监控
2018/06/21 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
批评与自我批评材料
2014/02/15 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
交通事故委托书范本
2014/09/28 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
责任书范本大全
2015/05/11 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
三下乡活动心得体会
2016/01/23 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL