Vue3中具名插槽不起作用
之前的写法:<tab-bar-item path="/category"><img slot="item-icon" src="~assets/img/tabbar/category.svg" alt=""><img slot="item-icon-active" src="~assets/img/tabbar/category_active.svg" alt=""&
·
之前的写法:
<tab-bar-item path="/category">
<img slot="item-icon" src="~assets/img/tabbar/category.svg" alt="">
<img slot="item-icon-active" src="~assets/img/tabbar/category_active.svg" alt="">
<div slot="item-text">分类</div>
</tab-bar-item>
现在的写法:
<tab-bar-item path="/home">
<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>
注意:v-slot:名称,没有空格
使用新的具名插槽之后,原来的img样式不能渲染在页面,而在外层的样式能被渲染
解决:在css样式中,在img名字前面加/deep/做样式穿透
.tab-bar-item {
flex: 1;
text-align: center;
height: 49px;
font-size: 14px;
}
.tab-bar-item /deep/img {
width: 24px;
height: 24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 2px;
}
只为了简单记录自己遇到的问题
参考:https://blog.csdn.net/qq_41988113/article/details/124430122
更多推荐
已为社区贡献1条内容
所有评论(0)