内置弹层类组件基本都是基于此组件实现，包括：、Picker、、DatePicker、、SegmentPicker、、ActionSheet。

    注： 以上组件都是基于 create-api 实现，所以在使用之前，请确保自己了解过 。

    组件

    基本用法

    2.   methods: {
    3.     showPopup(refId) {
    4.       const component = this.- refs[refId]
    5.       component.show()
    6.       setTimeout(() => {
    7.         component.hide()
    8.     }
    9.   }
    10. }

    组件默认是隐藏的，需要调用组件实例的 show() 方法才会显示，调用组件实例的 hide() 方法隐藏，这里的 showPopup() 就是做的这件事情（首先显示，1 秒钟后隐藏）

    不要背景层

    设置 mask 为 false，即不显示背景层

    显示内容 HTML

    1. <cube-popup type="my-popup" :mask="false" content="<i>My Popup Content 3</i>" ref="myPopup3">
    2. <cube-button @click="showPopup('myPopup3')">
    3.   Show Popup - with content

    只需要传入 content，内容是一段 HTML 片段

    控制位置&蒙层点击隐藏1.9.6

    1. const positions = ['top', 'right', 'bottom', 'left', 'center']
    2. let cur = 0
    3. export default {
    4.   data() {
    5.     return {
    6.       position: ''
    7.     }
    8.   },
    9.   methods: {
    10.       this.position = positions[cur++]
    11.       if (cur === positions.length) {
    12.         cur = 0
    14.       const component = this.- refs.myPopup4
    15.       component.show()
    16.       setTimeout(() => {
    17.         component.hide()
    18.       }, 2000)
    19.     }
    20.   }
    21. }

    上层封装

    这样就实现了一个上层封装的 CubeExtendPopup 组件，自带了一些样式，支持传入内容还有默认插槽，点击内容可隐藏。你可以这样使用（需要全局注册或者局部注册到使用的组件中）：

    1. <cube-extend-popup content="click here hide" ref="extendPopup"></cube-extend-popup>
    2. <cube-button @click="- refs.extendPopup.show()">
    3.   Show Extend Popup
    4. </cube-button>

    原文: