ElementPlus组件内使用Vue3插槽 Element样式失效

859 阅读1分钟

最新情况:Element样式似乎与Vue 根组件样有关 正在排查

ElementPlus组件内使用Vue3插槽 导致Element样式失效

插槽都是插入 一个居中宽度24的span

<template>
	<TestSlotElement>
		<el-row justify="center">
			<el-col :span="24"><span class="title">喂喂喂</span></el-col>
		</el-row>
	</TestSlotElement>
	<TestOutSlotElement>
		<el-row justify="center">
			<el-col :span="24"><span class="title">喂喂喂</span></el-col>
		</el-row>
	</TestOutSlotElement>
</template>

TestSlotElement组件:插槽在Element组件里面

<template>
	<el-container>
		<slot />
	</el-container>
</template>

TestOutSlotElement组件:插槽在Element组件外面

<template>
	<el-container> </el-container>
	<slot />
</template>

测试结果:Vue3的slot插槽不要放在ElementPlus组件内部

未知原因,导致span没有居中

image.png

span正常渲染居中

image.png