vue在使用element的 Dialog弹框自定义组件时 scss的样式没作用

最新推荐文章于 2024-05-20 20:00:00 发布
最新推荐文章于 2024-05-20 20:00:00 发布
阅读量622 收藏
点赞数 1
文章标签： vue.js scss 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69655737/article/details/127318994
版权

基本上是因为Dialog设置了append-to-body属性，

解决办法：

方法一：去除该属性即可，把需要的的嵌套关系的Dialog改写成同级的。

方法二：把样式写到body里面即可。

大炮猿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript进行调用。 首先，我们需要了解Vue3中的Composition API。Vue3引入了Composition API，它允许我们在组件...
element如何修改原样式及无法修改原样式等问题
陈新科的博客
04-27 3515
1.使用::deep深度修改标签样式 找到需要修改的 ElementUI 标签的类名，然后在类名前加上 ::deep，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 style 标签中。 <style lang="scss" scoped> ::v-deep .el-select__popper.el-popper { background: rgba(42, 43, 60, 0.5); border: 1px rgba(103, 179, 229, 1) so.
解决ElementUI的dialog对话框第一次打开内部布局错乱，刷新一下变回正常的问题
qq_68155756的博客
02-16 897
写项目的时候遇到了这个问题，百思不得其解，一开始还以为是内部样式用的是百分比单位的问题，结果换成px像素也存在这个问题。后来用F12发现了不对劲
vue3封装ElementUI plus Dialog弹窗
最新发布
阿狸演绎的博客
05-20 675
因为ElementuiPlus的dialog弹框的初始样式不太好看,而公司要求又要好看,本来是已经实现了,但是后来想想了发现封装完dialog的其他功能也要,所以特此记录一下。思路:封装一个组件,组件内部嵌套el-dialog,然后定义好公共样式,定义好方法,直接使用。思路:封装一个组件,将所有新增的参数引入el-dialog 参数中,实现参数共用。缺陷:因为很多属性定义好了,导致如果超出既定样式的方案就得重新调整代码。新建一个组件,将官网暴露的属性全部引用了。
elementui弹窗Dialog添加append-to-body后修改原样式无效
qq_44308109的博客
03-08 1万+
1. 为什么要添加append-to-body属性 在写弹框嵌套时我们需要添加append-to-body属性，否则后弹出的框就会有遮盖层遮挡，如下图 2.为什么会修改无效 我们想改变某个弹窗的原来样式，通常是在该弹框外包一个div，然后修改该div下的dialog样式，但是添加append-to-body属性为true后，Dialog 将插入 body 元素上，也就是说它并不在该div元素之下了，因此修改无效。 3.添加了append-to-body属性的dialog样式修改方式 在dilog组件上定义c
【vue】修改el-select弹出框样式
栀妹儿的炼丹炉
09-19 1003
在el-popover元素上添加 popper-class="（自定义样式类名）"属性，即，然后使用在全局样式.el-popover.myPopover{自定义样式}来修改弹框效果。如图el-popover弹框和el-select下拉项的的容器是div#app之外的，所以在scoped作用域内使用>>>或/deep/修改样式无效。el-popover弹框的样式。
vue菜单选中样式没有被触发
u014288878的博客
08-28 153
今天在改前端的时候发现有个菜单选中样式没有被触发，发现结果是路由写错了。如图，此时菜单会员管理应该是被选中的样式，但是没有触发。
基于 vue + element-ui 的后台管理系统源码.zip
05-25
Element包含了多种常见的UI组件，如`<el-table>`用于展示表格数据，`<el-button>`用于创建各种样式和功能的按钮，`<el-dialog>`用于弹出对话框，`<el-form>`和`<el-form-item>`用于表单的创建和验证，以及通知、提示...
vue+element-ui.rar
04-23
Vue.js和Element-UI是两个在前端开发领域广泛使用...在实际使用过程中，不断学习和掌握这两个工具的高级特性，如Vue的计算属性、异步组件、过渡效果以及Element-UI的自定义组件等，将有助于提升项目的质量和开发效率。
element使用文件
02-20
在使用 Element UI 时，了解其核心概念和使用方法至关重要。 1. **安装** 首先，你需要通过 npm 或 yarn 来安装 Element UI。对于 npm 用户，运行以下命令： ``` npm install element-ui -S ``` 对于 yarn ...
vue+elementui 的管理后台源码稍微有些复杂
05-25
- **自定义主题**：Element UI支持自定义主题，可以通过scss变量修改样式。 - **国际化**：Element UI内置了多语言支持，可以根据需求配置。 - **事件处理**：理解组件事件，如`@click`、`@input`等，以及`$emit`...
element-ui 日期组件el-date-picker数据格式问题
qq_36437172的博客
10-30 1万+
数据在传递给后端时格式有问题，如下图： 传递数据： startDate:2018-10-30T10:06:20.000Z endDate:2018-11-30T09:04:23.000Z 1.2018-10-30T10:06:20.000Z能变成 yyyy-MM-dd HH:mm:ss格式传递给后端 2.传递的时间...
element DateTimePicker修改快捷选项样式
半盏茶. ོ
08-09 1775
vue+element+JQuery修改时间选择快速选择样式
element-ui组件中el-date-picker日期插件设置可选日期范围
qq_40364610的博客
04-13 1436
html部分： <el-date-picker v-else-if="timeType==2" v-model="time" type="month" placeholder="选择年月" value-format="yyyy-MM" :picker-options="pickerOptions1...
element日期插件自定义选择区间
xioxi
11-03 719
element日期插件自定义选择区间
如何修改elementui组件的样式，以及修改的样式不生效问题
热门推荐
lingliu0824的博客
08-04 1万+
修改elementui组件样式的方法有： 1.根据组件的属性传入相应的样式或者属性值来改变样式（具体属性参考官网）： 如：可以通过:header-cell-style来设置表头单元格的样式，:rowStyle来设置表格每一行的样式 2.通过class 2.1 通过以下方式来改变el-table标签下的表格偶数行的样式。 注意：这个样式必须是全局的才会生效，即style标签不能加scoped,为了避免组件内的其他样式也成为全局样式，可以新建一个style标签放这些组件样式，其他的样式仍然放在style s
(el-Table)操作(不使用 ts)：Element-plus 中 Table 多选框的样式等的调整
狮子座的男孩
10-28 1854
【代码】(el-Table)操作(不使用 ts)：Element-plus 中 Table 多选框的样式等的调整。
element ui 日期组件样式修改不生效
Gyh9421的博客
08-26 1930
element ui 日期时间选择器
elementUI 中 date-picker 的使用的坑（vue3）
m0_54355172的博客
10-22 2013
日常贴
vue3封装dialog弹框组件父组件点击显示
05-23
首先，你需要在父组件中引入 Dialog 弹框组件，并在父组件的 template 中添加一个触发显示弹框的按钮。例如： ```vue <template> <div> <button @click="showDialog">显示弹框</button> <Dialog v-model="dialogVisible"></Dialog> </div> </template> ``` 在上面的代码中，我们添加了一个按钮，当用户点击该按钮时，会触发 showDialog 方法。同时，我们引入了一个名为 Dialog 的组件，并将它的显示与隐藏与一个名为 dialogVisible 的变量绑定了起来。 接下来，在父组件的 script 中，我们需要定义 showDialog 方法以及 dialogVisible 变量。例如： ```vue <script> import Dialog from './Dialog.vue' export default { components: { Dialog }, data() { return { dialogVisible: false } }, methods: { showDialog() { this.dialogVisible = true } } } </script> ``` 在上面的代码中，我们首先引入了 Dialog 组件，然后在 data 中定义了 dialogVisible 变量，并将其默认值设置为 false。接着，我们定义了一个名为 showDialog 的方法，该方法将 dialogVisible 设置为 true，从而显示 Dialog 弹框组件。 最后，我们需要在 Dialog 弹框组件中添加一个关闭按钮，并将其与 dialogVisible 变量绑定起来。例如： ```vue <template> <div> <div class="dialog-mask" v-if="visible" @click="close"></div> <div class="dialog-wrapper" v-if="visible"> <div class="dialog-content"> <div class="dialog-header"> <h3 class="dialog-title">Dialog 标题</h3> <button class="dialog-close-btn" @click="close">×</button> </div> <div class="dialog-body"> <p>Dialog 内容</p> </div> </div> </div> </div> </template> <script> export default { props: { visible: { type: Boolean, required: true } }, methods: { close() { this.$emit('update:visible', false) } } } </script> ``` 在上面的代码中，我们添加了一个名为 close 的方法，该方法会将 dialogVisible 设置为 false，并通过 $emit 方法将更新后的值传递给父组件。同时，我们在弹框组件中添加了一个关闭按钮，并在按钮的 click 事件中调用 close 方法。 这样，当用户点击父组件中的按钮时，就会触发 showDialog 方法，从而显示 Dialog 弹框组件。当用户点击弹框中的关闭按钮时，会触发 close 方法，从而关闭弹框。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值