Popup 弹出层

弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义

平台差异说明

App(vue)	App(nvue)	H5	微信小程序
√	√	√	√

基本使用

• 弹出层的内容通过slot传入，由用户自定义
• 通过v-model/show绑定一个布尔值的变量控制弹出层的打开和收起

<template>
  <view>
    <su-popup :show="show" @close="close" @open="open">
      <view>
        <text>出淤泥而不染，濯清涟而不妖</text>
      </view>
    </su-popup>
    <su-popup v-model:show="show">
      <view>
        <text>出淤泥而不染，濯清涟而不妖</text>
      </view>
    </su-popup>
    <su-button @click="show = true">打开</su-button>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  // 创建响应式数据
  const show = ref(false)

  // 定义方法
  function open() {
    // 打开逻辑，比如设置 show 为 true
    show.value = true
    // console.log('open');
  }

  function close() {
    // 关闭逻辑，设置 show 为 false
    show.value = false
    // console.log('close');
  }
</script>

设置弹出层的方向

• 可以通过mode参数设置，可以设置为left、top、right、bottom、center

<template>
  <su-popup :show="show" mode="top" @close="close" @open="open">
    <view>
      <text>人生若只如初见，何事秋风悲画扇</text>
    </view>
  </su-popup>
</template>

<script setup>
  import { ref } from 'vue'

  // 创建响应式数据
  const show = ref(false)

  // 定义方法
  function open() {
    // 打开逻辑，比如设置 show 为 true
    show.value = true
    // console.log('open');
  }

  function close() {
    // 关闭逻辑，设置 show 为 false
    show.value = false
    // console.log('close');
  }
</script>

设置弹出层的圆角

可以给round设置为圆角值(仅对mode = top | bottom | center有效)。

<template>
  <su-popup :show="show" :round="10" mode="top" @close="close" @open="open">
    <view>
      <text>人生若只如初见，何事秋风悲画扇</text>
    </view>
  </su-popup>
</template>

<script setup>
  import { ref } from 'vue'

  // 创建响应式数据
  const show = ref(false)

  // 定义方法
  function open() {
    // 打开逻辑，比如设置 show 为 true
    show.value = true
    // console.log('open');
  }

  function close() {
    // 关闭逻辑，设置 show 为 false
    show.value = false
    // console.log('close');
  }
</script>

示例源码

点击可以查看 右侧演示页面的源码

API

Props

注意：props中没有控制弹窗打开与收起的参数，因为这是通过v-model绑定变量实现的，见上方说明。

参数	说明	类型	默认值	可选值
show	是否展示弹窗	Boolean	false	true
overlay	是否显示遮罩	Boolean	true	false
mode	弹出方向	String	bottom	top / right / bottom / center
duration	遮罩打开或收起的动画过渡时间，单位ms	String | Number	300	-
closeable	是否显示关闭图标	Boolean	false	true
overlayStyle	遮罩自定义样式，一般用于修改遮罩颜色，如：{background: 'rgba(3, 100, 219, 0.5)'}	Object | String	-	-
overlayOpacity	遮罩透明度，0-1之间，勿与overlayStyle共用	Number | String	0.5	-
closeOnClickOverlay	点击遮罩是否关闭弹窗（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）	Boolean	true	false
zIndex	弹出层的z-index值	Number | String	10075	-
safe-area-inset-bottom	是否开启底部安全区适配	Boolean	true	false
safeAreaInsetTop	是否留出顶部安全区适配	Boolean	false	true
closeIconPos	自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角	String	top-right	top-left / bottom-left / bottom-right
round	设置圆角值，仅对mode = top | bottom | cener有效	Number | String	0	-
zoom	当mode=center时 是否开启缩放	Boolean	true	false
bgColor	背景色，一般用于特殊弹窗内容场景，设置为transparent可去除默认的白色背景	String	-	-
customStyle	用户自定义样式	Object	-	-

Event

事件名	说明	回调参数	版本
open	弹出层打开	-	-
close	弹出层收起	-	-