cube-ui中create-api模块的使用

一、什么是create-api模块，它又有哪些功能呢
答：create-api模块是cubeui组件库中提供的一种动态调用组件的方法，其原理是将组件实例挂载到body对象下。
二、使用方法
1.首先创建在src目录下创建register.js文件，写入如下代码

import {createAPI} from 'cube-ui'
import Vue from 'vue'
import HeaderDetail from './components/header-detail/header-detail.vue'
createAPI(Vue,HeaderDetail) //固定语法，第一个参数是vue实例，第二个参数是引入的组件

2.在某个控制组件显示与消失的组件中写如下代码

showDetail(){
				this.headerdetail = this.headerdetail || this.$createHeaderDetail({//this.headerdetail是组件实例，这句代码意思是如果this.headerdetail存在就直接返回这个实例，不存在就创建一个实例
					$props:{
						seller:'seller'
					}
				})
				this.headerdetail.show()//show是被上面createAPI创建的组件中的一个函数
			}

注意：在是使用$createXXX创建组件时，后面的xxx必须是严格驼峰形式且组件名用全是小写字母加连字符(如：name{:}^{\prime }shop-cart-lis{t}^{\prime },调用时this.$createShopCartList,否则会报this.$createxxx is not a function 错误）
最后附上被面createAPI创建的组件代码

<template>
	<transition name="fade">
		<div  class="detail" v-show="visible">
			<div class="detail-wrapper clearfix">
				<div class="detail-main">
					<h1 class="name">{{seller.name}}</h1>
					<div class="star-wrapper">
						<star :size="48" :grade="seller.score"></star>
					</div>
					<div class="title">
						<div class="line"></div>
						<div class="text">优惠信息</div>
						<div class="line"></div>
					</div>
					<ul v-if="seller.supports" class="supports">
						<li class="support-item" v-for="(item,index) in seller.supports" :key="index">
							<Supportico :size="2" :type="item.type"></Supportico>
							<span class="text">{{item.description}}</span>
						</li>
					</ul>
					<div class="title">
						<div class="line"></div>
						<div class="text">商家公告</div>
						<div class="line"></div>
					</div>
					<div class="bulletin">
						<p class="content">{{seller.bulletin}}</p>
					</div>
				</div>
			</div>
			<div class="detail-close" @click="hideDetail">
				<i class="icon-close" ></i>
			</div>
		</div>
	</transition>
</template>

<script>
	import star from '../star/star.vue'
	import Supportico from '../support-ico/supportico.vue'
	export default {
		name:"header-detail",
		props: {
			seller:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
			visible:false
			}
		},
		components: {
			star,
			Supportico
			
			
		},
		methods: {
			show(){
				this.visible = true
			},
			hideDetail(){
				this.visible = false
			}
		},
		mounted() {},
		created() {},
		watch: {}
	}
</script>

<style scoped lang="stylus">
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'
    .detail
      position: fixed
      z-index: 100
      top: 0
      left: 0
      width: 100%
      height: 100%
      overflow: auto
      color white
      backdrop-filter: blur(10px)
      opacity: 1
      background: rgba(7, 17, 27, 0.8)
      &.fade-enter-active, &.fade-leave-active
        transition: all 0.5s
      &.fade-enter, &.fade-leave-to
        opacity: 0
        background: rgba(7, 17, 27, 0)
      .detail-wrapper
        width: 100%
        min-height: 100%
        .detail-main
          margin-top: 64px
          padding-bottom: 64px
          .name
            line-height: 16px
            text-align: center
            font-size: 16px
            font-weight: 700
          .star-wrapper
            margin-top: 18px
            padding: 2px 0
            text-align: center
          .title
            display: flex
            width: 80%
            margin: 28px auto 24px auto
            .line
              flex: 1
              position: relative
              top: -6px
              border-bottom: 1px solid rgba(255, 255, 255, 0.2)
            .text
              padding: 0 12px//注意这句代码，这是文字左右两端空白的关键代码
              font-weight: 700
              font-size: 14px

          .supports
            width: 80%
            margin: 0 auto
            .support-item
              display flex
              align-items center
              padding: 0 12px
              margin-bottom: 12px
              font-size: 0
              &:last-child
                margin-bottom: 0
              .text
                line-height: 16px
                font-size: 12px
          .bulletin
            width: 80%
            margin: 0 auto
            .content
              padding: 0 12px
              line-height: 24px
              font-size: 12px
      .detail-close
        position: relative
        width: 32px
        height: 32px
        margin: -64px auto 0 auto
        clear: both
        font-size: 32px
</style>