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 自定义事件初探
Aug 21 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
第一篇初识bootstrap
Jun 21 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
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
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP实现的日历功能示例
2018/09/01 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
js DOM模型操作
2009/12/28 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
使用yeoman构建angular应用的方法
2017/08/14 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python生成带有表格的图片实例
2019/02/03 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Python ORM编程基础示例
2020/02/02 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
展会邀请函范文
2014/01/26 职场文书
倡议书的写法
2014/08/30 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
vue动态绑定style样式
2022/04/20 Vue.js
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python