您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 封装组件 Tabbar

《和小米一起学Vue.js》— 封装组件 Tabbar

[ 孤狼 | 2023-01-09 11:56:59 | Vue | 1058°C | 0条评论 ]

项目中很多时候都需要封装组件来达到复用,其中最常用的封装就是封装tabbar,因为几乎所有的项目都会使用到。


使用 vue ui 新建一个项目 tabbar,在 assets 目录下新建一个 css img 文件夹,分别用来存放项目中的公用css和图片资源。


components 目录下,新建一个 tabbar 目录,用来存放 tabbar 组件。(一般公用的组件都单独存放在 components 目录下)

components/tabbar 目录下新建 TabBar.vue TabBarItem.vue 文件,分别来创建 tabbar 组件和他的子项 tabbaritem 组件。

//TabBarItem.vue

<template>
<!-- 这里给每个选项绑定clickBtn事件 -->
<div class="tabbaritem" @click="clickBtn">
<div class="tabbaritemImg">
<!-- 这里使用插槽来达到动态替换的效果 -->
<slot v-if="isactive" name="itemiconactive"></slot>
<slot v-else name="itemicon"></slot>
</div>
<!-- 这里使用动态绑定class -->
<div class="itemname" :class="{itemnameactive:isactive}">
<slot name="itemname"></slot>
</div>
</div>
</template>

<script>
export default{
name:"TabBarItem",
props:{
//接收参数path(格式为Sting)
path:String
},
computed:{
isactive(){
//仅当前路由的path中含有参数path,返回true,表示当前选中.
return this.$route.path.indexOf(this.path) !== -1?true:false;
}
},
methods:{
//点击每一个选项的时候,使用路由跳转地址.
clickBtn(){
this.$router.push(this.path);
}
}
}
</script>

<style scoped>
.tabbaritem{flex:auto;text-align:center;}
.tabbaritemImg img{width:20px;height:20px;}
.itemname{font-size:14px;}
.itemnameactive{color:blueviolet;}
</style>
//TabBar.vue

<template>
<div class="tab-bar">
<!-- 这里使用插槽来达到动态替换的效果 -->
<slot></slot>
</div>
</template>

<script>
export default {
name:'TabBar'
}
</script>
<style>
.tab-bar{height:49px;width:100%;background:#efefef;position:fixed;bottom:0;display:flex;box-shadow:0px -2px 2px #ddd;}
</style>


然后修改 App.vue 文件来引用两个组件

//App.vue

<template>
<div id="app">
<router-view></router-view>
<tab-bar>
<tab-bar-item path="/main">
<img slot="itemicon" src="./assets/img/news.png" alt="">
<img slot="itemiconactive" src="./assets/img/newsactive.png" alt="">
<div slot="itemname">主页</div>
</tab-bar-item>
<tab-bar-item path="/me">
<img slot="itemicon" src="./assets/img/me.png" alt="">
<img slot="itemiconactive" src="./assets/img/meactive.png" alt="">
<div slot="itemname">我的</div>
</tab-bar-item>
</tab-bar>
</div>
</template>

<script>
import TabBar from "./components/tabbar/TabBar"
import TabBarItem from "./components/tabbar/TabBarItem"

export default {
name:'app',
components:{
//调用的时候可以采用驼峰命名,但在使用的时候,由于html对大小写不明感,需要使用短横方式调用"tab-bar"
TabBar,
TabBarItem
}
}
</script>
<style>
@import "./assets/css/global.css";
</style>


views 目录下,新建 main me 目录,分别用来保存主页和我的页面的文件,并分别新建 mainView.vue meView.vue 文件。

//mainView.vue

<template>
<div>
<h1>这里是主页</h1>
</div>
</template>
//meView.vue

<template>
<div>
<h1>这里是我的</h1>
</div>
</template>


最后配置路由 index.js 文件

//index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//懒加载
const MainView=()=>import('../views/main/mainView')
const MeView=()=>import('../views/me/meView')

const routes = [
{
path:'',
redirect:'/main'
},
{
path:'/main',
component:MainView
},
{
path:'/me',
component:MeView
}
]

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})

export default router




代码下载

下载地址:  密码:q6ys


转载请注明出处:http://gl.paea.cn/n.php?n=206
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索