安装方法

执行命令 npm i @kyfe/kye-crm-form

使用方法

import kyeCrmForm from '@kyfe/kye-crm-form'
Vue.use(kyeCrmForm)

<template>
  <kye-crm-form ref="kyeCrmFormRef">
    <van-field v-model="value1"
               label="姓名"
               :required="true"
               placeholder="请输入"
               :rules="[{ required: true, message: '请输入' }]" />
    <ks-field v-model="value2"
              label="性别"
              :required="true"
              placeholder="请输入"
              :rules="[{ required: true, message: '请输入' }]" />
    <div style="margin: 16px;">
      <ks-button @click="handleClick"> 提交 </ks-button>
    </div>
  </kye-crm-form>
</template>

<script>
  import kyeCrmForm from '@kyfe/kye-crm-form'
  Vue.use(kyeCrmForm)
  export default {
    data () {
      return {
        value1: "",
        value2: "",
      };
    },
    methods: {
      async handleClick () {
        await this.$refs.kyeCrmFormRef.validate()
      },
    },
  };
</script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | | ------------------- | ---------------------------------------------- | ---------------- | ------ | | label-width | 表单项 label 宽度，默认单位为 px | number | string | 90px | | label-align | 表单项 label 对齐方式，可选值为 center right | string | left | | input-align | 输入框对齐方式，可选值为 center right | string | left | | error-message-align | 错误提示文案对齐方式，可选值为 center right | string | left | | validate-trigger | 表单校验触发时机，可选值为 onChange | string | onBlur | | colon | 是否在 label 后面添加冒号 | boolean | false | | noErrorPop | 是否显示错误提示的气泡 | boolean | false | | showErrorMessage | 是否显示误信息提示 | boolean | false | | validate-first | 是否在某一项校验不通过时停止校验 | boolean | false | | scroll-to-error | 是否在提交表单且校验不通过时滚动至错误的表单项 | boolean | false |

表单项的 API 参见：ks-Field 组件

Rule 数据结构

使用 Field 的 rules 属性可以定义校验规则，可选属性如下:

| 键名 | 说明 | 类型 | | --------- | --------------------------------------------- | ----------------------------------- | | required | 是否为必选字段 | boolean | | message | 错误提示文案 string | (value, rule) => string | | validator | 通过函数进行校验 | (value, rule) => boolean | Promise | | pattern | 通过正则表达式进行校验 | RegExp | | trigger | 本项规则的触发时机，可选值为 onChange、onBlur | string | | formatter | 格式化函数，将表单项的值转换后进行校验 | (value, rule) => any |

Events

| 事件名 | 说明 | 回调参数 | | ------ | -------------------------- | ----------------------------------------------- | | submit | 提交表单且验证通过后触发 | values: object | | failed | 提交表单且验证不通过后触发 | errorInfo: { values: object, errors: object[] } |

方法

通过 ref 可以获取到 Form 实例并调用实例方法

| 方法名 | 说明 | 参数 | 返回值 | | --------------- | ---------------------------------------------------- | --------------------- | ------ | | submit | 提交表单，与点击提交按钮的效果等价 | - | - | | validate | 验证表单，支持传入 name 来验证单个表单项 | name?: string Promise | - | | resetValidation | 重置表单项的验证提示，支持传入 name 来重置单个表单项 | name?: string | - | | scrollToField | 滚动到对应表单项的位置 | name: string | - |

Slots

|名称 |说明| | ----------- | -------------| |default| 表单内容|