vue元件開發之tab切換元件使用詳解
阿新 • • 發佈:2020-08-24
本文例項為大家分享了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元件學習教程進行學習。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。