更新记录

1.0.0(2023-08-02) 下载此版本

初次提交


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.7 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

YR-ConfirmDialog

IOS风格确认对话框

预览

使用方式:

vue2

<template>
    <view class="content">
        <button @click="handleOpen">{{title}}</button>
        <YR-ConfirmDialog ref="yrmodel"></YR-ConfirmDialog>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            handleOpen() {
                // 默认 点击确认按钮会执行then,取消执行catch
                this.$refs.yrmodel.open({
                    content: '用户名或密码错误!',
                    wanted: 1
                }).then(() => {
                }).catch(() => {

                })
                // 自定义按钮 只会执行then,返回参数为按钮下标及按钮
                this.$refs.yrmodel.open({
                    content: '密码错误!',
                    customButtons: [
                        {
                            text: '重新输入'
                        },
                        {
                            text: '通过邮箱找回密码'
                        },
                        {
                            text: '通过手机找回账号'
                        }
                    ],
                    wanted: 1
                }).then((idx, buttton) => {
                    console.log(idx, button)
                })
            }
        }
    }
</script>

使用方式是通过$refs去控制的,所有参数都是通过open函数传入,这样会方便连续调用并将与Dialog相关的变量分离。

vue3的使用方式类似。

参数

props

名称 描述 类型 必填
top 打开的对话框垂直方向偏移,默认50%垂直居中 String(50px, 50%)
left 打开的对话框水平方向偏移,默认50%水平居中 String(50px, 50%)

interface

open(params)
打开对话框,params参数如下:
名称 描述 类型 必填 默认值
title 标题文本 String Tip
content 主体内容 String、Html
confirmText 确认按钮文本 String Confirm
cancelText 取消按钮文本 String Cancel
showConfirm 是否显示确认按钮 Boolean true
wanted 高亮按钮下标 Number 0
customButtons 自定义按钮 [{text: String, color: String}] []
animate 动画 bounceIn、fadeIn、flipInX、zoomIn bounceIn

动画来源取自animate.css,想使用其他动画可自行在项目里面添加修改

目前功能比较简单,有任何建议请在评论区提出讨论。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问