【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>
相关推荐
落笔忆梦3 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
我是日安3 分钟前
Day 2 - 开发环境建置:monorepo
vue.js
艾小码4 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js
Mintopia6 分钟前
🌐 交互式 AIGC:Web 端实时反馈生成的技术架构设计
前端·javascript·aigc
蓝天星空7 分钟前
ES6-Promise用法
前端·javascript·es6
诗书画唱10 分钟前
解决HTML/JS开发中的常见问题与实用资源
前端·javascript·html
Mintopia12 分钟前
🚀 Next.js 自建部署全家桶:Docker + PM2 + Nginx
前端·javascript·全栈
鹏多多14 分钟前
详解vue渲染函数render的使用
前端·javascript·vue.js
定栓19 分钟前
Typescript入门-JSDoc注释及tsconfig讲解
前端·javascript·typescript
小意恩27 分钟前
el-table表头做过滤
前端·javascript·vue.js