vue2 封装指令式组件

index.js

import Vue from "vue"; // 导入vue
import Main from "./index.vue"; // 导入组件

// 将组件作为参数，使用vue提供的全局方法，创建一个构造函数
let DrawerConstructor = Vue.extend(Main);

let instance;

const Drawer = function() {
    return new Promise((resolve, reject) => {
        // 初始化实例，此时instance是一个组件实例，但未初始化未完成,这里的变量和方法优先组件内的变量和方法
        instance = new DrawerConstructor({
            data: function() {
                return {
                    title: "选择用户"
                };
            },
            methods: {
                onSelect: res => {
                    unmount();
                    resolve(res);
                },
                onCancel: () => {
                    unmount();
                    reject();
                }
            }
        });
        // 卸载组件
        const unmount = () => {
            instance.visible = false;
        };
        // 完成初始化
        instance.$mount();

        // 将组件添加到根节点body
        document.body.appendChild(instance.$el);
        instance.visible = true;
    });
};

export default Drawer;

 index.vue

<template>
    <div>
        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="1000px"
            @closed="onCancel"
            destroy-on-close
        >
            <div v-loading="loading">
                <div class="search">
                    <el-form
                        :model="queryParams"
                        ref="queryUserForm"
                        :inline="true"
                        label-width="68px"
                    >
                        <el-form-item label="用户姓名">
                            <el-input
                                v-model="queryParams.realName"
                                placeholder="请输入用户姓名"
                                clearable
                                size="small"
                                style="width: 200px"
                            />
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input
                                v-model="queryParams.mobile"
                                placeholder="请输入手机号"
                                clearable
                                size="small"
                                style="width: 200px"
                            />
                        </el-form-item>
                        <el-form-item label="身份证">
                            <el-input
                                v-model="queryParams.idCard"
                                placeholder="请输入身份证"
                                clearable
                                size="small"
                                style="width: 200px"
                            />
                        </el-form-item>
                        <el-form-item label="部门">
                            <SelectTree
                                style="width: 200px"
                                :props="props"
                                :options="optionData"
                                :value="queryParams.valueId"
                                :clearable="true"
                                :accordion="true"
                                @getValue="getvipValue($event)"
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                size="small"
                                @click="search"
                                >搜索</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
                <el-table
                    :data="data"
                    border
                    style="width: 100%"
                    height="500px"
                >
                    <el-table-column
                        align="center"
                        header-align="center"
                        type="index"
                        :index="indexMethod"
                        label="序号"
                        width="70"
                    ></el-table-column>
                    <el-table-column
                        label="用户姓名"
                        width="150"
                        align="center"
                        prop="realName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        align="center"
                        width="50"
                        prop=""
                        label="性别"
                    >
                        <template slot-scope="scope">{{
                            scope.row.sex | getSex
                        }}</template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        width="120"
                        prop="mobile"
                        label="手机号"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.mobile ? scope.row.mobile : "--" }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        width="150"
                        prop="idCard"
                        label="身份证号"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            {{ scope.row.idCard ? scope.row.idCard : "--" }}
                        </template>
                    </el-table-column>
                    <el-table-column label="部门" align="center">
                        <template slot-scope="scope">{{
                            scope.row.memberInfo.office.name || "/"
                        }}</template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="150">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="onSelect(scope.row)"
                                    >选择</el-button
                                >
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="foot">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="queryParams.pageNo"
                        :page-sizes="[10, 20, 30, 40, 50]"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { requestGetVipList } from "@/api/api.js";
import SelectTree from "../../components/common/SelectTree";
export default {
    inheritAttrs: false,
    components: { SelectTree },
    data() {
        return {
            title: "",
            visible: false,
            loading: true,
            queryParams: {
                realName: "",
                mobile: "",
                idCard: "",
                valueId: "",
                pageNo: 1,
                pageSize: 10,
                token: localStorage.getItem("token")
            },
            props: {
                // 配置项（必选）
                value: "id",
                label: "name",
                children: "children"
            },
            data: [],
            total: 0,
            list: []
        };
    },
    beforeMount() {
   
    },
    computed: {
    
    },
    async mounted() {
        this.search();
    },
    filters: {
        getSex(item) {
            var sex = "";
            if (item == 1) {
                sex = "男";
            } else if (item == 2) {
                sex = "女";
            } else {
                sex = "--";
            }
            return sex;
        },
        getMemberName(item) {
            var word = "";
            if (item.memberInfo) {
                if (item.memberInfo.danWeiName) {
                    word = item.memberInfo.danWeiName;
                }
            }
            return word;
        }
    },
    methods: {
        getvipValue(value) {
            this.queryParams.valueId = value;
        },
        search() {
            this.queryParams.pageNo = 1;
            this.getList();
        },
        getList() {
            let that = this;
            let queryParams = {
                ...that.queryParams,
                "memberInfo.office.id": that.queryParams.valueId
            };
            this.loading = true;
            requestGetVipList(queryParams)
                .then(response => {
                    if (response.code == 200) {
                        this.data = response.data.data.list;
                        this.total = response.data.data.count;
                    } else {
                        throw new Error(response.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$message({
                        message: "获取会员列表失败！",
                        type: "error"
                    });
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        //列表序号
        indexMethod(index) {
            return (
                (this.queryParams.pageNo - 1) * this.queryParams.pageSize +
                index +
                1
            );
        },
        //分条数
        handleSizeChange(val) {
            this.queryParams.pageNo = 1;
            this.queryParams.pageSize = val;
            this.getList();
        },
        //第几页
        handleCurrentChange(val) {
            this.queryParams.pageNo = val;
            this.getList();
        },

        onCancel() {},
        onSelect() {}
    }
};
</script>
<style lang="scss" scoped>
.search {
    margin-bottom: 15px;
    width: 100%;
    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
    // gap: 20px 20px;
    .item {
        display: grid;
        grid-template-columns: 75px 1fr;
        align-items: center;
        .label {
            font-size: 14px;
            display: flex;
            font-family: Helvetica Neue, Helvetica, PingFang SC,
                Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
            span {
                flex: 1;
                text-align-last: justify;
            }
        }
        >>> .el-input__inner {
            width: 100%;
        }
        >>> .el-range-separator {
            width: 20px;
        }
    }
}
.foot {
    margin-top: 15px;
}
</style>

main.js

import userTemplate from "@/components/userTemplate/index.js";
Vue.prototype.$userTemplate = userTemplate;

调用

  this.$userTemplate().then(res => 
    // 点击选择
  }.catch(err => {
    // 点击关闭
  }