基于 vue封装的 tabbar 组件
Posted xingxingzi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于 vue封装的 tabbar 组件相关的知识,希望对你有一定的参考价值。
一,不确定有几个tabbar ,可能有三个,可能有四个,或者更多...
二,图片,文字点击高亮
三,跳转页面
四, 配置路由
虽然这个功能很多ui框架都有,但是封装也是一个学习的过程。
界面效果
父组件
<template> <div id="app"> <router-view></router-view> <tab></tab> </div> </template> <script> import Tab from "./components/Tab"; export default { name: "App", components: { Tab, }, data() { return {}; }, methods: {}, }; </script> <style lang="less"> // #115FFB #909090 @import "./assets/css/common.css"; </style>
子组件我用了三层,一层嵌套一层,耐心看哟,最主要学习插槽,父子组件传值
第一个子组件 (定义放置tabbar的大容器)
<template> <div class="tabbar"> <slot></slot> </div> </template> <script> export default { name: "TabBar", }; </script> <style lang="less"> .tabbar { position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; width: 100%; height: 45px; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; } </style>
第二个子组件(tabbar 中的图片,文字的动态显示)
<template> <!-- 这里就相当于 每一个 --> <div class="tabbar-item" @click="getPath"> <!-- 未选中图片 --> <div class="tabbar_icon" v-show="!isShow"> <slot name="icon"> </slot> </div> <!-- 选中图片 --> <div class="tabbar_icon_active" v-show="isShow"> <slot name="iconactive"></slot> </div> <!-- 文字 --> <div class="tabbar_title" :style="active"> <slot name="title"></slot> </div> </div> </template> <script> export default { name: "TabBarItem", // 父向子传 props: { // 跳转路径 path: { type: String, }, // 高亮文字颜色 activecolor: { tyep: String, }, }, // 计算属性 computed: { // 如果要检索的字符串值没有出现,则该方法返回 -1。 不等于-1表示出现 isShow() { return this.$route.path.indexOf(this.path) != -1; }, active() { return this.isShow ? { color: this.activecolor } : ""; }, }, methods: { getPath() { this.$router.push(this.path); // 跳转页面 //console.log(this.path); 父向子传值 //console.log(this.$route.path); vue 获取路径 }, }, }; </script> <style lang="less"> .tabbar-item { flex: 1; height: 100%; } .tabbar_title { font-size: 14px; color: #909090; } </style>
第三个子组件(组合tabbar,可以任意放置三个,四个,或更多)
<template> <div class="tab"> <tab-bar> <tab-bar-item path="/home" activecolor="#115FFB"> <img slot="icon" src="../assets/img/home.png" /> <img slot="iconactive" src="../assets/img/home_active.png" /> <span slot="title"> 首页 </span> </tab-bar-item> <tab-bar-item path="/subject" activecolor="#115FFB"> <img slot="icon" src="../assets/img/subject.png" /> <img slot="iconactive" src="../assets/img/subject_active.png" /> <span slot="title"> 视频 </span> </tab-bar-item> <tab-bar-item path="/profile" activecolor="#115FFB"> <img slot="icon" src="../assets/img/profile.png" /> <img slot="iconactive" src="../assets/img/profile_active.png" /> <span slot="title"> 我 </span> </tab-bar-item> </tab-bar> </div> </template> <script> import TabBar from "../components/TabBar"; import TabBarItem from "../components/TabBarItem"; export default { name: "Tab", components: { TabBar, TabBarItem, }, data() { return {}; }, created() {}, methods: {}, }; </script> <style lang="less"></style>
配置router
const routes = [ { path: "/home", name: "home", component: home, }, { path: "/subject", name: "subject", component: () => import("../views/subject.vue"), }, { path: "/profile", name: "profile", component: () => import("../views/profile.vue"), }, ];
以上是关于基于 vue封装的 tabbar 组件的主要内容,如果未能解决你的问题,请参考以下文章
VSCode自定义代码片段14——Vue的axios网络请求封装
VSCode自定义代码片段14——Vue的axios网络请求封装