1.源码

<script setup>
import {reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
const  router = useRouter();
let styleclass = ref({
  "margin-top": "5px",
  "color":"#666666"

})
let styleclass1 = ref({
  "margin-top": "5px",
  "color":"red"

})


let itemck = (item, index) => {
     for(let i=0;i< itemtab.length;i++){
       itemtab[i].active=false;
     }
      item.active=true;
     if(item.routerpath!=""){
    router.replace(item.routerpath)
     }
  document.title = item.text
}
const  getimg=(name)=>{//此方法必须有，传递图片地址
  return new URL(`/src/assets/${name}`, import.meta.url).href
}
let itemtab = reactive([{
  unurl: getimg("uhome.png"),//未选中图片地址
  url:getimg("home.png")//选中图片地址
  ,
  text: "首页",//单项模块名
  active: true,//是否为选中状态
  badage:10,//角标
  routerpath:"/home"
}, {
  unurl: getimg("utxl.png"),
  url:getimg("txl.png")
  ,
  text: "通讯录",
  active: false,
  badage:0,
  routerpath:"/txl"
}, {
  unurl: getimg("uhd.png"),
  url:getimg("hd.png"),
  text: "互动",
  active: false,
  badage:0,
  routerpath:"/hd"

}, {
  url: getimg("my.png"),
  unurl:getimg("unmy.png")
  ,
  text: "我的",
  active: false,
  badage:0,
  routerpath:"/my"

}
]);


</script>

<template>
  <div class="posi">
    <div class="view"></div>
    <div class="posi_content">

      <div class="item" v-for="(item,index) in itemtab" :key="index" @click="itemck(item,index)">
        <div class="badgenum"  v-show="item.badage==0?false:true">{{item.badage}}</div>
        <img class="imgitem" :src="item.active?item.url:item.unurl"/>
        <div  :style="item.active?styleclass1:styleclass">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.imgitem {
  height: 30px;
  width: 30px;
}

.posi {
  background: #ffffff;
  z-index: 9999;
  width: 100vw;
  height: 80px;
  position: fixed;
  bottom: 0;
}

.posi_content {
  display: flex;
  flex-direction: row;

}

.item {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #666666;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.view {
  height: 1px;
  width: 100vh;
  background: pink;
  position: absolute;
  top: 0;
}
.badgenum {
  font-size: 13px;
  text-align: center;
  min-width: 25px;
  line-height: 20px;
  color: #ffffff;
  background: red;
  border-radius:  50% ;
  position: absolute;
  right: 20px;
  top:0
}
.nonebage{
  display: none;
}
</style>

2.调用

<script setup>
import tabbar from "./tabbar.vue"
</script>
<template>
   <tabbar></tabbar>
</template>