vue登录页作为modal全局使用

背景

vue项目，有一个登录页面作为单独页面来使用。想要将其改造成 一个modal，然后全局可调用。类似于 mint-ui 的 toast组件这样。

要用到的位置主要是：vue页面内、接口请求的响应数据处理方法内（环境是 无法拿到当前作用域 this）

实现原理

将登陆页面modal封装成一个 插件。

主要代码

1、登录页组件：

正常书写，主要是提供一个组件广播事件 this.$emit('on-logged')。在 登录完成后 通知调用者，做一些操作。

2、设置为插件的入口

将组件打包成为一个插件，在此处进行。

关键操作有：

1、暴露install方法：Vue.use用到

2、设置为全局属性，可基于vue实例 直接调用：vue.mixin

3、声明全局 对于登录modal的调用方法：主要有 show、hide、isVisible

4、事件接收：在登录组件里 ，完成登录后我们会发出一个广播事件，也是在这里面 来监听该事件，$vm.$on('on-logged'

// plugins/login/index.js

import LoginComponent from '@/components/Login'
import { mergeOptions } from '@/libs/plugin_helper'

let $vm

const plugin = {
  install (vue, options = {}) {
    const Login = vue.extend(LoginComponent)

    if (!$vm) {
      $vm = new Login({
        el: document.createElement('div')
      })
      document.body.appendChild($vm.$el)
    }

    const login = {
      show (options) {
        if (typeof options === 'object') {
          mergeOptions($vm, options)
        }
        if (typeof options === 'object' && (options.onShow || options.onHide)) {
          options.onShow && options.onShow()
        }
        this.$watcher && this.$watcher()
        this.$watcher = $vm.$watch('showValue', (val) => {
          if (!val && options && options.onHide) {
            options.onHide()
          }
        })
        $vm.$off('on-logged')

        $vm.$on('on-logged', msg => {
          options && options.onLogged && options.onLogged(msg)
        })
        $vm.showValue = true
      },
      /*setInputValue (val) {
        vue.nextTick(() => {
          setTimeout(() => {
            $vm.setInputValue(val)
          }, 10)
        })
      },*/
      hide () {
        $vm.showValue = false
      },
      isVisible () {
        return $vm.showValue
      }
    }

    // all Vux's plugins are included in this.$vux
   /* if (!vue.$vux) {
      vue.$vux = {
        login
      }
    } else {
      vue.$vux.login = login
    }
*/
    vue.mixin({ 　
      created: function () {
        this.$login = login
      }
    })
  }
}

export default plugin
export const install = plugin.install

// plugin_helper.js

import objectAssign from 'object-assign'

const mergeOptions = function ($vm, options) {
  const defaults = {}
  for (let i in $vm.$options.props) {
    if (i !== 'value') {
      defaults[i] = $vm.$options.props[i].default
    }
  }
  const _options = objectAssign({}, defaults, options)
  for (let i in _options) {
    $vm[i] = _options[i]
  }
}

export {
  mergeOptions
}

使用

1、安装登录modal插件.

// main.js

import loginPlugin from '@/plugins/Login'
// 注意 由于登录组件里，用到了别的一些组件，所以 use 应该在 最下面，即保证 用到的组件已存在
Vue.use(loginPlugin)

2、使用

普通页面里：

this.$login.show({
            onLogged: () => this.reload() // 登录完成后的回调方法
          })

其他位置（无法容易拿到 vue this）：

window.$vue = new Vue({ // 将vue实例 绑定到 window
    el: '#app',
    router,
    components: { App },
    template: ''
  })

window.$vue.$login.show(); // 基于window 来使用

 

转载于:https://www.cnblogs.com/fan-zha/p/11213123.html