vue开发之路-自定义导航菜单Tabbar
vue开发之路-自定义导航菜单Tabbar 自定义导航菜单实现效果展示 目录结构 代码实现 Item.vue文件内容 Tabbar.vue 文件内容 在App.vue中引入自定义的Tabbar组件 Vue 实现Tabbar底部导航菜单示例代码下载地址 自定义导航菜单实现效果展示 自定义导航菜单实现效果图 目录结构 assets 放置图片素材 components 放置自定义组件 app.vue vue入口文件 代码实现 在 components 组件文件夹下新建 tabbar 文件夹,用来存储自定义的Tabbar组件 在新建的 tabbar 文件夹下新建 Item.vue 和 Tabbar.vue Item.vue文件内容 < template > < div class = "itemWarp flex_mid" @click = 'changePage' > < span v - show = '!change' > < slot name = 'normalImg' > < / slot > < / span > < span v - show = 'change' > < slot name = 'activeImg' > < / slot > < / span > < span v - text = 'txt' > < / span > < / div > < /