背景
需要编写一个点击 绑定点击事件的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 被删除),在过渡/动画完成之后移除。