2021-12-21 09:51:43 +08:00

87 lines
2.1 KiB
Plaintext

<demo-block title="基础用法">
<van-cell title="展示弹出层" is-link bind:click="showBasic" />
<van-popup
show="{{ show.basic }}"
custom-style="padding: 30px 50px"
bind:close="hideBasic"
>
内容
</van-popup>
</demo-block>
<demo-block title="弹出位置">
<van-cell title="顶部弹出" is-link bind:click="showTop" />
<van-cell title="底部弹出" is-link bind:click="showBottom" />
<van-cell title="左侧弹出" is-link bind:click="showLeft" />
<van-cell title="右侧弹出" is-link bind:click="showRight" />
<van-popup
show="{{ show.top }}"
position="top"
custom-style="height: 20%"
bind:close="hideTop"
/>
<van-popup
show="{{ show.bottom }}"
position="bottom"
custom-style="height: 20%"
bind:close="hideBottom"
/>
<van-popup
show="{{ show.left }}"
position="left"
custom-style="width: 20%; height: 100%"
bind:close="hideLeft"
/>
<van-popup
show="{{ show.right }}"
position="right"
custom-style="width: 20%; height: 100%"
bind:close="hideRight"
/>
</demo-block>
<demo-block title="关闭图标">
<van-cell title="关闭图标" is-link bind:click="showCloseIcon" />
<van-cell title="自定义图标" is-link bind:click="showCustomCloseIcon" />
<van-cell title="图标位置" is-link bind:click="showCustomIconPosition" />
<van-popup
show="{{ show.closeIcon }}"
closeable
position="bottom"
custom-style="height: 20%"
bind:close="hideCloseIcon"
/>
<van-popup
show="{{ show.customCloseIcon }}"
closeable
close-icon="close"
position="bottom"
custom-style="height: 20%"
bind:close="hideCustomCloseIcon"
/>
<van-popup
show="{{ show.customIconPosition }}"
closeable
close-icon-position="top-left"
position="bottom"
custom-style="height: 20%"
bind:close="hideCustomIconPosition"
/>
</demo-block>
<demo-block title="圆角弹窗">
<van-cell title="圆角弹窗" is-link bind:click="showRound" />
<van-popup
show="{{ show.round }}"
round
position="bottom"
custom-style="height: 20%"
bind:close="hideRound"
/>
</demo-block>