<view class="title">弹出位置view>

<view class="box">

<button class="btn" ontap="popup" data-position="right">右侧弹出button>

<button class="btn" ontap="popup" data-position="top">顶部弹出button>

<button class="btn" ontap="popup" data-position="bottom">底部弹出button>

<button class="btn" ontap="popup" data-position="center">中央弹出button>

<view class="title">弹窗圆角view>

<view class="box">

<button class="btn" ontap="changeround">设置{{round ? '直角' : '圆角'}}button>

<view class="title">遮罩层view>

<view class="box">

<button class="btn" ontap="changeoverlay">设置{{overlay ? '无' : '有'}}遮罩button>

<button class="btn" ontap="changeoverlaystyle" data-type="black">黑色半透明遮罩button>

<button class="btn" ontap="changeoverlaystyle" data-type="white">白色半透明遮罩button>

<button class="btn" ontap="changeoverlaystyle" data-type="blur">模糊遮罩button>

<page-container

show="{{show}}"

round="{{round}}"

overlay="{{overlay}}"

duration="{{duration}}"

position="{{position}}"

close-on-slide-down="{{false}}"

onbeforeenter="onbeforeenter"

onenter="onenter"

onentercancelled="onentercancelled"

onafterenter="onafterenter"

onbeforeleave="onbeforeleave"

onleave="onleave"

data: {

show: false,

duration: 300,

position: "right",

round: false,

overlay: true,

customstyle: "",

overlaystyle: "",

},

popup(e) {

const position = e.currenttarget.dataset.position;

let customstyle = "";

let duration = this.data.duration;

switch (position) {

case "top":

case "bottom":

customstyle = "height: 30%";

break;

case "right":

customstyle = "width: 70%; margin-left: 30%";

break;

}

this.setdata({

position,

show: true,

customstyle,

duration,

});

},

changeround() {

this.setdata({ round: !this.data.round });

},

changeoverlay() {

this.setdata({ overlay: !this.data.overlay, show: true });

},