更新记录

1.0.4（2024-03-15）

优化文档信息

1.0.3（2024-03-15）

修复文档错乱问题

1.0.2（2024-03-15）

1. 新增按钮颜色自定义功能
2. 新增文档使用示例

平台兼容性

ug-modal 模态框

自定义Modal弹框组件，支持提示信息、输入框（支持校验）、自定义按钮、按钮Loading、插槽等功能

平台兼容

使用vue2语法，作者仅测试微信小程序，其它兼容请自行测试

该组件有以下依赖（使用了uView2.x的同学可以直接跳过，没有使用的同学安装uView即可）

• 依赖uni-ui的组件：uni-easyinput
• 依赖vView的组件：u-popup、u-button
• 依赖uni.scss中的样式变量：$uni-font-size-base、$uni-font-size-sm、$uni-text-color、$uni-bg-color-grey、$uni-color-error

使用方式

通过浏览器导入HBuilderX中后可以直接在页面使用

// 使用组件，并给ref
<ug-modal ref="ugModal"></ug-modal>

// 在方法中直接调用open方法即可
this.$refs.ugModal.open()

使用说明

open方法支持传入一个对象参数，该参数可以不传，如：this.$refs.ugModal.open({})

参数属性：

参数对象中rules的值是一个数组，数组的元素是对象，每一个对象都是一个校验规则，支持多个校验规则，对象的属性如下：

插槽

在组件中直接写内容即可

<ug-modal ref="ugModalSlot">
    <view>这是一个插槽</view>
    <view>这是一个插槽</view>
    <view>这是一个插槽</view>
    <view>这是一个插槽</view>
</ug-modal>

使用示例

test.vue

<template>
    <view>
        <u-button type="success" @click="remind">普通提醒</u-button>
        <u-button type="success" @click="submit">加载状态</u-button>
        <u-button type="success" @click="iptRequired">输入框带校验</u-button>

        <ug-modal ref="ugModal"></ug-modal>
    </view>
</template>

<script>
    export default {
        methods: {
            // 普通提醒
            remind() {
                this.$refs.ugModal.open({
                    title: '提醒',
                    content: '这是一个普通提醒'
                })
            },

            // 加载状态
            submit() {
                this.$refs.ugModal.open({
                    title: '提醒',
                    content: '确定删除？',
                    confirm() {
                        return new Promise(resolve => {
                            setTimeout(resolve, 2000)
                        })
                    }
                })
            },

            // 输入框，校验
            iptRequired() {
                this.$refs.ugModal.open({
                    title: '提醒',
                    type: 'input',
                    placeholder: '请输入你的名字',
                    rules: [{required: true}],
                    confirm(inputtValue) {
                        return new Promise(resolve => {
                            console.log(inputtValue)
                            resolve()
                        })
                    }
                })
            }
        }
    }
</script>

其它

• 该模态框弹层层级是10080