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:′shop−cart−list′,调用时this.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'.detailposition: fixedz-index: 100top: 0left: 0width: 100%height: 100%overflow: autocolor whitebackdrop-filter: blur(10px)opacity: 1background: rgba(7, 17, 27, 0.8)&.fade-enter-active, &.fade-leave-activetransition: all 0.5s&.fade-enter, &.fade-leave-toopacity: 0background: rgba(7, 17, 27, 0).detail-wrapperwidth: 100%min-height: 100%.detail-mainmargin-top: 64pxpadding-bottom: 64px.nameline-height: 16pxtext-align: centerfont-size: 16pxfont-weight: 700.star-wrappermargin-top: 18pxpadding: 2px 0text-align: center.titledisplay: flexwidth: 80%margin: 28px auto 24px auto.lineflex: 1position: relativetop: -6pxborder-bottom: 1px solid rgba(255, 255, 255, 0.2).textpadding: 0 12px//注意这句代码，这是文字左右两端空白的关键代码font-weight: 700font-size: 14px.supportswidth: 80%margin: 0 auto.support-itemdisplay flexalign-items centerpadding: 0 12pxmargin-bottom: 12pxfont-size: 0&:last-childmargin-bottom: 0.textline-height: 16pxfont-size: 12px.bulletinwidth: 80%margin: 0 auto.contentpadding: 0 12pxline-height: 24pxfont-size: 12px.detail-closeposition: relativewidth: 32pxheight: 32pxmargin: -64px auto 0 autoclear: bothfont-size: 32px
</style>

cube-ui中create-api模块的使用相关推荐

在cube ui中使用better-scroll 自定义下拉刷新和上拉加载内容
在这次写项目中,偶然看到cube-ui组件库,看到这个ui组件库滚动盒子都是根据better-scroll封装的,在移动端上滑动效果体验比较不错,于是我决定使用cube-ui组件库,在使用过程中,在自 ...
响应式ui_在应用程序远程通知ui中响应本机
响应式ui A quick recipe to creating an interactive remote notification banner UI in a React Native app, ...
python中的log模块笔记
日志相关概念 logging模块简介使用logging提供的模块级别的函数记录日志 logging模块日志流处理流程使用logging四大组件记录日志配置logging的几种方式向日志输出中添 ...
ASP.NET中的HTTP模块和处理程序
原文来自 :http://blog.csdn.net/zztfj/article/details/5773107 在Internet时代的开端,客户端的需求非常有限:.htm文件就可以满足他们的需求. ...
Android视频编辑SDK--RDVECore来自锐动的无UI,高度抽象化API
1 RDVECore功能概述 RDVECore是锐动推出的无UI,高度抽象化API的视频编辑SDK,支持以下功能: 1.1 丰富的编辑功能 RDVECore包含了丰富的基础功能,对于编辑中的视 ...
python3安装pymysql_python3中安装PyMySQL模块
一.Python3中安装PyMySQL模块,本章节我们将向大家介绍如何在本地搭建python开发环境. Python可应用于多平台包括 Linux 和 Mac OS X. 你可以通过终端窗口输入 &q ...
Magento中如何在模块中使用多张数据表并配置多个model？
功能介绍: 引用magento开发人员的一句话: Magento has basic one resource to one table resource. 也即是一个资源对应一张数据表. 当有时候, ...
shellcode中动态定位API
定位API的原理: 所有的win_32程序都会加载ntdll.dll和kerner32.dll这两个最基础的动态链接库.如果想要在win_32平台下定位kernel32.dll中的API地址 1,首先 ...
ASP.NET Core 在 Swagger UI 中显示自定义的 Header Token
Swagger 是个好东西,对于前后端分离的网站来说,不仅是提高前后端开发人员沟通效率的利器,也大大方便了后端人员测试 API.有时候,API 中可能需要在 Header 中设置认证参数,比如 aut ...
openresty开发系列26--openresty中使用redis模块
openresty开发系列26--openresty中使用redis模块在一些高并发的场景中,我们常常会用到缓存技术,现在我们常用的分布式缓存redis是最知名的, 操作redis,我们需要引入re ...

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

cube-ui中create-api模块的使用相关推荐

最新文章

热门文章