弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
- 弹出层的内容通过
slot传入，由用户自定义 - 通过
show绑定一个布尔值的变量控制弹出层的打开和收起
<template> <view> <u-popup :show="show" @close="close" @open="open"> <view> <text>出淤泥而不染，濯清涟而不妖</text> </view> </u-popup> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false } }, methods: { open() { // console.log('open'); }, close() { this.show = false // console.log('close'); } } } </script>
copy
#设置弹出层的方向
- 可以通过
mode参数设置，可以设置为left、top、right、bottom、center
<template> <u-popup :show="show" mode="top" @close="close" @open="open"> <view> <text>人生若只如初见，何事秋风悲画扇</text> </view> </u-popup> </template> <script> export default { data() { return { show: false } }, methods: { open() { // console.log('open'); }, close() { this.show = false // console.log('close'); } } } </script>
copy
#设置弹出层的圆角
需要将round设置为圆角值(仅对mode = top | bottom | center有效)。
<template> <u-popup :show="show" :round="10" mode="top" @close="close" @open="open"> <view> <text>人生若只如初见，何事秋风悲画扇</text> </view> </u-popup> </template> <script> export default { data() { return { show: false } }, methods: { open() { // console.log('open'); }, close() { this.show = false // console.log('close'); } } } </script>
