【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>
相关推荐
hj5914_前端新手16 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku16 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu16 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu16 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu16 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu16 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu16 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
LuckySusu17 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
云枫晖17 小时前
手写Promise-构造函数
前端·javascript
王王碎冰冰17 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js