今天用vue在写tabbar小组件。
首先有三个文件,tabbar,tabbarItem,mainTabbar
下面附三个文件的源码,
其中tabbar和tabbarItem是模板组件。mainTabbar是调用了这两个组件并向里面的插槽填充了数据
我的意图:
比如tabbarItem里面有个slot,在mainTabbar中使用了这个组件,并且用<img/>控件替换该插槽,我该如何为img标签设置css样式
之前cli2下的设置样式如图所示,但是我现在用的vue-cli3,现在这种设置不管用,不知道该如何设置了
tabbar.vue
<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
<script>
export default {
name: "TabBar",
components:{
}
}
</script>
<style scoped>
#tab-bar{
display: flex;
background-color: #F6F6F6;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 -1px 1px rgba(100,100,100,0.1);
}
</style>
tabbarItem.vue
<template>
<div class="tab-bar-item" @click="itemClick">
<div v-if="!isActive">
<slot name="item-icon">图片</slot>
</div>
<div v-else>
<slot name="item-icon-active">图片</slot>
</div>
<div :style="activeStyle">
<slot name="item-text">文字</slot>
</div>
</div>
</template>
<script>
export default {
name: "TabBarItem",
props:{
path: String,
activeColor:{
type:String,
default: '#cccccc'
}
},
data(){
return {
// isActive:false,
}
},
computed:{
isActive(){
return this.$route.path.indexOf(this.path) !== -1
},
activeStyle(){
return this.isActive?{color:this.activeColor}:{color: '#cccccc'}
}
},
methods:{
itemClick(){
this.$router.replace(this.path).catch(err=>err)
}
}
}
</script>
<style scoped>
.tab-bar-item{
flex: 1;
text-align: center;
height: 49px;
font-size: 14px;
/*border: 1px solid red;*/
}
.tab-bar-item img{
width: 24px;
height: 24px;
vertical-align: middle;
margin-bottom: 2px;
}
</style>
mainTabBar.vue
<template>
<tab-bar>
<tab-bar-item path="/home" activeColor="blue">
<template v-slot:item-icon>
<img src="~assets/img/tabbar/home.svg" alt="">
</template>
<template v-slot:item-icon-active>
<img src="~assets/img/tabbar/home_active.svg" alt="">
</template>
<template v-slot:item-text>
<div>首页</div>
</template>
</tab-bar-item>
<tab-bar-item path="/category" activeColor="red">
<template v-slot:item-icon>
<img src="~assets/img/tabbar/category.svg" alt="">
</template>
<template v-slot:item-icon-active>
<img src="~assets/img/tabbar/category_active.svg" alt="">
</template>
<template v-slot:item-text>
<div>分类</div>
</template>
</tab-bar-item>
<tab-bar-item path="/cart" activeColor="green">
<template v-slot:item-icon>
<img src="~assets/img/tabbar/shopcart.svg" alt="">
</template>
<template v-slot:item-icon-active>
<img src="~assets/img/tabbar/shopcart_active.svg" alt="">
</template>
<template v-slot:item-text>
<div>购物车</div>
</template>
</tab-bar-item>
<tab-bar-item path="/profile" activeColor="deepPink">
<template v-slot:item-icon>
<img src="~assets/img/tabbar/profile.svg" alt="">
</template>
<template v-slot:item-icon-active>
<img src="~assets/img/tabbar/profile_active.svg" alt="">
</template>
<template v-slot:item-text>
<div>我的</div>
</template>
</tab-bar-item>
</tab-bar>
</template>
<script>
import TabBar from "components/common/tabbar/TabBar";
import TabBarItem from "components/common/tabbar/TabBarItem";
export default {
name: "MainTabBar",
components:{
TabBar,
TabBarItem
}
}
</script>
<style scoped>
</style>