@qingbing/element-form

封装 vue-element-ui 的表单组件

Usage no npm install needed!

<script type="module">
  import qingbingElementForm from 'https://cdn.skypack.dev/@qingbing/element-form';
</script>

README

封装 vue-element-ui 的组件

对 vue-element-ui 进行封装表单组件

====== 版本说明 ======

  • 1.0.1 : 基础表单选项
  • 1.0.2 : 增加json-editor
  • 1.0.4 : 增加quill-editor(vue2-editor)
  • 1.0.5 : vue2-editor 增加编辑器 id 属性扩展
  • 1.0.6 : vue2-editor 增加编辑器 code 行号显示
  • 1.0.7 : 去除不需要的 isDev 代码
  • 1.0.8 : 将 element-form 的 items 传递用 object 来代替 array
  • 1.0.9
    • 添加 idCard 身份证验证规则
    • 添加 qq 规则验证
    • 完善 time-picker 组件
    • 完善 datetime-picker 组件
  • 1.0.10
    • 将 datetime-picker 改成 date-picker
  • 1.0.11
    • 将 date-picker 中如果默认值小于 "1100-01-01",将视为""
  • 1.0.12
    • 修改 options 的初始渲染问题
  • 1.0.13
    • 检查 item 中是否有 field 字段,无则用 idx(索引) 代替
  • 1.0.14
    • 使用 watch 监控(checkbox、radio、select、date-picker) fromData,当数据整个发生变化时,将重新对数据进行必要的类型纠正
  • 1.0.15
    • 修改 switch 在数据复制时的显示bug
  • 1.0.16
    • 为所有的组件适当的添加 change、blur 事件
  • 1.0.17
    • 解决未定义 exts 时的报错
  • 1.0.18
    • 解决 viewText 的在显示时的计算问题,通过计算属性来实现
  • 1.0.19
    • 修改 base.vue 文件中事件函数( changeCallback, blurCallback ) 的参数传递
  • 1.0.20
    • 修改 date-picker 和 time-picker 的 editable 的默认值为 false

1. 安装

npm install @qingbing/element-form

2. 包导入,在vue的main.js中确认加入如下代码

// 注意引入element-ui在Vue下,因为可能会被其他组件使用到
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 全局引入组件包(也可以局部引用)
import ElementForm from "@qingbing/element-form";
Vue.use(ElementForm);

3. vue文件中使用

<element-form></element-form>

4. rules

{ type: "required", value: true, message: "", trigger:"blur" }
{ type: "boolean", message: "", trigger:"click" }
{ type: "enum", enum: ["nan", "nv"], message: "", trigger:"blur" }
  在 input-radio 和单选的 input-select 中可直接简化为:{ type: "enum", }
{ type: "email", message: "", trigger:"blur" }
{ type: "url", message: "", trigger:"blur" }
{ type: "regexp", message: "", trigger:"blur" }
{ type: "hex", message: "", trigger:"blur" }
{ type: "pattern", pattern: /^\d{2}$/, message: "", trigger:"blur" }
  或者 { type: "pattern", pattern: "/^\\\d{2}$/", message: "", trigger:"blur" }
{ type: "date", min: 1612108800000, max: 1614528000000, message: "", } 只能用在datetime-picker中,且指定 valueFormat 必须为 timestamp
  或者 { type: "date", min: "2021-02-01", max: "2021-03-01", message: "", }
// 字符串长度可以从 exts 的 minlength、maxlength 中获取
{ type: "string", min: 2, max: 4, }
// 数字可以从 exts 的 min、max 中获取
{ type: "number", min: 2, max: 4, }
// 数字可以从 exts 的 min、max 中获取
{ type: "integer", min: 2, max: 4, }
// 数字可以从 exts 的 min、max 中获取
{ type: "float", min: 2, max: 4, }
// 数字可以从 exts 的 min、max 中获取
{ type: "array", min: 2, max: 4, }
// ajax 的url验证,需要 ajaxMethod 函数在不通过时返回字符串,只要返回时字符串,就认为不通过
{ type: "ajax", url: '/rule-ajax', fields: ["select2",], params: { id: 55 }, method: 'get' }
// callback 的函数式验证,如果验证不通过,返回一个字符串即可
{type: "callback", fields: ["select2",], params: { id: 55 }, callback(data, formData) { return "Error. There is something wrong!";}}
// compare 对比验证
{ type: "compare", compareField: "password-text", message: "密码确认不正确" }

custom 定义常用
{ type: "username", message: "", trigger:"blur" }
{ type: "password", message: "", trigger:"blur" }
{ type: "zipcode", message: "", trigger:"blur" }
{ type: "mobile", message: "", trigger:"blur" }
{ type: "phone", message: "", trigger:"blur" }
{ type: "contact", message: "", trigger:"blur" }
{ type: "fax", message: "", trigger:"blur" }
{ type: "ipv4", message: "", trigger:"blur" }

5. 关于 vue-json-editor

5.1 接受参数

  • showBtns : 是否显示 vue-json-editor 的保存按钮
    • 默认 true
  • expandedOnStart : 在开始时展开
    • 默认 false
  • mode : 显示的模式,从 modes 里面选其一
    • 默认 tree
  • modes : 支持的显示模式,当传递的 modes 为 [] 时,模式选项将隐藏
    • 默认 ["tree", "code", "form", "text", "view"]
  • lang : 保存按钮显示的语言
    • 默认 en, 支持 "en", "zh", "it"

5.2 接受事件

  • @json-change: json编辑器内容改变时触发
  • @json-save: 点击保存时触发
  • @has-error: 发生错误时触发