vue 自定義元件tabbar
tabbar的封裝 當然方法也很多,懶得寫了直接貼程式碼吧
<template>
<div id="table-bar" class="border-top-1px">
<div class="items" @click='switchTab("Home")'
:class="$route.path.indexOf('Home') !== -1? 'active' : ''">
<div class="icon">
<img v-if="$route.path.indexOf('Home') !== -1"
src="../images/icon_shouye.png" alt='active'/>
<img v-else src="../images/icon_shouye2.png" alt="normal">
</div>
<div class="text">
首頁
</div>
</div>
<div class="items" @click='switchTab("Order")'
:class="$route.path.indexOf('Order') !== -1? 'active' : ''">
<div class="icon">
<img v-if="$route.path.indexOf('Order') !== -1"
src="../images/icon_dingdan.png" alt='active'>
<img v-else src="../images/icon_dingdan2.png" alt="normal">
</div>
<div class="text">
訂單
</div>
</div>
<div class="items" @click='switchTab("Mine")'
:class="$route.path.indexOf('Mine') !== -1? 'active' : ''">
<div class="icon">
<img v-if="$route.path.indexOf('Mine') !== -1"
src="../images/icon_me2.png" alt="active">
<img v-else src="../images/icon_me.png" alt="normal">
</div>
<div class="text">
我的
</div>
</div>
</div>
</template>
<script>
export default {
name: "TableBar",
data(){
return {
}
},
methods: {
switchTab(path) {
this.$router.replace(path)
}
},
mounted() {
},
}
</script>
<style lang='less' scoped>
@import '../styles/mixin.less';
@import '../styles/base.less';
#table-bar{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 0.5rem;
}
.items{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
color: @subtitle-color;
font-size: 0.11rem;
}
.text{
font-size: 0.11rem;
}
.icon{
width: 0.22rem;
height: 0.22rem;
overflow: hidden;
margin-bottom: 0.03rem;
img{
width: 100%;
height: 100%;
}
}
.active{
color: @title-color;
}
</style>
相關文章
- Flutter 自定義 TabBarFluttertabBar
- iOS自定義tabBariOStabBar
- 微信小程式實用小元件:自定義tabbar微信小程式元件tabBar
- vue 自定義報警元件Vue元件
- 微信小程式自定義tabBar微信小程式tabBar
- 微信小程式 自定義tabbar微信小程式tabBar
- vue自定義全域性元件(或自定義外掛)Vue元件
- Vue + Element 自定義上傳封面元件Vue元件
- 自定義react-navigation的TabBarReactNavigationtabBar
- iOS OC-自定義TabBar TabBarViewControlleriOStabBarViewController
- 微信小程式自定義元件實現 tabBar、navBar微信小程式元件tabBar
- 自定義TabBar動畫效果 - 頁面轉場(Swift)tabBar動畫Swift
- 使用vue的v-model自定義 checkbox元件Vue元件
- 微信小程式底部實現自定義動態Tabbar微信小程式tabBar
- 基於uniapp自定義Navbar+Tabbar元件「相容H5+小程式+App端Nvue」APPtabBar元件H5Vue
- vue 自定義指令Vue
- Vue自定義指令Vue
- Vue 置頂元件FixedTopWrap 支援自定義內容置頂Vue元件
- 面向Vue新人:使用Vue自定義指令來完善一個Select元件Vue元件
- 基於Vue.js PC桌面端彈出框元件|vue自定義彈層元件|vue模態框Vue.js元件
- svelte自定義元件|導航條Navbar及選單欄Tabbar元件tabBar
- Android自定義控制元件之自定義組合控制元件Android控制元件
- Android自定義控制元件——自定義屬性Android控制元件
- 使用VUE元件建立SpreadJS自定義單元格(二)Vue元件JS
- 使用VUE元件建立SpreadJS自定義單元格(一)Vue元件JS
- Vue中自定義指令Vue
- vue自定義鍵盤Vue
- vue如何自定義指令?Vue
- vue3.x自定義彈框元件|vue3.0移動端彈窗|vue3全域性元件Vue元件
- 總結Vue第二天:自定義子元件、父子元件通訊、插槽Vue元件
- svelte元件:Svelte3自定義Navbar+Tabbr元件|svelte自定義外掛元件
- Vue3.0實現原生高度可自定義選單元件vue3-menusVue元件
- 4. 自定義控制元件(4) --- 自定義屬性控制元件
- Android自定義控制元件之自定義屬性Android控制元件
- Android 自定義UI元件AndroidUI元件
- Laravel 自定義檢視元件Laravel元件
- 自定義Switch控制元件控制元件
- 自定義控制元件ViewPager控制元件Viewpager