Vue を使用して動的にフォームを生成する方法の概要

npm install form-create

git clone https://github.com/xaboy/form-create.git
cd form-create
npm install

<!-- import Vue -->
<script src="node_modules/vue/dist/vue.min.js"></script>
<!-- import iview -->
<link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css" rel="external nofollow" >
<script src="node_modules/iview/dist/iview.min.js"></script>
<!-- 省市区三级联动json数据 -->
<script src="/district/province_city_area.js"></script>
<!-- 模拟数据 -->
<script src="mock.js"></script>
<!-- import formCreate -->
<script src="dist/form-create.min.js"></script>

 $f.validateField(field,(errMsg)=>{
  if(errMsg){
   //TODO 验证未通过
  }else{
   //TODO 验证通过
  }
 });

$f.append({
  type:"input",
  title:"商品简介",
  field:"goods_info",
  value:"",
  props: {
   "type": "text",
   "placeholder": "请输入商品简介",
  },
  validate:[
   { required: true, message: '请输入商品简介', trigger: 'blur' },
  ],
 });

hiddenRule:
{
 type:"hidden",//必填!
 //字段名称
 field:"id", //必填!
 //input值
 value:"14" //必填!
}

inputRule :
{
  type:"input",//必填! 
  //label名称
  title:"商品名称",//必填!
  //字段名称
  field:"goods_name",//必填!
  //input值
  value:"iphone 7",
  props: {
   //输入框类型，可选值为 text、password、textarea、url、email、date
   "type": "text", //必填!
   //是否显示清空按钮
   "clearable":false, 
   //设置输入框为禁用状态
   "disabled": false, 
   //设置输入框为只读
   "readonly": false,
   //文本域默认行数，仅在 textarea 类型下有效
   "rows": 4, 
   //自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
   "autosize": false, 
   //将用户的输入转换为 Number 类型
   "number": false, 
   //自动获取焦点
   "autofocus": false, 
   //原生的自动完成功能，可选值为 off 和 on
   "autocomplete": "off", 
   //占位文本
   "placeholder": "请输入商品名称", 
   //输入框尺寸，可选值为large、small、default或者不设置
   "size": "default",
   //原生的 spellcheck 属性
   "spellcheck": false,
  },
  event:{
   //按下回车键时触发
   enter:(event)=>{},
   //设置 icon 属性后，点击图标时触发
   click:(event)=>{},
   //数据改变时触发
   change:(event)=>{},
   //输入框聚焦时触发
   focus:(event)=>{},
   //输入框失去焦点时触发
   blur:(event)=>{},
   //原生的 keyup 事件
   keyup:(event)=>{},
   //原生的 keydown 事件
   keydown:(event)=>{},
   //原生的 keypress 事件
   keypress:(event)=>{},
  },
  validate:[
   { required: true, message: '请输入goods_name', trigger: 'blur' },
  ],
 }

radioRule :
{
  type:"radio",//必填!
  //label名称
  title:"是否包邮",//必填!
  //字段名称
  field:"is_postage",//必填!
  //input值
  value:"0",
  //可选参数
  options:[
   {value:"0",label:"不包邮",disabled:false},
   {value:"1",label:"包邮",disabled:true},
  ],//必填!
  props: {
   //可选值为 button 或不填，为 button 时使用按钮样式
   "type":undefined, 
   //单选框的尺寸，可选值为 large、small、default 或者不设置
   "size":"default", 
   //是否垂直排列，按钮样式下无效
   "vertical":false, 
  },
  event:{
   //在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发
   change:(...arg)=>{},
  },
  validate:[],
 }

checkboxRule :
{
  type:"checkbox",//必填!
  //label名称
  title:"标签",//必填!
  //字段名称
  field:"label",//必填!
  //input值
  value:[
   "1","2","3"
  ],
  //可选参数
  options:[
   {value:"1",label:"好用",disabled:true},
   {value:"2",label:"方便",disabled:false},
   {value:"3",label:"实用",disabled:false},
   {value:"4",label:"有效",disabled:false},
  ],//必填!
  props: {
   //多选框组的尺寸，可选值为 large、small、default 或者不设置
   "size":"default", 
  },
  event:{
   //只在单独使用时有效。在选项状态发生改变时触发，通过修改外部的数据改变时不会触发
   change:(...arg)=>{},
  },
  validate:[],
 }