【Element UI】解决 el-dialog 弹框组件设置 custom-class 样式不生效问题

文章目录

问题描述

html 复制代码
<template>
	<el-dialog class="myDialog" v-model="show" title="弹窗" custom-class="customDialog">
		<div>弹窗内容</div>
	</el-dialog>
</template>
<script>
	// 省略。。。。
</script>
<style lang="less" scoped>
/* 此次设置弹窗高度并不生效 */
.customDialog> .el-dialog__body {
  height: 85vh;
}
</style>

解决方法

  • 去除scoped标识
html 复制代码
<template>
	<el-dialog class="myDialog" v-model="show" title="弹窗" custom-class="customDialog">
		<div>弹窗内容</div>
	</el-dialog>
</template>
<script>
	// 省略。。。。
</script>
<style lang="less" scoped>
/* 此次设置弹窗高度并不生效 */
.customDialog> .el-dialog__body {
  height: 85vh;
}
</style>
<style lang="less">
/* 正常生效 */
.customDialog> .el-dialog__body {
  height: 85vh;
}
</style>
相关推荐
GanGuaGua几秒前
Vue3常用指令
前端·javascript·vue.js
欧阳天风1 分钟前
录音实时上传
前端·javascript
源码云商22 分钟前
基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
vue.js·spring boot·后端
致博软件F2BPM30 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说9 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409199 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding9 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js