vue修改插槽的样式
vue修改插槽的样式方法一:子组件中直接设置颜色子组件<template><div :class="{active:isActived}"><slot name="slot-text"></slot></div></template><style scoped>.active{color: dodgerblue
·
vue修改插槽的样式
方法一:子组件中直接设置颜色
子组件
<template>
<div :class="{active:isActived}">
<slot name="slot-text"></slot>
</div>
</template>
<style scoped>
.active{
color: dodgerblue;
}
</style>
方法二:在父组件App中修改设置颜色
子组件:
<template>
<div :style="activeStyle">
<slot name="slot-text"></slot>
</div>
</template>
<script>
export default {
name: "tab-bar-item",
computed:{
activeStyle(){
return this.isActived?{color:this.activeColor}:{}
}
},
props:{
activeColor:{
type:String,
default:'deepSkyblue'
}
},
}
</script>
<style scoped>
</style>
父组件:active-color=“red”
<TabBarItem path="/home" active-color="red">
.......
</TabBarItem>
注:附上实际案例vue导航跳转案例
更多推荐
已为社区贡献1条内容
所有评论(0)