更新记录

1.0.9（2024-11-21） 下载此版本

1. 添加表单自定义默认值（当有缓存值时，已缓存值为准）
2. 添加onBlur、onChange事件，增强表单项之间联动性
3. 添加校验通过后、调用接口前二次弹窗，配置项提效开发
4. 添加块钱pageLoading、toast函数
5. 添加表单项禁用

1.0.8（2024-11-21） 下载此版本

TODO: 精度条、失去焦点事件、$check快捷confirm

1.0.7（2024-11-20） 下载此版本

添加自动报错提示

平台兼容性

Easy-Form：简易而强大的表单组件

背景

在插件市场中，我们常常面临表单组件功能不全或使用复杂的问题。为了解决这些痛点，我结合了十年的前端开发经验，开发了一款易用且功能全面的表单组件——Easy-Form。

前置条件

在使用Easy-Form之前，请确保已安装uview2.0。

DEMO

基础使用

<template>
    <easy-form ref="form" :list="list" v-model="value" :requiredTag="false" />
</template>

<script>
    export default {
        data() {
            return {
                value: {}  // 会根据组件类型自动添加默认值；
            }
        },
        methods: {
            list() {
                return [
                    {
                        label: '文本输入框',
                        desc: '这是额外描述',
                        descStyle: 'color:red;font-size:24rpx;',
                        type: 'input'
                    },
                    {
                        label: '文本域 ',
                        type: 'textarea',
                        maxlength: 200
                    },
                    {
                        label: '数组下拉选择',
                        type: 'select',
                        options: [{label:'张三',id:'a'},{label:'李四',id:'b'}]
                    },
                    {
                        label: '日期',
                        type: 'date',
                    }
                ]
            }
        }
    }
</script>

easy-from 属性

easy-from 方法

async function submit() {
    const valid = await this.$refs.form.$check()  // 校验表单
    if (valid) {
        this.$refs.form.$openPageLoading()  // 打开页面loading
        await this.sleep(50000)             // 调用接口
        this.$refs.form.$closePageLoading()  // 关闭页面loading
        await this.$refs.form.$toast({             // 等待成功提示完成
            type: 'success',
            message: "校验成功",
        })
        // 后续业务逻辑，如：跳转页面
    }
}

easy-from list 公有属性

表单组件额外属性

输入框-input

文本域-textarea

下拉选择-select

options、flashOptions 属性在checkbox、radio等有一维数组选项值的组件中生效

级联-cascader

下拉树-tree

上传-upload

富文本-editor