您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关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项目中如何使用tab切换组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。