可拖拽的select组件

前言

不知道大家有没有遇到过这样的需求，比如一个登陆的时候，token过期了，需要自动弹出登录框类似这样的需求，在这里，我给大家介绍下实现这个的核心方法，就是注册一个全局的弹框组件，需要使用的时候就去调用一下。本篇文章基于element ui和vue2的弹框组件，如是其他框架，请自行转换。

实现

先搞一个弹框组件

<template>
    <el-dialog
        title="测试"
        :visible.sync="visibleSync"
        width="30%"
        append-to-body
        center
    >
        <div style="display: flex; justify-content: center">
           我是测试
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleConfirm()">
                测试按钮
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    name: "lack-account-dialog",
    data() {
        return {
            visibleSync: false, // 是否显示弹窗
        };
    },

    methods: {
        handleClose() {
            this.visibleSync = false;
        },
        handleConfirm() {
            this.visibleSync = false;
            console.log("我被点击了")
        },
        open() {
            // 显示
            this.visibleSync = true;
        },
        cancel() {
            // 关闭
            this.visibleSync = false;
        },
    },
};
</script>

接下来写一个js

import Vue from "vue";
// 引入组件
import LackAccountDialog from "@/components/common/LackAccountDialog.vue";
LackAccountDialog.install = function () {
    // 创建构造器
    const LackAccountBox = Vue.extend(LackAccountDialog);
    // 创建组件对象，并挂载
    let instance = new LackAccountBox() // $mount(document.createElement('div') 【也可以挂载到某个元素上】

    // 将组件添加到dom中
    const id = 'lack-account-dialog'
    const el = document.createElement('div')
    el.id = id
    document.body.appendChild(el);

    instance.$mount(`#${id}`);

    // 调用方法或操作属性
    Vue.nextTick(() => {
        instance.open();
    });
};

export default LackAccountDialog;

注册原型

import LackAccountDialog from "./register-lack-accout-dialog";
Vue.prototype.$LackAccountDialog = LackAccountDialog.install;

.vue中使用

this.$LackAccountDialog

.js中使用

import LackAccountDialog from "./register-lack-accout-dialog"; //导入js
LackAccountDialog.install()

这样，一个全局的注册组件就完成了