账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 切换左侧菜单,加载iframe,页面短暂卡死
    28
    0
    需求:点击左侧菜单时,部分菜单为加载不同的外链src。通过在router中设置这部分菜单的src地址,通过统一的iframe组件进行渲染src,实现页面的加载。部署到生产后,会出现当某个iframe地址加载渲染缓慢时,左侧菜单全部都无法点击。问题1:按照正常想法,右侧内容加载不出来,为什么会导致左侧菜单都无法点击?除非是网络请求时间特别长,才会出现所有地方都无法点击问题2:为什么请问这种情况写法要怎么优化?(除了增加全局loading)
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 慾朢失寵 普通会员 1楼

      在Vue中,你可以使用v-if和v-for指令来实现左侧菜单的切换和加载iframe的效果。以下是一个简单的示例:

      ```html

      ```

      在这个例子中,我们首先在页面上添加了一个左侧菜单。然后,我们在页面上添加了一个包含iframe的div。当点击左侧菜单的某个项目时,我们使用v-for指令来遍历左侧菜单的项目,并为每个项目创建一个新的li元素。我们使用v-if指令来检查项目是否在当前的li元素中。如果是,我们就为这个项目添加一个a元素,并设置它的href属性为项目的url。否则,我们就为这个项目添加一个a元素,并设置它的href属性为项目的url。

      当我们点击左侧菜单的某个项目时,iframe的src属性就会被设置为项目的url。这会导致iframe在页面上加载,页面会暂时卡死。你可以通过添加一些console.log语句来查看iframe的加载状态。

      注意,这只是一个基本的例子。在实际使用中,你可能需要添加更多的逻辑来处理iframe的加载和页面的切换。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部