uview-plus

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

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

  • 弹出层的内容通过slot传入，由用户自定义
  • 通过show绑定一个布尔值的变量控制弹出层的打开和收起，通过v-model:show双向绑定简化使用。
<template>
	<view>
		<up-popup :show="show" @close="close" @open="open">
        <view>
            <text>出淤泥而不染，濯清涟而不妖</text>
        </view>
		</up-popup>
    <up-popup v-model:show="show">
        <view>
            <text>出淤泥而不染，濯清涟而不妖</text>
        </view>
		</up-popup>
		<up-button @click="show = true">打开</up-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>

<script>
	export default {
      data() {
        return {
          show: false
        }
      }, 
      methods: {
        open() {
          // console.log('open');
        },
        close() {
          this.show = false
          // console.log('close');
        }
      }
	}
</script>

# 设置弹出层的方向

  • 可以通过mode参数设置，可以设置为left、top、right、bottom、center
<template>
	<up-popup :show="show" mode="top"  @close="close" @open="open">
        <view>
            <text>人生若只如初见，何事秋风悲画扇</text>
        </view>
	</up-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>

<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      open() {
        // console.log('open');
      },
      close() {
        this.show = false
        // console.log('close');
      }
    }
  }
</script>

# 设置弹出层的圆角

需要将round设置为圆角值(仅对mode = top | bottom | center有效)。

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

<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      open() {
        // console.log('open');
      },
      close() {
        this.show = false
        // console.log('close');
      }
    }
  }
</script>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
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 -
safeAreaInsetBottom 是否为留出底部安全距离 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 弹出层收起 - -

← Modal 模态框 →