更新记录

1.0.4（2025-08-15）

修复bug

1.0.3（2025-08-07）

增加slider控件

1.0.2（2025-08-07）

增加DataSelect控件

平台兼容性

uni-app

其他

next-forms --低代码表单

请使用源码授权版，普通授权版的插件被官方进行加密，加密后插件有问题，如果试用源码授权版有任何问题可以*** ： 455-948-571

遇到问题或有建议可以加入1已满>(455948571)反馈qQ ： 455-948-571
遇到问题或有建议可以加入2(578935043)反馈qQ ： 578-935-043
如果觉得组件不错，给五星鼓励鼓励咯！

注意

作者不介意你对组件源码进行改造使用，为了开源更加高效，谢谢你的配合；为了节省不必要的沟通浪费，以下情况请不要再反馈给作者，请自行解决；

在这感各位的理解，我支持开源，但是作者时间有限；谢谢各位的配合；在这里期望我写的小小插件能为你提供便捷；

1.如果你对源码进行了修改使用，请不需要对作者做任何的反馈，作者确实没有空陪你做技术分析解答；
2.如果你引入插件，连插件是否有正常被uniapp框架识别解析都不清楚，请你换个插件使用；
3.如果你引入插件，针对自己项目进行功能改造的，请自行仔细阅读源码并了解其原理，自行改造；这里作者不愿意浪费过多时间进行技术解答；
4.如果你不想进行全局加载next-tree，需要按需加载；next-tree中有相关依赖的组件，需要你自行在组件内部单独引入；依赖组件可以在package.json中找到；
5.理论上作者不再解决由于本地开发环境问题所导致的插件使用问题，请自行到uniapp官网学习解决；

关注作者的动态

点击进入主页，关注作者

关注作者其他开源

npm开源包：npm; github：github;

使用demo使用提示：

使用demo；在下载的源码中存在一个userDemo的文件目录，里面有vue2和vue3的使用demo。

插件内有字体文件源文件，如果需要私域部署的请自行部署并更新style.css里面的引用路径即可。

<template>
<next-forms 
    primaryColor="#ed7d31" 
    validateTrigger="bind" 
    labelPosition="left" 
    labelAlign="left" 
    labelWidth="180rpx" 
    :border="false"
    :schemas="schemas"
>
    <template #compSlotA="{field, formModel}">
        <u-input type="text" v-model="formModel[field]" placeholder="请输入年龄" />
    </template>
</next-forms>
</template>

vue3 + ts 使用

<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import { ref, unref } from "vue";

const reader = ref(false);
const schemas = ref([
    {
        label: "姓名",
        field: "name",
        component: 'Input',
        componentProps: {

        },
        rules:[
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: '请填写姓名',
            },
            // 对name字段进行长度验证
            {
                minLength: 3,
                maxLength: 5,
                errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
            }
        ]
    },
    {
        label: "密码",
        field: "password",
        required: true,
        component: 'Input',
        componentProps: {
            type: 'password',
        }
    },
    {
        label: "手机号码",
        field: "phone",
        required: true,
        component: 'Input',
        defaultValue: '***',
        componentProps: {
            type: 'number'
        }
    },
    {
        label: "说明",
        field: "remark",
        required: true,
        component: 'Input',
        componentProps: {
            type: 'textarea',
            clearable: true
        }
    },
    {
        label: "来源",
        field: "resoure",
        required: false,
        component: 'DataCheckbox',
        defaultValue: 3,
        componentProps: {
            mode: 'default',
            multiple: false,
            localdata: [
                {
                    text: '腾讯',
                    value: 1
                },
                {
                    text: '阿里',
                    value: 2
                },
                {
                    text: '京东',
                    value: 3
                },
                // {
                //  text: '百度',
                //  value: 4
                // },
                // {
                //  text: '鑫泽',
                //  value: 6
                // },
                // {
                //  text: '抖音',
                //  value: 7
                // },
            ]
        }
    },
    {
        label: "其他",
        field: "other",
        required: true,
        componentSlot: 'compSlotA',
        defaultValue: 34234,
        rules:[
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: '请填写其他',
            }
        ],
    }
]);
const formRef = ref()
const formData = ref({
    name: '',
    age: ''
})
const rules = ref({
    // 对name字段进行必填验证
    name: {
        // name 字段的校验规则
        rules:[
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: '请填写姓名',
            },
            // 对name字段进行长度验证
            {
                minLength: 3,
                maxLength: 5,
                errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
            }
        ],
        // 当前表单域的字段中文名，可不填写
        label:'姓名',
        validateTrigger:'submit'
    }
})
function submit() {
    unref(formRef).validate().then(res => {
        console.log(11111111, res);
        console.log(333333333, unref(formData));
    })
}
onShow(() => {
    setTimeout(() => {
        reader.value = true;
    }, 2000)
})
</script>
<style lang="scss">
</style>

