解决进行路由跳转modal会出现的样式问题

最新推荐文章于 2022-10-27 14:33:58 发布
最新推荐文章于 2022-10-27 14:33:58 发布
阅读量845 收藏
点赞数
分类专栏： # vue 前端 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44320032/article/details/124197755
版权
前端 同时被 2 个专栏收录
53 篇文章 3 订阅
订阅专栏
vue
44 篇文章 2 订阅
订阅专栏

真的很无语，搞了两天结果发现其实很简单。

之前项目需要点击按钮，进行路由跳转到对应的页面。现在需要把几个按钮合并，放进一个modal里。所以我进行了modal的嵌套，但是嵌套之后页面样式出现了问题。ivu-modal-content样式丢失。

bug如下：

发现问题之后我首先对样式进行了调整，很显然是没用的。后来发现modal是不需要嵌套的，可以直接写在外面调用。

一开始是进行了嵌套

 后来发现直接写在外面就好了

具体原因未知，总之很无语。

关于路由跳转的问题可以看之前我写的文章《vue使用router-view调用页面》vue使用router-view调用页面_芝士焗红薯的博客-CSDN博客

芝士焗红薯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ionic4的路由传参和modal传参
kikyou_csdn的博客
04-17 2369
一、路由传参 1.普通参数 例：perfect-self页面跳转到gongsi-organization页面传递参数store_id和store_name perfect-self.page.ts import { Router } from '@angular/router'; ... constructor( public router: Router, ){} ... this.route...
[Angular]路由跳转
那么多的人，你要去哪里
05-20 599
前言在Angular中，路由的作用是建立URL路径和组件之间对应关系，根据不同的URL路径匹配出相应的组件并渲染。下面列出项目中代码展示。正文跳转按钮代码：<a class="plus" (click)="plusmodal()">添加</a> 跳转路由代码：plusmodal(){ this.router.navigateByUrl("workspace/gam/plus...
前端入门经验——iview下Modal对话框样式修改
qq_45997679的博客
11-24 4663
先放一张没有修改过的iview对话框。 修改过的Modal。 代码： HTML： <Modal v-model="modalGlzcy" class-name="qzcxQzc" :closable="false"> <!-- <template #header> </template> --> <div slot="header"> <div class=.
antd中头像上传前编辑antd-img-crop插件弹出modal没有样式的问题
Mine____的博客
08-18 1773
在antd pro项目中,有一个头像上传前编辑的需求,在antd组件Upload中有一个上传前编辑的demo,用到一个antd-img-crop插件,用法很简单,只需要包裹Upload标签即可,具体API可以参考antd-img-crop的github地址 https://github.com/nanxiaobei/antd-img-crop 在使用过程中发现编辑弹出的modal框没有样式, 查阅antd-img-crop的github文档,发现对样式有这样的描述 样式 为防止覆盖自定义 antd 样式，
iview modal 弹出框 不自动消失的方法
用户名已注销的博客
04-30 3034
iview modal 弹出框 不自动消失的方法 点击ok的时候会自动关闭弹出框 // ok时会自动关闭 <Modal v-model="modal1" title="modal title" @on-ok="ok" @on-cancel="cancel"> </Modal> 但是，有时候我们会在弹出框关闭前做一系列操作，最常见的就...
小程序自定义modal弹窗封装实现
weixin_34268753的博客
06-14 1683
前言 小程序官方提供了 wx.showModal 方法，但样式比较固定，不能满足多元化需求，自定义势在必行~ 老规矩先上图 点击某个按钮，弹出 modal框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml 、modal.wxss 、modal.js 、modal.json 四个文件复制到对应位...
Vue-Router-Modal
04-02
Vue-Router-Modal 是一个基于 Vue.js 框架的路由管理模态解决方案。它将传统的页面跳转转换为模态对话框展示，这在某些应用场景下，如处理表单填写、查看详细信息或者轻量级的导航时，能够提供更好的用户体验。Vue-...
无刷新弹出对话框 和 跳转
12-21
传统的页面跳转会导致整个页面刷新，但随着Web技术的发展，出现了无刷新跳转的方式，即平滑滚动或路由跳转。 平滑滚动（Smooth Scrolling）通常用于单页应用（SPA），当用户点击链接时，页面会平滑地滚动到目标位置...
modal-project：在此Vue 3教程中，我们将使用Vue CLI为我们重新制作一个更大的Vue项目，该项目最终将包含多个组件和页面。 我们还将讨论Vue文件，模板和模板引用
02-19
通过定义路由映射，我们可以轻松地在不同组件之间跳转。 总的来说，这个"modal-project"教程将涵盖Vue 3的基础和高级概念，包括组件化、模板语法、状态管理以及项目构建和优化。通过学习这个项目，开发者可以更好地...
React Native react-navigation 导航使用详解
08-28
React Native 中的 react-navigation 库是当前最流行的导航解决方案之一，该库提供了强大的导航功能，可以满足大多数移动应用程序的需求。下面我们将详细介绍 react-navigation 库的使用和实战技巧。 一、开源库...
FunSeeAntdBoilerplate:使用Antd框架的管理网站模板项目
05-10
6. **路由管理**：项目可能使用了如`react-router-dom`这样的库来进行路由管理，实现页面间的跳转。这有助于构建多层级的单页面应用结构。 7. **状态管理**：如果项目复杂度较高，可能还会涉及Redux或MobX等状态...
Javascript页面跳转常见实现方式汇总
10-23
主要介绍了Javascript页面跳转常见实现方式,结合实例汇总分析了JavaScript常用的七种页面跳转实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
vue封装修改后的modal对话框
wuww18stu的博客
11-27 2812
vue封装修改后的modal对话框 iview里面Modal对话框有两种，一种是普通对话框，如下图： 另一种是消息对话框，包括消息对话框、成功对话框、警告对话框、错误对话框、确认对话框，这几种对话框根据消息的类型来展示左上角的图标显示，如下图是消息对话框： 很明显的可以看出，第一种和第二种对话框样式完全不同，普通的对话框并没有左上角的图标，在开发过程中，发现当第二种对话框需要连续显示两次的时候...
react-router4.x的modal模式
殿堂软件
07-26 673
从2.8.x升到4.x，路途艰辛，网上资料不多，许多东西只能硬啃了，把官网例子的重点翻译一遍，让自己好理解也提高下翻译水平。 之前的程序路由之前跳转频繁，一方面客户体验不好，另一方面回退时的状态保持问题非常让人头疼，故此升级到react-router4.3.1使用modal模式能解决这个问题。 import React from "react"; import { BrowserRoute...
uniapp中修改uni.showModal弹框content内容样式
weixin_58101575的博客
10-27 8291
在项目common的style.scss中定义全局样式
scoped 和 /deep/ 解决 css 冲突覆盖问题
lefex的博客
12-30 1308
上一节内容我们学习了 Vue 中使用 CSS 系统学习 vue 中使用 css 的各种方式，这节内容学习一下 scoped 和/deep/ 的作用：在 vue 中使用组件时，最怕 cs...
deep导致样式失效？
铃儿响叮当
03-04 1066
背景： 最近谷歌升级到89.几的版本后，项目中有些样式失效了 出现场景解析： 1. 全局样式：加了/deep/后的样式会失效 =》实际上，全局样式，根本不需要使用deep来做样式穿透，全局样式只有优先级的问题，没有拿不到的问题 2.局部样式：/deep/嵌套使用，会导致样式失效 // 这就是局部嵌套使用(scoped)，会导致.c的样式失效 <style lang="scss" scoped> .a /deep/ .b { ...... /deep/ .c { ...
iOS项目中一定会用到的两种常用的弹框 从底部弹出 、中间弹出 Swift代码
weixin_43259805的博客
12-04 3563
从底部弹出的弹框 ，样式如下 1.利用CocoaPods导入HWPanModal 框架,在桥接文件中导入头文件 #import "HWPanModal.h" 2.创建一个新的控制器 TestViewController，在控制器添加如下代码 //delegate （不需要设置代理,直接用) override func showDragIndicator() -> Bool { false } override func shouldRespond(t
怎么使用深度选择器解决antdv4 无法修改modal里的select样式的问题？
最新发布
07-15
要使用深度选择器（Deep Selector）来解决 Ant Design Vue 4（antdv4）中无法修改 Modal 弹框中 `<a-select>` 组件样式的问题，你可以在样式中使用 `/deep/` 或者 `>>>` 来穿透 CSS 作用域，直接修改组件内部的样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芝士焗红薯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值