vue在组件内对elementUI弹出类的提示框样式进行修改不生效问题

已于 2024-03-08 16:14:09 修改
阅读量1k 收藏 1
点赞数 1
文章标签： vue.js elementui javascript
于 2023-02-13 17:28:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54118302/article/details/129013390
版权

vue在组件内对elementUI弹出类的提示框样式进行修改不生效问题

在开发vue项目时，在某个组件内使用了elementUI的某些弹窗类提示组件，如图
在这里插入图片描述

在公共的less文件中修改了该弹窗的样式，之后在当前组件内对样式进行二次修改，发现书写的样式都没有生效
在这里插入图片描述

观察控制台可以发现，这是因为element这些弹出框类的组件，都挂载在了body节点上，而不是当前组件内，组件因为scoped使得样式仅在当前组件内生效，无法影响到外部

需要修改的话可以在vue文件内额外书写一个不带scoped属性的style标签，注意一定要添加限制生效范围的类名，防止影响全局的样式

不知道怎么学前端的咸鱼
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue element ui this.$alert 样式修改，长词自动换行、自定义html标签无效果
dandanforgetlove的专栏
09-28 1万+
问题： vue alert提示框长词无法自动换行（一个连起来的词） 解决： 自定义一个class 名 this.$alert(row.content, row.title, { confirmButtonText: '确定', customClass:'message_box_alert' }); CSS： <style> /**站内信长单词强制换行 */ .message_box_alert { word-.
反思总结 -- el-dialog组件解决修改el-dialog__body样式不生效问题
m0_61480542的博客
01-31 810
来修改样式, 如果这样写了还不生效, 找到最底层的index.html页面, 在该页面的style样式中写全局该样式。首先要通过custom-class="vDialog"设置dialog的class属性, 在通过。
修改elementui组件的样式不生效问题，
最新发布
m0_47177307的博客
04-07 363
important，加上之后还是不生效，检查代码发现，<style lang="scss" scoped> 设置了scoped属性。样式只会影响当前组件内部的元素，而不会影响引入的第三方组件，当在一个 Vue 单文件组件中使用。样式时，样式规则只会应用于当前组件内部的元素，而不会泄漏到引入的第三方组件中。在修改表单组件时，想让表单的l<el-form-item>组件的able字体不加粗，或者把scoped属性去掉，就算不使用样式穿透也可以改变elementui组件样式。在 Vue 单文件组件中，
修改elementUI el-select 下拉框修改样式不生效问题
fred8的博客
01-05 979
修改elementUI el-select 下拉框修改样式不生效问题
element 修改样式不生效解决方法
xuelong的博客
08-15 732
有时候element-ui样式达不到预期，就需要修改样式，但是使用了很多修改方法都没有效果。要修改的样式，修改为’font-size: 12px’使用’deep’来覆盖，无效，
新手上路~VUE3+Element-PLUS dialog弹出框重置表单不生效问题
Yjx的博客
02-03 1707
Element-plus dialog问题
elementUI tooltip无法修改样式
RequesToGod的博客
04-14 1323
elementUI tooltip修改样式不管用解决 是vue使用scoped后会在当前组件下每个dom元素上添加一个组件唯一标识（例如data-v-fae5bece），class也会编译成data-v-fae5bece,而我们使用popper-class自定义class想写在scoped中，element动态添加的dom上不具备唯一标识data-v-fae5bece，所以样式不会生效只能用全局样式覆盖。 解决办法 再在底部新建一个style标签，来修改样式就好了 ，来修改样式就好了 [外链图片转存失败
修改vue elementUI多选框问题 elementui lib
01-22
问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示 ...
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
使用vue实现各类弹出框组件
10-16
主要介绍了使用vue实现各类弹出框组件,文中给大家提到了vue中常用的dialog组件的封装，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
详解用vue编写弹出框组件
08-30
本篇文章主要介绍了详解用vue编写弹出框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
Vue引用Element-UI时，组件无效果解决方案
热门推荐
XreqcxoKiss的博客
05-01 1万+
问题： Vue在使用Element-UI组件的时候，已经安装好依赖 > npm install element-ui 在main.js中导入依赖 import ElementUI from 'element-ui' 并在全局中使用 Vue.use(ElementUI) 但，即使是这样，在使用element中的组件时，也没有出现预期的效果 <el-row> &...
学习笔记——Vue中使用ElementUI时，部分样式无法改变
qq_41339126的博客
05-19 330
在Vue项目中，引入ElementUI框架，修改其固定样式，但是在vue组件中无用。 以弹出框el-popover为例。 原因： 这个组件定义在根组件之外，在根组件中改变样式，无法影响到根组件之外的元素。 解决：在App.vue中style标签中修改样式。 ...
elementUI修改菜单的二级菜单el-submenu__title的样式不生效
03-07 872
elementUI修改菜单的二级菜单el-submenu__title的样式不生效
elementUI中tooltip自定义class样式在scoped下不生效问题
qq_190265950的博客
01-27 7114
在项目中遇到一个觉得比较有意思的坑，在vue框架中使用element，遇到动态添加dom元素的组件时（tooltip, dialog等）,在属性popper-class，自定义class时样式不生效，后面经过分析不生效的原因是vue使用scoped后会在当前组件下每个dom元素上添加一个组件唯一标识（例如data-v-fae5bece），class也会编译成data-v-fae5bece,而我们使用popper-class自定义class想写在scoped中，element动态添加的dom上不具备唯一标识d
修改el-select或者el-input样式失效
lanmy_dl的博客
08-02 1097
因为在页面的时候我取消样勾选就满意黑色，所以以为设置的是none，结果代码里面设置none是白色，然后一直以为没有生效，当改成自己想要的颜色就可以了。可是一直不生效，最初看到说:popper-append-to-body="false"设置为false，没用。下午改el-input和el-select这两个的样式真的烦，，，还不如写原生标签了。，注意没有空格，然后按照所寻找的样式选择器放进来就可以了。我已经在样式器中挨着挨着去找了，把层级的类都写下来了。后面感觉就是样式穿透的问题，样式使用的是sass。
vue中父元素修改子元素中的样式
m0_59638694的博客
08-29 1005
父组件改子组件的样式
el-dialog__body样式无效解决方案
YUE
05-13 2244
如果你用了穿透还是无效的话，那就是你用了scoped。在此style上方再加一个style即可解决。
vue elementui弹出框表格
12-26
以下是使用Vue和Element UI实现弹出框表格的示例： ```html <template> <div> <el-button type="primary" @click="showDialog">打开弹出框</el-button> <el-dialog :visible.sync="dialogVisible" title="表格弹出框" width="800px"> <el-table :data="tableData" border> <el-table-column v-for="column in visibleColumns" :key="column.prop" :prop="column.prop" :label="column.label"> </el-table-column> </el-table> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, tableData: [ { name: 'John', age: 20, gender: 'Male' }, { name: 'Jane', age: 25, gender: 'Female' }, { name: 'Tom', age: 30, gender: 'Male' } ], columns: [ { prop: 'name', label: '姓名' }, { prop: 'age', label: '年龄' }, { prop: 'gender', label: '性别' } ], visibleColumns: [] }; }, methods: { showDialog() { this.visibleColumns = this.columns; // 默认显示所有列 this.dialogVisible = true; } } }; </script> ``` 在上面的示例中，我们使用了`el-dialog`和`el-table`组件来实现弹出框和表格。通过点击按钮，可以打开弹出框，并在弹出框中显示表格。表格的列可以通过复选框来自定义显示或隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值