vue2 使用

<template>
    <next-forms
        primaryColor="#ed7d31" 
        validateTrigger="bind" 
        labelPosition="left" 
        labelAlign="left" 
        labelWidth="180rpx" 
        :border="false"
        :schemas="schemas"
    >
        <template #compSlotA="{field, formModel}">
            <u-input type="text" v-model="formModel[field]" placeholder="请输入年龄" />
        </template>
    </next-forms>
</template>

<script>
export default {
    data () {
        return {
            rules: {
                // 对name字段进行必填验证
                name: {
                    // name 字段的校验规则
                    rules:[
                        // 校验 name 不能为空
                        {
                            required: true,
                            errorMessage: '请填写姓名',
                        },
                        // 对name字段进行长度验证
                        {
                            minLength: 3,
                            maxLength: 5,
                            errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
                        }
                    ],
                    // 当前表单域的字段中文名，可不填写
                    label:'姓名',
                    validateTrigger:'submit'
                }
            },
            formData: {},
            schemas: [
                {
                    label: "姓名",
                    field: "name",
                    component: 'Input',
                    componentProps: {

                    },
                    rules:[
                        // 校验 name 不能为空
                        {
                            required: true,
                            errorMessage: '请填写姓名',
                        },
                        // 对name字段进行长度验证
                        {
                            minLength: 3,
                            maxLength: 5,
                            errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
                        }
                    ]
                },
                {
                    label: "密码",
                    field: "password",
                    required: true,
                    component: 'Input',
                    componentProps: {
                        type: 'password',
                    }
                },
                {
                    label: "手机号码",
                    field: "phone",
                    required: true,
                    component: 'Input',
                    defaultValue: '***',
                    componentProps: {
                        type: 'number'
                    }
                },
                {
                    label: "说明",
                    field: "remark",
                    required: true,
                    component: 'Input',
                    componentProps: {
                        type: 'textarea',
                        clearable: true
                    }
                },
                {
                    label: "来源",
                    field: "resoure",
                    required: false,
                    component: 'DataCheckbox',
                    defaultValue: 3,
                    componentProps: {
                        mode: 'default',
                        multiple: false,
                        localdata: [
                            {
                                text: '腾讯',
                                value: 1
                            },
                            {
                                text: '阿里',
                                value: 2
                            },
                            {
                                text: '京东',
                                value: 3
                            },
                            // {
                            //  text: '百度',
                            //  value: 4
                            // },
                            // {
                            //  text: '鑫泽',
                            //  value: 6
                            // },
                            // {
                            //  text: '抖音',
                            //  value: 7
                            // },
                        ]
                    }
                },
                {
                    label: "其他",
                    field: "other",
                    required: true,
                    componentSlot: 'compSlotA',
                    defaultValue: 34234,
                    rules:[
                        // 校验 name 不能为空
                        {
                            required: true,
                            errorMessage: '请填写其他',
                        }
                    ],
                }
            ]
        }
    },
    methods: {

    },
    created() {
    }
}
</script>
<style lang="scss">
    .line-block {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .img {
            width: 40rpx;
            height: 40rpx;
            border-radius: 10rpx;
            margin: 0 20rpx;
        }
    }
</style>

参数

本插件测试支持uni-app,uni-app X, vue2/vue3, app平台, 微信小程序, H5等；

next-forms props说明

schemas配置说明

schema [] 列描述数据对象，是 schemas 中的一项。

schema props

component: Input(Input控件说明)

component: DataCheckbox(DataCheckbox控件说明)

component: Switch(Switch控件说明)

component: DataSelect(DataSelect控件说明)

component: Slider(Slider控件说明)