vue全局调用弹窗组件

vue全局调用弹窗组件

使用vue开发pc端商城，检测未登录状态时，在组件/js文件中弹窗提示用户扫码登录功能…

效果图

场景

• 在vue页面调用登录组件【触发某个事件，提示用户登录】
• 在js文件中调用登录组件【例：路由拦截未登录时，提示用户登录】

关于vue实现pc端登录可查看

1. 创建vue组件

template

 	<div v-if="visibleSync">
        <div class="popup-wrap">
            <div class="overlay"></div>
            <div class="popup-container">
                <div class="popup-content">
                    <p class="popup-title">手机扫码，安全登录</p>
                    <!-- 微信登录 -->
                   	<wxlogin appid="wxappid"
                        class="nofollow"
                        :scope="'snsapi_login'"  
                        :theme="'black'"  
                        :redirect_uri='encodeURIComponent(`https://www.test.com/project/#${fullPath}`)'  
                        :href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKICBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGUgewogIHdpZHRoOiAyMjVweDsKICBoZWlnaHQ6IDIyNXB4Owp9'"
                        :state="`${Math.random()}`"
                        rel="external nofollow">
                    </wxlogin>
                        
                </div>
                <div class="popup-close">
                    <i class="el-icon-close ft30" v-if="flagClose == 1" @click="handleClose"></i>
                    <i class="el-icon-close ft30" v-else @click="cancel"></i>
                </div>
            </div>
        </div>
    </div>

js

<script>
    import wxlogin from 'vue-wxlogin';
    import router from "@/router";

    export default {
      	name: 'login',
        data() {
            return {
                fullPath: '', // 回调路径
                visibleSync: false, // 是否显示弹窗
                flagClose: 1, // 是否显示关闭icon
            }
        },
        components: {
            wxlogin
        },
        methods: {
            handleClose(){
                this.visibleSync = false;
                this.$emit('close', false)
            },
            open() { // 显示
                this.visibleSync = true;
            },
            cancel() { // 关闭
                this.visibleSync = false;
                router.go(-1);
            },
        }
    }
</script>

2. 创建js文件

这里创建modal.js文件

import Vue from "vue";
// 引入组件
import Login from "@/components/login/index.vue";

// 创建构造器
const LoginBox = Vue.extend(Login);

Login.install = function(data) {
  	// data：调用组件时传入参数【操作组件data中数据】，见下图
  	console.log('data====>', data);
  
  	// 创建组件对象，并挂载
  	let instance = new LoginBox({
    	data
  	}).$mount(); // $mount(document.createElement('div') 【也可以挂载到某个元素上】
  
  	// 将组件添加到dom中
  	document.body.appendChild(instance.$el);
  
	// 调用方法或操作属性
  	Vue.nextTick(() => {
    	instance.open();
    	// instance.visibleSync = true;
  	});
};

export default Login;

data获取数据效果图

点击登录按钮，效果如下

3. 注册组件

在main.js中注册全局组件，挂载到原型上

import Login from "@/api/modal";
Vue.prototype.$Login = Login.install;

4. 使用

根据需求调用

组件中调用

loginTap() {
	this.$Login({ fullPath: this.fullPath})
}

js文件调用

import Login from "@/api/modal";

// 根据需求传入参数
Login.install({ fullPath: tmpPath, flagClose: 2 });

另一种方式

• 除了上面介绍方式，还可以使用vue-create-api

  vue-create-api 让 Vue 组件通过 API 方式调用的插件