更新记录

1.0.5（2024-11-19） 下载此版本

添加下拉tree选择器，支持单选、多选

1.0.4（2024-11-18） 下载此版本

添加富文本组件

1.0.3（2024-11-18） 下载此版本

更新文档&DEMO

TODO: 下拉tree选择器

平台兼容性

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 方法

$check-表单校验

const valid = await this.$refs.form.$check()
if (valid) {
    this.$refs.uToast.show({
        type: 'success',
        message: "校验成功",
    })
} else {
    this.$refs.uToast.show({
        type: 'error',
        message: "校验失败",
    })
}

easy-from list 公有属性

easy-from list input额外属性

easy-from textarea 额外属性

easy-from select 额外属性

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

easy-from cascader 额外属性

easy-from upload 额外属性