ホームページ >ウェブフロントエンド >jsチュートリアル >Vue動的生成フォーム事例の詳細説明
今回はVueの動的生成フォームについて詳しく解説します。Vueの動的生成フォームの注意点は何ですか?以下は実践的なケースですので見てみましょう。
チェックボックス、ラジオボックス、入力ボックス、ドロップダウン選択ボックスなどの要素を含むデータ収集、検証、送信機能と、都道府県と市区町村間の3段階の連携、時間選択、日付選択を備えたフォームジェネレーター、カラー選択、ファイル/画像アップロード機能、イベント拡張をサポートします。
サンプル
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 を使用してください。そうでないと問題が発生する可能性があります
Use
<!-- 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>
$formCreate パラメータ
rules フォーム生成ルール [inputRule, selectRule,...]
options 初期化設定パラメータ (詳細は下部の createOptions を参照)
$f インスタンスメソッド
formData() フォームの値を取得
getValue(field) 指定されたフィールドの値を取得
changeField(field, value) 指定フィールドの値を変更
resetFields() フォームをリセット
destroy() フォームを破棄
removeField(field) 指定フィールドを削除
fields() フォームのすべてのフィールド名を取得します
submit() フォーム検証 合格後にフォームを送信し、onSubmit イベントをトリガーします
validate(successFn, errorFn) フォーム検証 (if)検証が成功したら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 验证通过 } });
append(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在最后一个
$f.prepend({ type:"input", title:"商品简介", field:"goods_info", value:"", props: { "type": "text", "placeholder": "请输入商品简介", }, validate:[ { required: true, message: '请输入商品简介', trigger: 'blur' }, ], });
submitStatus(props) フォーム送信ボタンのステータスを変更します
$f.append({ type:"input", title:"商品简介", field:"goods_info", value:"", props: { "type": "text", "placeholder": "请输入商品简介", }, validate:[ { required: true, message: '请输入商品简介', trigger: 'blur' }, ], });
btn.loading () フォーム送信ボタンを読み込み状態にします
btn.finish() フォーム送信ボタンを通常状態に戻します
ルールフォーム要素ルール
非表示の隠しフィールド
$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 })
入力入力ボックス
hiddenRule: { type:"hidden",//必填! //字段名称 field:"id", //必填! //input值 value:"14" //必填! }
フォーム検証ルールを検証します。詳細な設定を参照してください: https://github.com/yiminghe/async-validator
ラジオラジオボタン
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:[], }
スイッチスイッチ
selectRule : { type: "select",//必填! field: "cate_id",//必填! title: "产品分类",//必填! //input值 value: ["104","105"], //可选参数 options: [ {"value": "104", "label": "生态蔬菜", "disabled": false}, {"value": "105", "label": "新鲜水果", "disabled": false}, ],//必填! props: { //是否支持多选 "multiple": true, //是否可以清空选项,只在单选时有效 "clearable": false, //是否支持搜索 "filterable": true, // 暂不支持远程搜索 // "remote": false, //是否使用远程搜索 // "remote-method":Function, //远程搜索的方法 // "loading": false, //当前是否正在远程搜索 // "loading-text": "加载中", //远程搜索中的文字提示 //选择框大小,可选值为large、small、default或者不填 "size":"default", //选择框默认文字 "placeholder": "请选择", //当下拉列表为空时显示的内容 "not-found-text": "无匹配数据", //弹窗的展开方向,可选值为 bottom 和 top "placement": "bottom", //是否禁用 "disabled": false, }, event:{ //选中的Option变化时触发,返回 value change:(checked)=>{}, //搜索词改变时触发 'query-change':(keyword)=>{}, }, validate:[], }
DatePicker 日付ピッカー
switchRule : { type:"switch",//必填! //label名称 title:"是否上架",//必填! //字段名称 field:"is_show",//必填! //input值 value:"1", props: { //开关的尺寸,可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字,使用 large。 "size":"default", //禁用开关 "disabled":false, //选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用 "trueValue":"1", //没有选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用 "falseValue":"0", }, slot: { //自定义显示打开时的内容 open:"上架", //自定义显示关闭时的内容 close:"下架", }, event:{ //开关变化时触发,返回当前的状态 0 | 1 change:(bool)=>{}, }, validate:[], }
TimePicker タイムピッカー
DatePickerRule : { type: "DatePicker",//必填! field: "section_day",//必填! title: "活动日期",//必填! //input值, type为daterange,datetimerange value为数组 [start_value,end_value] value: ['2018-02-20', new Date()], props: { //显示类型,可选值为 date、daterange、datetime、datetimerange、year、month "type": "datetimerange",//必填! //展示的日期格式 "format": "yyyy-MM-dd HH:mm:ss", //日期选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end "placement": "bottom-start", //占位文本 "placeholder":"请选择获得时间", //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭 "confirm":false, //尺寸,可选值为large、small、default或者不设置 "size":"default", //是否禁用选择器 "disabled":false, //是否显示清除按钮 "clearable":true, //完全只读,开启后不会弹出选择器 "readonly":false, //文本框是否可以输入 "editable":false, }, event:{ //日期发生变化时触发,已经格式化后的日期,比如 2016-01-01 change:(value)=>{}, //弹出日历和关闭日历时触发 true | false 'open-change':(bool)=>{}, //在 confirm 模式或 clearable = true 时有效,在清空日期时触发 clear:(...arg)=>{}, }, validate:[], }
InputNumber 数値入力ボックス
TimePickerRule : { type: "TimePicker",//必填! field: "section_time",//必填! title: "活动时间",//必填! //input值, type为timerange value为数组 [start_value,end_value] value: [], props: { //显示类型,可选值为 time、timerange "type": "timerange", //必填! //展示的时间格式 "format": "HH:mm:ss", //下拉列表的时间间隔,数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时,分钟会显示:00、15、30、45。 "steps": [], //时间选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end "placement": "bottom-start", //占位文本 "placeholder":"请选择获得时间", //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭 "confirm":false, //尺寸,可选值为large、small、default或者不设置 "size":"default", //是否禁用选择器 "disabled":false, //是否显示清除按钮 "clearable":true, //完全只读,开启后不会弹出选择器 "readonly":false, //文本框是否可以输入 "editable":false, }, event:{ //时间发生变化时触发 已经格式化后的时间,比如 09:41:00 change:(checked)=>{}, //弹出浮层和关闭浮层时触发 true | false 'open-change':(bool)=>{}, //在清空日期时触发 clear:(...arg)=>{}, }, validate:[], }
ColorPicker カラーピッカー
InputNumberRule : { type: "InputNumber",//必填! field: "sort",//必填! title: "排序",//必填! //input值 value: 1, props: { //最大值 "max": undefined, //最小值 "min": undefined, //每次改变的步伐,可以是小数 "step": 1, //输入框尺寸,可选值为large、small、default或者不填 "size":"default", //设置禁用状态 "disabled":false, //是否设置为只读 "readonly":false, //是否可编辑 "editable":true, //数值精度 "precision":0, }, event:{ //数值改变时的回调,返回当前值 change:(value)=>{}, //聚焦时触发 focus:(event)=>{}, //失焦时触发 blur:(event)=>{}, }, validate:[], }
Cascader 多層連携
ColorPickerRule : { type: "ColorPicker",//必填! field: "color",//必填! title: "颜色",//必填! //input值 value: '#ff7271', props: { //是否支持透明度选择 "alpha": false, //是否支持色彩选择 "hue": true, //是否显示推荐的颜色预设 "recommend": false, //尺寸,可选值为large、small、default或者不设置 "size":"default", //自定义颜色预设 "colors":[], //颜色的格式,可选值为 hsl、hsv、hex、rgb,开启 alpha 时为 rgb,其它为 hex "format":"hex", }, event:{ //当绑定值变化时触发,返回当前值 change:(color)=>{}, //聚焦时触发 面板中当前显示的颜色发生改变时触发 'active-change':(color)=>{}, }, validate:[], }
アップロード Upload
CascaderRule: { type:"cascader",//必填! title:"所在区域",//必填! field:"address",//必填! //input值 value:['陕西省','西安市','新城区'], props:{ //可选项的数据源,格式参照示例说明 data:window.province || [],//必填! //选择后展示的函数,用于自定义显示格式 renderFormat:label => label.join(' / '), //是否禁用选择器 disabled:false, //是否支持清除 clearable:true, //输入框占位符 placeholder:'请选择', //次级菜单展开方式,可选值为 click 或 hover trigger:'click', //当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的示例 changeOnSelect:false, //输入框大小,可选值为large和small或者不填 size:undefined, //动态获取数据,数据源需标识 loading loadData:()=>{}, //是否支持搜索 filterable:false, //当搜索列表为空时显示的内容 notFoundText:'无匹配数据', //是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果 transfer:false, }, event:{ //选择完成后的回调,返回值 value 即已选值 value,selectedData 为已选项的具体数据 change:(value, selectedData)=>{}, //展开和关闭弹窗时触发 'visible-change':bool=>{} }, validate:[], }
accept ファイルの種類: https://developer.mozilla.org/en-US/ docs/Web/HTML/Element/input#attr-accept
グローバル設定 createOptions
UploadRule : { type: "Upload",//必填! field: "pic",//必填! title: "轮播图",//必填! //input值,当maxLength等与1时值为字符串,大于1时值为数组 value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], //input值 props: { //上传控件的类型,可选值为 select(点击选择),drag(支持拖拽) "type":"select", //必填! //上传文件类型,可选值为 image(图片上传),file(文件上传) "uploadType":"image", //必填! //上传的地址 "action": "", //必填! //上传的文件字段名 "name":"", //上传时附带的额外参数 "data":{}, //设置上传的请求头部 "headers": {}, //是否支持多选文件 "multiple": true, //支持发送 cookie 凭证信息 "withCredentials":false, //不支持 // "showUploadList":false, //是否显示已上传文件列表 // "defaultFileList":[], // 默认已上传的文件列表 //接受上传的文件类型 "accept":"", //支持的文件类型,与 accept 不同的是,format 是识别文件的后缀名,accept 为 input 标签原生的 accept 属性,会在选择文件时过滤,可以两者结合使用 "format":[], //文件大小限制,单位 kb "maxSize":undefined, //可上传文件数量 "maxLength":1, //上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传 "beforeUpload":()=>{}, //文件上传时的钩子,返回字段为 event, file, fileList "onProgress":()=>{}, //文件上传成功时的钩子,返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可 "onSuccess":function () { return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'; }, //必填! //文件上传失败时的钩子,返回字段为 error, file, fileList "onError":(error, file, fileList)=>{}, //点击已上传的文件链接时的钩子,返回字段为 file, 可以通过 file.response 拿到服务端返回数据 "onPreview":()=>{}, //文件列表移除文件时的钩子,返回字段为 file, fileList "onRemove":()=>{}, //文件格式验证失败时的钩子,返回字段为 file, fileList "onFormatError":()=>{}, //文件超出指定大小限制时的钩子,返回字段为 file, fileList "onExceededSize":()=>{}, //辅助操作按钮的图标 ,设置为false将不显示 handleIcon:'ionic', //点击辅助操作按钮事件 onHandle:(src)=>{}, //是否可删除,设置为false是不显示删除按钮 allowRemove:true, }, }
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
PopupWindow コンポーネントの使用手順分析の Vue 実装
vue+jquery+lodash スライド時の上部フローティング固定関数の詳細な説明
Angular5のルーティングパラメータの使い方を詳しく解説
以上がVue動的生成フォーム事例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。