123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- <template>
- <view>
- <u-navbar
- title="弹窗"
- @leftClick="navigateBack"
- safeAreaInsetTop
- fixed
- placeholder
- ></u-navbar>
- <u-gap
- height="20"
- bgColor="#fff"
- ></u-gap>
- <u-cell-group>
- <u-cell
- :titleStyle="{fontWeight: 500}"
- @click="openPopup(item.popupData)"
- :title="item.title"
- v-for="(item, index) in list"
- :key="index"
- isLink
- >
- <image
- slot="icon"
- class="u-cell-icon"
- :src="item.iconUrl"
- mode="widthFix"
- ></image>
- </u-cell>
- </u-cell-group>
- <u-popup
- :safeAreaInsetBottom="true"
- :safeAreaInsetTop="true"
- :mode="popupData.mode"
- :show="show"
- :round="popupData.round"
- :overlay="popupData.overlay"
- :borderRadius="popupData.borderRadius"
- :closeable="popupData.closeable"
- :closeOnClickOverlay="popupData.closeOnClickOverlay"
- @close="close"
- @open="open"
- >
- <view
- class="u-popup-slot"
- :style="{
- width: ['bottom', 'top'].includes(popupData.mode) ? '750rpx' : '200px',
- marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0',
- }"
- >
- <u-button
- type="success"
- text="点我关闭"
- customStyle="width: 200rpx"
- @click="show = !show"
- ></u-button>
- </view>
- </u-popup>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- show: false,
- popupData: {
- overlay: true,
- mode: 'bottom',
- borderRadius: '',
- closeable: true,
- closeOnClickOverlay: true
- },
- list: [{
- popupData: {
- overlay: true,
- mode: 'top',
- closeOnClickOverlay: true
- },
- title: '顶部弹出',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeTop.png'
- },
- {
- popupData: {
- overlay: true,
- mode: 'right',
- closeOnClickOverlay: true
- },
- title: '右侧弹出',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeRight.png'
- },
- {
- popupData: {
- overlay: true,
- mode: 'bottom',
- closeOnClickOverlay: true
- },
- title: '底部弹出',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeBottom.png'
- },
- {
- popupData: {
- overlay: true,
- mode: 'left',
- closeOnClickOverlay: true
- },
- title: '左侧弹出',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeLeft.png'
- },
- {
- popupData: {
- overlay: true,
- mode: 'center',
- round: 10,
- closeOnClickOverlay: true
- },
- title: '居中弹出',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeCenter.png'
- },
- {
- popupData: {
- overlay: true,
- mode: 'bottom',
- round: 10,
- closeOnClickOverlay: true
- },
- title: '显示圆角',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showRadis.png'
- },
- {
- popupData: {
- overlay: true,
- mode: 'bottom',
- closeable: false,
- closeOnClickOverlay: false
- },
- title: '禁止点击遮罩关闭',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/noClose.png'
- },
- {
- popupData: {
- overlay: true,
- mode: 'bottom',
- closeable: true,
- closeOnClickOverlay: true
- },
- title: '显示关闭按钮',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png'
- }
- ]
- }
- },
- methods: {
- openPopup(popupData) {
- this.popupData = popupData
- uni.$u.sleep().then(() => {
- this.show = !this.show
- })
- },
- navigateBack() {
- uni.navigateBack()
- },
- open() {
- // console.log('open');
- },
- close() {
- this.show = false
- // console.log('close');
- }
- }
- }
- </script>
- <style lang="scss">
- .u-popup-slot {
- width: 200px;
- height: 150px;
- @include flex;
- justify-content: center;
- align-items: center;
- }
- </style>
|