Popup 弹出层

弹出层容器，用于展示弹窗、信息提示等内容。

代码演示

基础用法

<button type="primary" @click="openPop">开启弹出框</button>
<hd-popup ref="popup">
  <view>
    这是一个简单的弹出框
  </view>
</hd-popup>

export default {
  methods: {
    openPop() {
      this.$refs.popup.open()
    }
  }
}

弹出框位置

通过type属性设置弹出位置，默认全屏弹出层(center)，可以设置top（ 顶部弹出层） 、bottom（底部弹出层） 、left（左侧弹出层）、bottom（右侧弹出层）或 center（全屏弹出层）。

<button type="primary" @click="openPop" :type="type">开启弹出框</button>
<hd-popup ref="popup">
  <view>
    这是一个简单的弹出框
  </view>
</hd-popup>

export default {
  data() {
    return {
      type: 'bottom'
    }
  },
  methods: {
    openPop() {
      this.$refs.popup.open()
    }
  }
}

关闭弹出框

通过maskClick属性控制点击蒙层是否关闭弹出框，默认允许点击蒙层关闭(maskClick为true)，当不允许点击蒙层关闭时，可以手动关闭弹出框。

<hd-popup ref="popup" maskClick="maskClick">
  <view>
    这是一个简单的弹出框
    <view v-if="!maskClick" @click="onClose">
      <!-- 关闭按钮 -->
      <hd-icon name="ic_circleclose_line" size="48rpx"></hd-icon>
    </view>
  </view>
</hd-popup>

export default {
  data() {
    return {
      maskClick: false,
      type: 'bottom'
    }
  },
  methods: {
    onClose() {
      this.$refs.popup.close()
    }
  }
}

Props

Name	Description	Type	Required	Default
animation	开启动画	Boolean	false	true
type	弹出层类型	'top（ 顶部弹出层）' / 'bottom（底部弹出层）' / 'left（左侧弹出层）'/ 'right（右侧弹出层）'/ 'center（全屏弹出层）'	false	默认值：'center'
overlay	是否显示遮罩	Boolean	false	true
maskClick	是否允许点击蒙层关闭	Boolean	false	默认值：true
backgroundColor	背景颜色	String	false	none
duration	动画时长，单位ms	Number	false	300
overlayOpacity	遮罩的透明度，0-1之间	Number	false	0.4
zIndex	自定义层级	Number	false	999

Events

Event Name	Description	Parameters
change	-	-
close	弹层关闭时触发	-
maskClick	遮罩被点击时触发	-
click	-	-

Slots

Name	Description	Default Slot Content
default	-	-