弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义。
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>