vue如何给插槽slot设置样式?
vue如何给插槽slot设置样式?slot是vue的使用中非常重要的一个标签,但是对于这样的标签也有些许问题,如果我们想直接对slot进行样式的编写呢?给slot添加一个id或者class?,不管是静态的class还是动态绑定的class,在实例使用插槽的时候,会直接替换掉<template><div id='text'><slot :class="{active:
·
vue如何给插槽slot设置样式?
slot是vue的使用中非常重要的一个标签,但是对于这样的标签也有些许问题,如果我们想直接对slot进行样式的编写呢?给slot添加一个id或者class?,不管是静态的class还是动态绑定的class,在实例使用插槽的时候,会直接替换掉
<template>
<div id='text'>
<slot :class="{active: isActive}" name="item-text"></slot>
</div>
</template>
...components假设为'TabBarItem'
如果这样使用插槽
<tab-bar-item>
<div id='text2'></div>
</tab-bar-item>
这里的text2块会直接替换整个slot,最后浏览器编译成
<div id='text'>
<div id='text2'></div>
</div>
所以你的class没了?
例子
假设更改前源代码如下
<template>
<div class="tab-bar-item">
<slot v-if name="item-icon" ></slot>
<slot v-else name="item-icon-active" ></slot>
<slot :class={avtive:isActive} name="item-text"></slot>
</div>
</template>
<script>
export default {
name: "TabBarItem",
data(){
return {
isActive: false
}
}
}
</script>
这样无法更改slot中class为active,name为item-text的插槽样式,因为直接被覆盖了,那么如何改呢?
<template>
<div class="tab-bar-item">
<div v-if="!isActive">
<slot name="item-icon" ></slot>
</div>
<div v-else>
<slot name="item-icon-active" ></slot>
</div>
<div :class="{active:isActive}">
<slot name="item-text"></slot>
</div>
</div>
</template>
在每个slot外面再包一层div即可,将有关属性全部放在外层的div中,而不是slot中,这样就可以保证在替换slot时,不会换掉原有的属性,同时也可以在div中设置class和id,然后设置对应的页面布局
更多推荐
所有评论(0)