uniapp 常用弹窗

1. action-sheet 弹窗

data() {
    return {
        buttonRect: {}
    }
},
methods: {
    actionSheetTap() {
        const that = this
        uni.showActionSheet({
            title: '标题',
            itemList: ['item1', 'item2', 'item3', 'item4'],
            popover: {
                // 104: navbar + topwindow 高度，暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
                top: that.buttonRect.top + 104  + that.buttonRect.height,
                left: that.buttonRect.left + that.buttonRect.width / 2
            },
            success: (e) => {
                console.log(e.tapIndex);
                uni.showToast({
                    title: "点击了第" + e.tapIndex + "个选项",
                    icon: "none"
                })
            }
        })
    },
    // #ifdef H5
    getNodeInfo() {
        uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
            const rect = ret[0]
            if (rect) {
                this.buttonRect = rect
            }
        });
    }
    // #endif
}

2. alert 弹窗

uni.showModal({
    title: "alert 弹窗标题",
    content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
    showCancel: false,
    confirmText: "确定",
    confirmColor: "#00ffff",
    success(res) {
        if (res.confirm) {
            console.log('确认')                                   
        }
    }
})

3. confirm 弹窗

uni.showModal({
    title: "confirm 弹窗标题",
    content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
    confirmText: "确定",
    confirmColor: "#667799",
    cancelText: "取消",
    cancelColor: "#00ffff",
    success(res) {
        if (res.confirm) {
            console.log('确认')                                   
        } else {
            console.log('取消')
        }
    }
})

4. loading 弹窗

methods: {
    showLoading: function() {
        uni.showLoading({
            title: 'loading'
        });

        // #ifdef MP-ALIPAY
        this._showTimer && clearTimeout(this._showTimer);
        this._showTimer = setTimeout(() => {
            this.hideLoading();
        }, 3000)
        // #endif
    },
    hideLoading: function() {
        uni.hideLoading();
    }
}
// #ifdef MP-ALIPAY
,
onUnload() {
    this._showTimer && clearTimeout(this._showTimer);
}

5. toast 弹窗

// #ifdef MP-ALIPAY
onUnload() {
    this._showTimer && clearTimeout(this._showTimer);
},
// #endif
methods: {
    toastTap: function () {
        uni.showToast({
            title: "标题",
            icon: "loading",
            duration: 5000 ,
            position:'bottom',
            // image: "../../../static/uni.png" // image和icon不可同时显示
        })
        // #ifdef MP-ALIPAY
        this._showTimer = setTimeout(() => {
            // icon 是 loading 时，showToast 实际执行的是 showLoading
            my.hideLoading()
            // 执行完所有代码再清除定时器
            clearTimeout(this._showTimer);
        }, 3000)
        // #endif
    },
    // #endif
    hideToast: function () {
        uni.hideToast()
    }
}