Vue封装一个Tabbar组件 带组件路由跳转方式

目录

• Vue封装Tabbar组件
• 在App.vue 封装 路由跳转 利用router-view的特性
• 子组件Tabbar
• 然后就是配置的路由
• 从零开始封装一个Tabbar
• 首先底部菜单栏最外层是一个div，
• 代码如下
• 封装完每一个tabbaritem后
• 使用者在使用我们封装的控件时

Vue封装Tabbar组件

话不多说直接上代码

在App.vue 封装 路由跳转 利用router-view的特性

子组件Tabbar

然后就是配置的路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      isShowTabbar:true
    }
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta:{
      isShowTabbar:true
    }
  }
  ,
  {
    path: '/Cart',
    name: 'Cart',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Cart.vue'),
    meta:{
      isShowTabbar:false
    }
  },
  {
    path: '/Mime',
    name: 'Mime',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Mime.vue'),
    meta:{
      isShowTabbar:true
    }
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

最后的效果完成图

代码就直接可以用了

从零开始封装一个Tabbar

首先底部菜单栏最外层是一个div，

在div中整体上存在四个或五个小div，每个div中包含icon和text，如下图

         

对于每一个icon对象，它包含图标以及文字，但十实际中我们肯定不会将img和text写死，以及处于active状态时text的颜色也不会写死，以方便调用者传入想要的参数，这样才算一个彻底的封装。

代码如下

封装完每一个tabbaritem后

接下来是整体的tabbar，试想，我们肯定还是放入一个插槽代码如下： 

tabbar预留的插槽则用于放入每一个item，我们在这里也是不能写死的，因为控件开发者并不知需要放入多少个item。

使用者在使用我们封装的控件时

则可以如下代码，放入内容：

到此结束。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。