V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zarte
V2EX  ›  Vue.js

vue 如何实现全局登录组件?

  •  
  •   zarte · 2020-06-06 14:11:39 +08:00 · 3307 次点击
    这是一个创建于 1663 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想实现的功能是:

    任意界面
    if (this.checklogin()){
    ...
    }
    
    checklogin 为全局方法
    
    checklogin(){
    //未登录弹出登录弹窗
    return false
    }
    
    

    通过 vue 。install 可以实现全局登录判断方法。但是登录弹窗组件不知道要怎么弄。

    8 条回复    2020-06-08 08:59:53 +08:00
    ljpCN
        1
    ljpCN  
       2020-06-06 14:49:28 +08:00 via Android
    根组件放个 modal,vuex 里搞个全局 state 控制 modal 的显示与否
    sixway
        2
    sixway  
       2020-06-06 15:33:38 +08:00
    zarte
        3
    zarte  
    OP
       2020-06-06 15:35:00 +08:00
    @ljpCN 恩目前通过这样弄出来了。有个问题为啥通过全局变量的方式无法控制 ant design 的弹窗显示与隐藏,需要通过 vuex 的才行?
    lybcyd
        4
    lybcyd  
       2020-06-06 17:48:57 +08:00
    在 layout 组件里放一个登录弹窗呗。全局变量不是被 vue 监听的变量,无法触发 vue 的响应式机制,所以不能控制弹窗。
    ljpCN
        5
    ljpCN  
       2020-06-06 19:18:50 +08:00 via Android
    @zarte 用 js 的普通变量做不到数据变化视图自动响应。vuex 能做到是因为它监听了数据的变化,自动触发了对视图的修改。建议阅读 vue 官方文档关于数据绑定视图的部分。
    当然我不确定你用 mixin 为每个组件混入一个 data 来控制弹窗的显隐会不会有效果。
    toesbieya
        6
    toesbieya  
       2020-06-06 19:59:49 +08:00
    https://github.com/ElemeFE/element/blob/dev/packages/message/src/main.js
    element-ui 的 message 源码,动态创建组件动态插入 dom,最好的方式
    catch
        7
    catch  
       2020-06-07 12:54:06 +08:00 via iPhone
    基础差的可怕,你是在自学吗?
    zarte
        8
    zarte  
    OP
       2020-06-08 08:59:53 +08:00
    @catch 不知道怎么补基础?现在是用别人弄好的 ant vue pro 直接改。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2637 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:32 · PVG 23:32 · LAX 07:32 · JFK 10:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.