vue 封装表单

临时写的，不够成熟，如果有更好的，希望能让小弟白嫖一下，谢谢大佬们

// 需要使用的页面
/**
* @users_genre 判断不同表单
* @users_list 数据源
*/
<user_Form :users_genre="'government'" :users_list="student_list" @Form_item="Form_item" :formItem="formItem"></user_Form>

<Row :gutter="16">
  <Col :span="users_genre === 'student' ? '6' : item.span" v-for="item in users_list" :key="item.id">
    <FormItem :label="item.label" :prop="item.prop" v-if="item.type === 'Input' && item.genre.indexOf(users_genre) !== -1">
      <Input :size="item.size" v-model="formItem[item.model]"
             :placeholder="item.placeholder.split('|').length > 1 ? item.placeholder.split('|')[[item.genre.split('|').indexOf(users_genre)]] : item.placeholder"
             :disabled="item.disabled" @input="surcreatepy(item.surcreatepyold, item.surcreatepydata)"></Input>
    </FormItem>
    <FormItem :label="item.label" :prop="item.prop" v-if="item.type === 'Select' && item.genre.indexOf(users_genre) !== -1">
       <Select :size="item.size" v-model="formItem[item.model]" :disabled="item.disabled">
          <Option v-for="subitem in item.children" :key="subitem.value" :value="subitem.value">{{subitem.label}}
          </Option>
       </Select>
    </FormItem>
  </Col>
</Row>

// 拼音转换插件
import pinyin from 'js-pinyin'
export default {
    name: 'Form',
    props: {
        users_list: {
            type: Array,
            default: false
        },
        formItem: {
            type: Object,
            default: false
        },
        users_genre: {
            type: String,
            default: ''
        }
    },
    watch: {
        formItem: {
            handler(val, oldVal) {
                this.Form_item(val)
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            formItem: {}
        }
    },
    methods: {
        Form_item(data) {
            this.$emit('Form_item', data)
        },
        // 姓转换
        surcreatepy(old, data) {
            this.formItem[data] = pinyin.getFullChars(this.formItem[old])
        }
    }
}

/**
 *  @placeholder 提示
 *  @label 标题
 *  @prop 验证规则
 *  @size 大小
 *  @model v-model绑定值
 *  @type 类型
 *  @genre 相当于权限
 *  @surcreatepyold 被转换的字段
 *  @surcreatepydata 转换后的拼音
 *  @span  col占的大小
 *  @disabled 是否禁用
 *  @children 下拉框的数据
 */
export const student_list = [
    { id: 0, label: '姓', prop: 'surname', size: 'large', model: 'surname', placeholder: '请输入学生姓|请输入老师姓|请输入培训老师姓|请输入政府人员姓', type: 'Input', genre: 'student|teacher|train|government', surcreatepyold: 'surname', surcreatepydata: 'surnamepin', span: '6' },
    { id: 1, label: '名', prop: 'name', size: 'large', model: 'name', placeholder: '请输入学生名|请输入老师名|请输入培训老师名|请输入政府人员名', type: 'Input', genre: 'student|teacher|train|government', surcreatepyold: 'name', surcreatepydata: 'namepin', span: '6' },
    { id: 2, label: '姓（拼音）', disabled: 'true', prop: 'surnamepin', size: 'large', genre: 'student|teacher|train|government', model: 'surnamepin', placeholder: '英文 姓（拼音），需要与护照保持一致', type: 'Input', span: '6' },
    { id: 3, label: '名（拼音）', disabled: 'true', prop: 'namepin', size: 'large', genre: 'student|teacher|train|government', model: 'namepin', placeholder: '英文 名（拼音），需要与护照保持一致', type: 'Input', span: '6' },
    { id: 4, label: '手机号', prop: 'mobile', size: 'large', model: 'mobile', genre: 'teacher|train|government', placeholder: '请输入手机号', type: 'Input', span: '8' },
    { id: 5, label: '电话', prop: 'phone', size: 'large', model: 'phone', genre: 'teacher|train|government', placeholder: '请输入电话', type: 'Input', span: '8' },
    { id: 6, label: '邮编', prop: 'postalCode', size: 'large', model: 'postalCode', genre: 'teacher|train|government', placeholder: '请输入邮编', type: 'Input', span: '8' }
]