【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>
相关推荐
用户6120414922136 分钟前
使用JSP+Servlet+JavaBean做的课程后台管理系统
java·javascript·mysql
刀一寸9 分钟前
C# WebAPI下Swagger的配置
ui·c#
AnalogElectronic11 分钟前
vue3 实现贪吃蛇手机版01
开发语言·javascript·ecmascript
asdfsdgss12 分钟前
Angular CDK 自适应布局技巧:响应式工具实操手册
前端·javascript·angular.js
爱吃的强哥30 分钟前
Electron_Vue3 自定义系统托盘及退出二次确认
前端·javascript·electron
技术小丁2 小时前
零依赖!教你用原生 JS 把 JSON 数组秒变 CSV 文件
前端·javascript
古一|2 小时前
Vue路由两种模式深度解析+Vue+SpringBoot生产部署全流程(附Nginx配置)
javascript·vue.js·nginx
Crystal3282 小时前
原生 Vue + UniApp 的小程序或 App 项目里如何判断用户是否为首次下载应用
前端·vue.js
时间的情敌2 小时前
基于 Vue3 及TypeScript 项目后的总结
前端·vue.js·typescript
lpfasd1232 小时前
从 Electron 转向 Tauri:用 Rust 打造更轻、更快的桌面应用
javascript·rust·electron