一、什么是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创建的组件中的一个函数
}
注意:在是使用
c
r
e
a
t
e
X
X
X
创
建
组
件
时
,
后
面
的
x
x
x
必
须
是
严
格
驼
峰
形
式
且
组
件
名
用
全
是
小
写
字
母
加
连
字
符
(
如
:
n
a
m
e
:
′
s
h
o
p
−
c
a
r
t
−
l
i
s
t
′
,
调
用
时
t
h
i
s
.
createXXX创建组件时,后面的xxx必须是严格驼峰形式且组件名用全是小写字母加连字符(如:name:'shop-cart-list',调用时this.
createXXX创建组件时,后面的xxx必须是严格驼峰形式且组件名用全是小写字母加连字符(如:name:′shop−cart−list′,调用时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>