cube-ui 【createApi模块（以API的形式调用自定义组件）】

背景

需要编写一个点击 绑定点击事件的div 之后弹出蒙层，原本可以把弹层代码嵌套在一个组件内部，但是对于全屏类的弹窗而言，把组件放在body下是最保险的，比如弹层用了fixed布局，很容易受到组件内部其他因素的影响从而产生bug不能很好地展示弹层；现在可以利用cube-ui的createAPI模块来调用自定义组件去避免产生错误。

介绍

createAPI官方文档：https://didi.github.io/cube-ui/#/zh-CN/docs/create-api

createAPI(Vue, Component, [events, single])
参数：
{Function} Vue Vue 函数
{Function | Object} Component Vue 组件，组件必须有 name
{Array} [events] 组件实例 emit 的事件名集合
{Boolean} [single] 是否为单例

createAPI模块提供了一个叫做createAPI(Vue,Component,[events,single])的函数,它可以把任何一个组件当成一个api调用，当一个组件通过createAPI注册之后，就可以通过this.$createAaBb(config, renderFn, single)来调用组件，返回一个实例，可直接使用组件内的方法、数据等，调用组件之后可以动态挂载到body下面

小结：createAPI的主要作用是把一些全屏类的弹层动态挂载到body下

做法

1、定义一个注册API的js文件：register.js

// 导入createAPI函数、vue和组件
import { createAPI } from 'cube-ui'
import Vue from 'vue'
import HeaderDetail from 'components/header-detail/header-detail'
// 将组件注册成api
createAPI(Vue, HeaderDetail)

2、在js入口文件main.js中导入register.js文件

// main.js
import './register'

3、在弹层组件中v-show绑定一个变量控制显示/隐藏

<div class="header-detail" v-show="visiable"></div>

data() {
    return {
      visiable: false
    }
},
methods: {
      show() {
        this.visiable = true
      },
      hide() {
        this.visiable = false
      }
    }

4、在非弹层组件中绑定一个点击事件

<div @click="showDetail"></div>

methods: {
      showDetail() {
      // 定义一个组件实例，可以是自己本身，也可以是$createHeaderDetail方法（header-detail组件内name的驼峰写法）
        this.headerDetailComp = this.headDetailComp || this.$createHeaderDetail({
       	$props: {
            seller: 'seller'
          }
        })
        // 调用组件内的方法
        this.headerDetailComp.show()
      }
    }

这样就完成了。

拓展：过渡动画

html: name是自己命名的class名称，用来写动画样式，不写则默认为v

<transition name="fade"></transition>

&.fade-enter-active, &.fade-leave-active
/*点进和退出时所有属性都流畅转变*/
      transition all 0.5s  
&.fade-enter, &.fade-leave-active
 /*fade-enter是指进入过渡之前的开始状态，以上属性完全透明*/
	 opacity 0
	 background $color-background

css:
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。