Popup 弹层

底层弹层组件，主要用于基于此组件实现上层组件封装，只提供了基础功能：指定类型、是否有背景层、显示内容（HTML）以及是否居中。

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

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

示例

组件

• 基本用法

  <cube-popup type="my-popup" ref="myPopup">
    My Popup Content 1
  </cube-popup>
  <cube-button @click="showPopup('myPopup')">
    Show Popup
  </cube-button>
  

  指定类型 type，这样方便根据类型做 class 控制，如示例，会在根元素上会增加 cube-my-popup 的 class

  export default {
    methods: {
      showPopup(refId) {
        const component = this.$refs[refId]
        component.show()
        setTimeout(() => {
          component.hide()
        }, 1000)
      }
    }
  }
  

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

• 不要背景层

  <cube-popup type="my-popup" :mask="false" ref="myPopup2">
    My Popup Content 2
  </cube-popup>
  <cube-button @click="showPopup('myPopup2')">
    Show Popup - no mask
  </cube-button>
  

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

• 显示内容 HTML

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

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

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

  <cube-popup type="my-popup" :position="position" :mask-closable="true" ref="myPopup4">My Popup Content 4</cube-popup>
  <cube-button @click="showPopup">top/right/bottom/left/center</cube-button>
  

  const positions = ['top', 'right', 'bottom', 'left', 'center']
  let cur = 0
  export default {
    data() {
      return {
        position: ''
      }
    },
    methods: {
      showPopup() {
        this.position = positions[cur++]
        if (cur === positions.length) {
          cur = 0
        }
        const component = this.$refs.myPopup4
        component.show()
        setTimeout(() => {
          component.hide()
        }, 2000)
      }
    }
  }
  

  可通过 position 控制内容出现位置，通过 mask-closable 控制点击蒙层是否关闭。

• 上层封装

  <template>
    <cube-popup type="extend-popup" ref="popup">
      <div class="cube-extend-popup-content" @click="hide">
        <slot>{{content}}</slot>
      </div>
   </cube-popup>
  </template>
  <script type="text/ecmascript-6">
    const COMPONENT_NAME = 'cube-extend-popup'
    export default {
      name: COMPONENT_NAME,
      props: {
        content: {
          type: String
        }
      },
      methods: {
        show() {
          this.$refs.popup.show()
        },
        hide() {
          this.$refs.popup.hide()
          this.$emit('hide')
        }
      }
    }
  </script>
  <style lang="stylus" rel="stylesheet/stylus">
    .cube-extend-popup
      .cube-extend-popup-content
        padding: 20px
        color: #fff
        background-color: rgba(0, 0, 0, .8)
  </style>
  

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

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

Props 配置

事件

实例方法