@kyfe/kye-crm-form

安装方法

执行命令 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	表单内容