uni-app弹窗的使用

1、u-popup
只是一个弹出层,如何实现全看自己
参考:Popup 弹出层 | uView - 多平台快速开发的UI框架 - uni-app UI框架

u-popup

<u-popup v-model="appear" mode="center" length="90%" :closeable="true" border-radius="20"></u-popup>

2、uni-app组件
该组件在ios小程序中无法显示确定和取消的按钮的文字。

                        uni.$showModal.dialog({
                            _this: this,
                            title: '获取定位失败',
                            content: err.errCode == 2 || err.errMsg.indexOf('fail auth deny') >
                                -1 ?
                                '请打开手机定位功能' : '请开启地理位置授权',
                            confirmText: err.errCode == 2 || err.errMsg.indexOf(
                                    'fail auth deny') > -
                                1 ? '好的' : '重新获取',
                            cancelColor: 'black',
                            confirmColor: 'black',
                            success: (res) => {
                                let status = true
                                status = res.confirm && !err.errCode
                                if (status) {
                                    uni.openSetting({
                                        scope: 'scope.userLocation',
                                        success: (res) => {
                                            this.chooseLocation()
                                        },
                                        fail: () => {}
                                    })
                                }
                            },
                            fail: () => {}
                        })

3、u-model
参考:Modal 模态框 | uView - 多平台快速开发的UI框架 - uni-app UI框架

<template>
    <view>
        <u-modal v-model="show" :content="content"></u-modal>
        <u-button @click="open">
            打开模态框
        </u-button>
    </view>
</template>
    
<script>
    export default {
        data() {    
            return {
                show: false,
                content: '东临碣石,以观沧海'
            }
        },
        methods: {
            open() {
                this.show = true;
            }
        }
    }
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。