更新记录

1.0.1（2022-12-08） 下载此版本

1.0.1

1.0.0（2022-12-08） 下载此版本

1.0.0

平台兼容性

zy-form 表单

zy-form 表单参数属性

zy-form 表单formList内参数属性

zy-form 事件

校验表单方法：this.$refs.formList.validate()

zy-form 使用方式

<template>
    <view>
        <zyForm ref="formList" :formList="formList" :formData='formData' border></zyForm>
        <button @click="submit" class="btn">提 交</button>
    </view>
</template>
<script>
    import zyForm from '@/components/zy-form/index.vue'
    export default {
        components: {
            zyForm
        },
        data() {
            return {
                formList: [{
                    label: '姓名',
                    key: 'name'
                }, {
                    label: '年龄',
                    key: 'age',
                    unit: '岁'
                }, {
                    label: '性别',
                    key: 'sex',
                    type: 'radio',
                    radioItem: [{
                        value: 'male',
                        name: '男'
                    }, {
                        value: 'female',
                        name: '女'
                    }],
                    current: 0,
                    required: true
                }, {
                    label: '简介',
                    key: 'introdue',
                    type: 'textarea',
                    placeholder:'请输入简介'
                }, {
                    label: '兴趣',
                    key: 'hobby',
                    type: 'checkbox',
                    checkboxItem: [{
                        value: '0',
                        name: '羽毛球'
                    }, {
                        value: '1',
                        name: '篮球'
                    }, {
                        value: '2',
                        name: '乒乓球'
                    }, {
                        value: '3',
                        name: '保龄球'
                    }]
                }, {
                    label: '职业',
                    key: 'occupation',
                    type: 'input',
                    disabled:true
                }, {
                    label: '性格',
                    key: 'character',
                    type: 'select',
                    selectList: [{
                        label: "开朗",
                        value: "0"
                    }, {
                        label: "活泼",
                        value: "1"
                    }, {
                        label: "高冷",
                        value: "2"
                    }]
                }, {
                    label: '验证码',
                    key: 'code',
                    labelWidth: '220',
                    type: 'input',
                    btnDisabled: false,
                    btn: '获取',
                    handle: this.getCode,
                    required: true
                }, {
                    label: '停留时间',
                    labelWidth: '220',
                    key: 'date',
                    type: 'datetime',
                }],
                formData: {
                    name: '小明',
                    age: '18',
                    sex: 'male',
                    introdue: '',
                    hobby: [],
                    occupation: '',
                    character: '',
                    code: '',
                    date: '',
                }
            }
        },
        mounted() {},
        methods: {
            // 获取验证码
            getCode() {
                const TIME_COUNT = 5
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.formList[7].btn = this.count + 's'
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.formList[7].btnDisabled = true
                            this.count--
                            this.formList[7].btn = this.count + 's'
                        } else {
                            clearInterval(this.timer);
                            this.formList[7].btnDisabled = false
                            this.formList[7].btn = '重新获取'
                        }
                    }, 1000)
                }
            },
            //提交事件
            submit() {
                this.$refs.formList.validate()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .btn {
        width: calc(100 - 40rpx);
        margin: 20rpx;
        border-radius: 50rpx;
        background-color: #409efe;
        color: #fff;

    }
</style>

//若使用到select组件，可至主页下载
https://ext.dcloud.net.cn/plugin?id=9877

如使用过程中有任何问题，或者您有一些好的建议，欢迎联系QQ：2360273432