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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
更正确的asp冒泡排序
May 24 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
javascript fullscreen全屏实现代码
Apr 09 Javascript
Javascript 继承机制实例
Aug 12 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
JS返回顶部实例代码
Aug 09 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 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和XSL stylesheets转换XML文档
2006/10/09 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
js自带函数备忘 数组
2006/12/29 Javascript
List Installed Software Features
2007/06/11 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
银行实习生的自我评价
2014/01/13 职场文书
初中英语教学反思
2014/01/25 职场文书
医务人员自我评价
2014/01/26 职场文书
新教师岗前培训方案
2014/06/05 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android