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

この記事では主に Vue を使用してフォームを動的に生成するサンプルコードを紹介します。非常に優れており、必要な友人は参考にしてください。

チェックボックスを含むデータ収集、検証、送信機能を備えたフォームジェネレーターです。ボックス、ラジオボタン、入力ボックス、ドロップダウン選択ボックスなどの要素に加え、都道府県・市区町村の3段階連携、時間選択、日付選択、色選択、ファイル・画像アップロード機能、イベント拡張機能などを備えています。

学習とコミュニケーションのためにスターとして参加する皆さんを歓迎します: github アドレス

サンプル

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

インストール

npm install form-create

OR

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

iview バージョンは 2.9.2 以上にしてください。それ以外の場合は問題が発生する可能性がありますのでご注意ください。

を使用してください

<!-- 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>

$formパラメータの作成

rules フォーム生成ルール [inputRule, selectRule,...]

options 初期化構成パラメータ (詳細については下部の createOptions を参照)

• $f インスタンス メソッド

• formData () フォームの値を取得

• getValue(field) 指定されたフィールドの値を取得

• changeField(field, value) 指定されたフィールドの値を変更

• resetFields () フォームをリセット

• destroy() フォームを破棄

• removeField(field) 指定したフィールドを削除

• fields() フォームのフィールド名をすべて取得

• submit() 送信フォームが検証され、onSubmit イベントをトリガーした後のフォーム

• validate(successFn , errorFn) フォーム検証、検証に合格した場合は successFn を実行、失敗した場合は errorFn を実行

• validateField(field, callback) ) フォームの検証ではフィールドを指定します

let rules = window.mock;
new Vue({
 mounted:function(){
 let $f = this.$formCreate(mock,
   {
    onSubmit:function (formData) {
     console.log(formData);
     $f.submitStatus({loading:true});
   }
  });
  //动态添加表单元素
  $f.append($r,'goods_name');
 }
})

prepend(rule, field = unknown) フィールドが渡されない場合は、デフォルトで最初の要素が使用されます。

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

• btn.loading() フォーム送信ボタンを読み込み状態にします

btn.finish() フォーム送信ボタンを通常状態に戻します

append(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在最后一个

rules Form要素ルール

hidden 隠しフィールド

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

input 入力ボックス

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

• フォーム検証ルールを検証します。具体的な設定を参照してください: https://github.com/yiminghe/async-validator

ラジオラジオボタン
• チェックボックス

  
  

  $f.submitStatus({
    //按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
    type:"primary",
    //按钮大小，可选值为large、small、default或者不设置
    size:"large",
    //按钮形状，可选值为circle或者不设置
    shape:undefined,
    //开启后，按钮的长度为 100%
    long:true,
    //设置button原生的type，可选值为button、submit、reset
    htmlType:"button",
    //设置按钮为禁用状态
    disabled:false,
    //设置按钮的图标类型
    icon:"ios-upload",
    //按钮文字提示
    innerText:"提交",
    //设置按钮为加载中状态
    loading:false
   })

DatePicker日付ピッカー
TimePicker

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:[],
 }

accept ファイルの種類: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept

グローバル設定 createOptions

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:[],
 }

上記はこの記事の全内容が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

VUE でインタラクションを完了するために Vue リソースを使用する方法

双方向バインディングを実装する Vue メソッド

以上がVue を使用して動的にフォームを生成する方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。