前言

项目开发中基本都会用到组件库，但是设计稿样式和功能不一定和组件库相同，尤其像是消息提示弹窗、确认弹窗，各个项目各个设计师都有自己的一套风格。虽然我们可以使用组件库中的组件对其进行样式覆盖来使用。但是一些定制功能还是不容易修改，这种情况我们就会选择自定义组件，然后通过components属性引入页面，显式的写入标签调用，对于消息提示这种给用户简单的提示或操作，大多数常用的ui库类似功能都支持通过js调用。我们也可以参照ui库的调用方式，实现一个通过js函数调用的自定义组件。此功能不可以在微信小程序中使用，因为微信小程序的body元素已被屏蔽。

1、组件

html

<template>
    <view class="w_100_ h_100vh bc_rgba_255_6 bf_b26 pf l_0 t_0 z_index_9999">
        <view class="w_100_ h_506 df fd_c b_lg_02">
            <view class="m_t_236 f_s_48 f_w_600 ta_c color_16172a">弹窗组件</view>
        </view>

        <view class="m_t_68 df jc_c">
            <view class="dg gtc_c2_300 grg_86 gcg_30">
                <view class="df fd_c ai_c" v-for="item in list" :key="item.id">
                    <image class="w_100 h_100" :src="item.icon"></image>

                    <view class="m_t_36 f_s_32 color_333">{{ item.title }}</view>
                </view>
            </view>
        </view>

        <view class="m_t_36 df jc_c">
            <image class="w_58 h_58" src="@/static/image/icon/12.png" @click="onClick"></image>
        </view>
    </view>
</template>

z_index_9999代表的是层级为9999，也是最高层级，如果层级为999则盖不住tabBar组件。
df表示display: flex;，在第一个元素使用此属性是为了防止margin-top的是时候父元素跟着偏移。
使用统一样式，在此文章中不单独列出，基本看类名便知道样式属性及值。

JavaScript

export default {
    data() {
        return {
            list: []
        }
    },
    created() {
        this.init();
    },
    methods: {
        onClick() {
            console.log('调用时传递的数据: ', this.msg);
            // 关闭组件
            this.$el.parentNode.removeChild(this.$el);
        },
        init() {
            let list = ['模块一', '模块二', '模块三', '模块四'];

            this.list = list.map(item => {
                let obj = {};

                obj.id = this.$uniqueA(26);
                obj.icon = require("@/static/image/icon/11.png");
                obj.title = item;

                return obj;
            });
        }
    }
}

uniqueA是生成唯一值方法。npm下载指令npm install js-unique --save。关键代码this.$el.parentNode.removeChild(this.$el);，调用vue自带的移除元素节点方法。

2、实现js调用挂在组件

import Vue from 'vue';
import componentsQuickEntry from '../components/quickEntry/index.vue';

// 注册实例
const QuickEntry = Vue.extend(componentsQuickEntry);

export function quickEntry(options = { msg: '数据消息' }, methods = {}) {
    let app = new QuickEntry({
        // 数据
        data: options,
        methods
    });

    // 挂载实例
    app = app.$mount();

    document.body.appendChild(app.$el);
}

编写js文件，在util文件夹中新建一个名为quickEntry的.js文件。

3、使用

第一步

import { quickEntry } from '@/util/quickEntry'

Vue.prototype.$quickEntry = quickEntry

在main.js文件中注册组件。

第二步

export default {
	onLaunch() {
		uni.onTabBarMidButtonTap(() => {
			this.$quickEntry({ msg: '数据消息' }, {});
		});
	}
}

经过以上步骤后便可在项目中正常使用组件，示例在App.vue文件中使用。