【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>
相关推荐
Y42584 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
fruge5 小时前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
etsuyou7 小时前
js前端this指向规则
开发语言·前端·javascript
不想上班只想要钱8 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
岁月宁静9 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
JS.Huang11 小时前
【JavaScript】原生函数
开发语言·javascript·ecmascript
533_12 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
专注VB编程开发20年12 小时前
B.NET编写不阻塞UI线程的同步延时
ui·.net·vb.net·doevents
ftpeak12 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
一个很帅的帅哥13 小时前
JavaScript事件循环
开发语言·前端·javascript