标签：show 选中 round java comm 检索 lang Fix 表示
一，不确定有几个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"),
},
];
标签：show 选中 round java comm 检索 lang Fix 表示
原文地址：https://www.cnblogs.com/xingxingzi/p/12809822.html
