基于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

参数

| Name | Type | Default | Description | |-----------------------------|-----------|--------------|--------------------------------------------------------------------| | formConfig | Object | | 对象（默认值可查看源码） | | formConfig.namePlaceholder | String | 姓名 | 姓名placeholder文案 | | formConfig.phonePlaceholder | String | 手机 | 手机placeholder文案 | | formConfig.yzmPlaceholder | String | 验证码 | 验证码placeholder文案 | | formConfig.gradeStatus | Boolean | false | 年级选项框显示状态 | | formConfig.subjectStatus | Boolean | false | 科目选项框显示状态 | | formConfig.yzmStatus | Boolean | false | 验证码显示状态 | | formConfig.cityStatus | Boolean | true | 城市选择显示状态 | | formConfig.submitBtnImg | String | | 提交按钮图片，没有图片则显示默认提交按钮 | | mainColor | String | #666 | 表单主色调，主要表现在，边框获取焦点后的颜色，输入文字的颜色，以及下拉箭头，默认按钮颜色 | | sendYzmFn | Function| | 发送验证码函数，在有验证码的情况下，调用此方法发送手机验证码 | | submitFn | Function| | 提交表单数据，此回调函数参数data包含所有显示表单的数据 |