vue-form-x v1.0.0

基于vue的表单提交组件

注意：组件内包含toast提示，没有安装vue-toast-x 的，请先 npm install vue-toast-x -D ， 在main.js内引入并use

NPM

npm install vue-form-x -D

Example

<template>
    <div id="app">
        <FormModule :formConfig="formConfig" :mainColor="mainColor" @sendYzmFn="sendYzmFn" @submitFn="submitFn"></FormModule>
    </div>
</template>
<script>
    import FormModule from 'vue-form-x';

    export default {
        name: 'App',
        components: {
            FormModule
        },
        data () {
            return {
                formConfig: {
                    namePlaceholder: '姓名',
                    phonePlaceholder: '手机',
                    yzmPlaceholder: '验证码',
                    gradeStatus: false, // 选择年级状态（是否需要年级选择，注意！没有年级就没有科目）
                    subjectStatus: false, // 选择科目状态（是否需要科目选择）
                    yzmStatus: true, // 发送验证码状态（是否需要发送验证码）
                    cityStatus: true, // 城市选择状态（是否需要城市选择）
                    submitBtnImg: 'http://wenba-ooo-qiniu.xueba100.com/5b6579d4da31dabd62763b77c46f8063.png' // 提交按钮图片（添加此项，会覆盖默认的按钮）
                },
                mainColor: '#fe6f91' // 主色调，默认 '#666'
            }
        },
        methods: {
            sendYzmFn() {
              alert('接口发送验证码');
            },
            submitFn (data) {
                // data => 返回的提交数据
                // 其他：如果内部包含手机号码验证，可以在此处先校验手机验证码，再提交其他表单数据
                console.log(data)
                alert('提交数据到接口');
            }

        }
    }
</script>

Api

参数