vue 开发公共组件/方法(vue 各类UI框架开发原理)

墨蓝 2022-04-11 02:48 681阅读 0赞

前面讲解了vue怎么通过npm发布vue的组件,但是对里面的相关技术却没怎么提及,下面跟大家共同探讨一下**如何封装积累自己的VUE ui组件库**呢:

大家有没有想过**各大ui框架是如何封装**的呢.ls element-ui/min-ui /vant-ui

有时候我们想让自己的组件跟发布的ui框架里面的组件一样使用的简单粗暴,而不是一直去写子组件,然后import引入再到components里面使用一下,才能进行父子传值什么的,那就相对来说麻烦的多.

特殊情况特殊对待,如果很多地方都用到了这个公共组件,我们都要一个一个引入吗?比如loading,

再或者我需要在请求交互的成功或者失败的回调中进行调用弹窗或者是警告,然后弹窗dom消失呢?

主要还是看需求,怎么方便怎么来....

**第一种,请求成功或者失败控制loading加载的显示与隐藏**

**分析:**像这一种无非就是正常的封装一个子组件,然后用vue的component构造器引入一下,就可以全局使用这个loading的标签,不用再import引入,再到components

**核心代码:**

import Vue from 'vue';
    import Loading from './loading/loading.js'
    Vue.component(Loading.name, Loading);

**使用案例**:

![20181204142141210.png][]

第一种也是最简单的一种,无非是把引入的组件类似于做成全局的了,传值还是按照正常进行.

**第二种,在js代码中通过指令控制dom**

我们可以在element-ui或者其他组件中见到这样的代码,通过this.xxx就能自己弹窗/警告等等操作

this.$message({
          type: 'info',
          message: `action: ${ action }`
    });

**分析**:首先看到this.xx方法,第一反应应该想到这种无非是把方法挂载到了vue.prototype上,如果你是纯js方法生成的dom,那么你只要挂载即可,但是正常情况下我们是写了一个vue组件然后通过Vue.extend,new一个实例

**核心代码展示**:

import Vue from 'vue'
    import messag from './message.vue' //引入自己正常写的子组件弹窗
    let messageBox = Vue.extend(messag)//extend继承
    let instance;
    
    
    export function Message(options) {
        instance = new messageBox({//new了一个vue组件的实例
            data: options
        });
        instance.vm = instance.$mount();//$mount挂载
        document.body.appendChild(instance.vm.$el);//添加子dom
        return instance.vm;
    }
    ['success', 'error'].forEach(type => {//成功/失败或者其他状态,赋值给了type类型,这里可忽略
        Message[type] = options => {
            if (typeof options === 'string') {
            options = {
                message: options
            };
            }
            options.type = type;
            return Message(options);
        };
    });
    Vue.prototype.$message = Message;

**调用案例**:

this.$message({
         type:'err',
         time:'3000',
         text:_this.$t('message.codeErr.'+error.response.data.error+'')
    })

这样就能简单使用了,只不过点击一次就弹出一次,大家记得在组件中使用**this.$el.parentNode.removeChild(this.$el);**根据需求删除生成的dom即可,当然这些都是自行在子组件中定义的.

[20181204142141210.png]: /images/20220411/d4c5bf0417894424b008695cdfe88edd.png