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 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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
基于PHP常用函数的用法详解
2013/05/10 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
js实现掷骰子小游戏
2019/10/24 Javascript
Python判断两个对象相等的原理
2017/12/12 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python实现分数序列求和
2020/02/25 Python
python3注册全局热键的实现
2020/03/22 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
护士专业推荐信
2013/11/02 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
工地安全标语
2014/06/07 职场文书
大班亲子运动会方案
2014/06/10 职场文书
小学校长汇报材料
2014/08/20 职场文书
创先争优个人总结
2015/03/04 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
婚礼答谢词范文
2015/09/29 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Python语言内置数据类型
2022/02/24 Python
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
Go 内联优化让程序员爱不释手
2022/06/21 Golang