Skip to content

Latest commit

 

History

History
249 lines (206 loc) · 8.29 KB

FORM.md

File metadata and controls

249 lines (206 loc) · 8.29 KB
Raw

v-form-layer

  • 快速实现复杂布局
  • 轻松实现逻辑校验，多种展示效果
  • 支持多图层展示

演示

github pages

npm 安装

npm i -S v-form-layer

使用

import VFormLayer from 'v-form-layer'
import 'v-form-layer/dist/v-form-layer.css'

Vue.use(VFormLayer)

// 或者直接使用script导入
<link rel="stylesheet" href="https://unpkg.com/v-form-layer/dist/v-form-layer.css"></link>

<script src="https://unpkg.com/v-form-layer/dist/v-form-layer.min.js"></script>

基础

<v-form>
  <v-form-item title="名字">
    <el-input v-model="form.name" />
  </v-form-item>
  <v-form-item title="年龄" >
    <el-input v-model="form.age" />
  </v-form-item>
</v-form>
<script>
export default {
  data () {
    return {
      form: {name: '', age: ''}
    }
  }
}
</script>

校验

<v-form :data="form">
  <v-form-item title="名字" prop="name" :rules="[{required: true}]">
    <el-input v-model="form.name" />
  </v-form-item>
  <v-form-item title="性别" prop="age" :rules="[{required: true}]">
    <el-select v-model="form.age" />
  </v-form-item>
</v-form>
<script>
export default {
  data () {
    return {
      form: {name: '', age: ''}
    }
  }
}
</script>

高级配置模式

<v-form ref="form" v-bind="formOptions">
<script>
export default {
  data () {
    return {
      formOptions: {
        columns: [
          {
            title: '名字',
            prop: 'name',
            itemRender: { name: 'input' },
            rules: [
              { required: true }
            ]
          },
          {
            title: '年龄',
            prop: 'age',
            itemRender: { name: 'input' },
            rules: [
              { required: true }
            ]
          }
        ]
      }
    }
  }
}
</script>

v-form Attributes

参数 说明 类型 可选值 默认值
columns 表单字段集合 array - -
data 数据对象，用于校验时获取字段的值 object - -
title-width 表单域标签的宽度 string - -
title-align title 的位置 string left/right/top right
line-height form-item 内 title 及 content 行高 string - '32px'
rowledge form-item 行距 string - '24px'
item-gutter form-item 之间的间隔 number - 0
response 表单响应式，只在手机端生效 boolean - true
focus-stop 停止聚焦处理 boolean - false
focus-pause 暂停聚焦处理，会抛出focus-prev/focus-next事件 boolean - false
focus-options 聚焦模式参数 object - 看下面
focus-text-all-selected 聚焦文本全选 boolean - false 
focusOptions: { // object
  // 聚焦模式参数

  prevKeys: 'shift+enter', // string
  // 上一个聚焦快捷键设置

  nextKeys: 'enter', // string
  // 下一个聚焦快捷键设置

  skips: ['/node2'], // string
  // 跳过聚焦的字段集合

  loop: false // boolean
  // 聚焦循环
}

v-form Methods

方法名 说明 参数
validate 对整个表单进行重算的方法，参数是一个回调函数(第一个参数是校验是否通过，第二个参数是所有校验结果集合数组) Function(boolean, array)
validateField 对单个字段进行重算的方法，参数是字段，规则， 数据对象 prop: string, rule: function, data：object/array
clearValidate 移除表单校验结果。参数是要移除校验结果的字段数组，如不传则移除整个表单的重算结果) props: array
resetFields 重置表单，清除校验及状态 --
getFormData 配置模式下，获取表单数据的方法 --
focus prop 对应节点聚焦，不传参数则聚焦第一个可聚焦节点节点 prop: string
blur prop 对应节点失焦 prop: string
select prop 对应节点文本选中 prop: string

v-form Events

事件名称 说明 回调参数
validate 任一表单项被校验后触发 {path,success,message,stop}
focus 节点聚焦时触发 path
blur 节点失焦时触发 path
focus-prev 聚焦上一个节点时触发 path
focus-next 聚焦下一个节点时触发 path
last-focused-node-next 非循环模式（loop 不为 true）下，在最后一个可聚焦的节点（最后一个节点，或是在它之后的所有节点均不可被聚焦的节点），执行下一个节点聚焦操作时触发 path
first-focused-node-prev 非循环模式（loop 不为 true）下，在第一个可聚焦的节点（第一个节点，或是在它之前的所有节点均不可被聚焦的节点），执行上一个节点聚焦操作时触发 path

v-form-item Attributes

参数 说明 类型 默认值
title 标签 string -
title-width 标签宽度 string -
span item栅格宽度 number 24
rules item校验规则 array -
prop item标识，用于取值、校验、快捷编辑 array - 
columns: [ // arra
  {
    title: 'title', // string
    // 标签文本

    titleWidth: '80px', // string
    // 表单域标签的宽度 该设置会覆盖 form-line 上的定义
    
    // 标签的宽度
    span: 24, // number
    // item 在 form-line 分成 24 份中所占的份数

    prop: '', // string
    // 字段路径
    // 规则： 对象嵌套用 '/' 分割（如对象 object:{name: ''}，则 '/name'）
    //       数组用 '/'+索引 分割（如数组 array:[{name: ''},{name: ''}]，则 '/0/name'，'/1/name' ）
    rules: [ // 校验规则
      {
        required: true, 
        message: '', //可选，默认为 不能为空 
        trigger: '' // 可选，默认为 blur，对于select组件必须声明为 change
      }, 
      {
        min: number, // 最小长度
        message: '', //可选，默认为 长度不能小于 min
      }, 
      {
        max: number, // 最大长度 
        message: '', //可选，默认为 长度不能大于 max
      }, 
      // min,max同时存在时 message 默认为 长度必须在 min 到 max 
      {
        pattern: reg, // 正则
        message: '', //可选，默认为 校验不通过
      }, 
      {
        type: 'email', // 邮箱
        message: '', //可选，默认为 请输入正确的邮箱
      }, 
      {
        type: 'phone', // 手机号
        message: '', //可选，默认为 请输入正确的手机号
      }, 
      {
        validator: Function // 自定义校验，支持异步
      }
    ]
  }
]

更新日志

2021-7

  • 表单组件增加 resetFields 重置表单方法

  • 表单组件增加 getFormData 获取表单数据方法