123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <template>
- <view class="u-page">
- <u-navbar
- title="模态框"
- @leftClick="navigateBack"
- safeAreaInsetTop
- fixed
- placeholder
- ></u-navbar>
- <u-gap
- height="20"
- bgColor="#fff"
- ></u-gap>
- <u-cell-group>
- <u-cell
- @click="showModal(index)"
- :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-modal
- :content="content"
- title="标题"
- :show="show1"
- @confirm="() => show1 = false"
- ></u-modal>
- <u-modal
- :content="content"
- :show="show2"
- @confirm="() => show2 = false"
- ></u-modal>
- <u-modal
- :content="content"
- :show="show3"
- showCancelButton
- closeOnClickOverlay
- @confirm="confirm"
- @cancel="cancel"
- @close="close"
- ></u-modal>
- <u-modal
- :content="content"
- :show="show4"
- showCancelButton
- asyncClose
- @confirm="confirm4"
- @cancel="() => show4 = false"
- ></u-modal>
- <u-modal
- :content="content"
- :show="show5"
- showCancelButton
- buttonReverse
- @confirm="() => show5 = false"
- @cancel="() => show5 = false"
- ></u-modal>
- <u-modal
- :content="content"
- title="标题"
- :show="show6"
- closeOnClickOverlay
- @confirm="() => show6 = false"
- @close="() => show6 = false"
- ></u-modal>
- <u-modal
- title="利剑出鞘,一统江湖"
- :show="show7"
- closeOnClickOverlay
- @confirm="() => show7 = false"
- >
- <image
- style="width: 80px;height: 80px;"
- src="/static/uview/common/logo.png"
- ></image>
- </u-modal>
- <u-modal
- title="标题"
- :show="show8"
- :content="content"
- closeOnClickOverlay
- showCancelButton
- >
- <u-button
- slot="confirmButton"
- text="确定"
- type="success"
- shape="circle"
- @click="show8 = false"
- ></u-button>
- </u-modal>
- <u-modal
- :content="content"
- title="标题"
- :show="show9"
- :zoom="false"
- @confirm="() => show9 = false"
- ></u-modal>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- content: '模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作',
- show1: false,
- show2: false,
- show3: false,
- show4: false,
- show5: false,
- show6: false,
- show7: false,
- show8: false,
- show9: false,
- list: [{
- title: '基础使用',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/4.png'
- },
- {
- title: '无标题',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/5.png'
- },
- {
- title: '带取消按钮',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/2.png'
- },
- {
- title: '异步关闭',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/6.png'
- },
- {
- title: '对调取消和确认按钮',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/3.png'
- },
- {
- title: '允许点击遮罩关闭',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/7.png'
- },
- {
- title: '传入slot',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/1.png'
- },
- {
- title: '自定义按钮',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/8.png'
- },
- {
- title: '淡入淡出动画',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/9.png'
- }
- ]
- }
- },
- methods: {
- showModal(index) {
- this[`show${index + 1}`] = true
- },
- navigateBack() {
- uni.navigateBack()
- },
- confirm4() {
- setTimeout(() => {
- this.show4 = false
- }, 2000)
- },
- confirm() {
- this.show3 = false
- console.log('confirm');
- },
- cancel() {
- this.show3 = false
- console.log('cancel');
- },
- close() {
- this.show3 = false
- console.log('close');
- }
- }
- }
- </script>
- <style lang="scss">
- .u-page {
- padding: 0;
- }
- </style>
|