DIY熙

  • 首页
  • 归档
  • 服务

  • 搜索
TypeSCript 设计模式 前端 算法 electron React Node.js 规范 直播服务器 服务器 小熙js脚本库 油猴脚本 面试

一个数组,完成一份表单!

发表于 2021-06-12 | 分类于 前端相关 | 1 | 阅读次数 334

Vue+elementUI表单构造器

构造器说明

  • 本构造器不需要您懂Vue以及elementUI即可完成一份表单制作。
  • 但是需要您懂得 js 对象 数组 等基础知识。
  • 构造器提供输入框、选择器、开关、单选框、多选框等常用表单项。

核心依赖

依赖内容版本
elementUI2.15.0
vue3.0

方法说明

本构造器仅提供一种方法 create_vue_elementUI_input_form( 容器id )去完成表单渲染。无需用户引入任何文件,只需要引入本构造器,其他一切由构造器完成。

快速开始

1、输入框的例子

		//引入构造器,不需要引入Vue,jq,elemeneui 构造器会自动完成引入
		<script src="./vue_input_form_list.js"></script>
		
		<div id="form"></div>
        var data = [
            {
                type: "input",//项目类型
                _type: "",
                label: "账号",//标题
                model: 'account',//绑定变量
                click: ""//绑定点击方法
            }
        ]
        create_vue_elementUI_input_form("form", data)

运行截图:
输入框的例子

程序解释:

如上面的演示,在一个数组内定义一个对象,该对象的属性有type,_type,label,model,click等等,甚至您可以自定义当列的属性或样式,super_edit 属性可以直接赋值到该对象对应的html代码(暂时未做)。如何访问编辑框变量,表单的所有数据都在 全局变量 app._data中,您可以访问该全局变量进行赋值或取值,数据是双向绑定的。

2、丰富的设计

		//引入构造器,不需要引入Vue,jq,elemeneui 构造器会自动完成引入
		<script src="./vue_input_form_list.js"></script>
		
		<div id="form"></div>
		var data = [
		            {
		                type: "input",//项目类型
		                _type: "",
		                label: "账号",//标题
		                model: 'account',//绑定变量
		                click: ""//绑定点击方法
		            },
		            {
		                type: "input",//项目类型
		                _type: "password",
		                label: "密码",//标题
		                model: 'password',//绑定变量
		                click: ""//绑定点击方法
		            },
		            {
		                label: "性别",//标题
		                type: "select",//项目类型
		                model: 'select',//绑定变量
		                slot_data: [{ label: "男", value: "GG" }, { label: "女", value: "MM" }],
		                click: ""//绑定点击方法
		            },
		            {
		                label: "爱好",//标题
		                type: "checkbox",//项目类型
		                model: 'checkbox',//绑定变量
		                slot_data: [{ label: "csgo" }, { label: "彩虹6号" }, { label: "未来的天空" }, { label: "奇妙的夏天" }, { label: "五彩的信号" }],
		                click: ""//绑定点击方法
		            },
		            {
		                label: "身份",//标题
		                type: "radio",//项目类型
		                model: 'radio',//绑定变量
		                slot_data: [{ label: "csgo" }, { label: "彩虹6号" }, { label: "未来的天空" }, { label: "奇妙的夏天" }, { label: "五彩的信号" }],
		                click: ""//绑定点击方法
		            }, {
		                type: "textarea",//项目类型
		                label: "说明",//标题
		                model: 'textarea',//绑定变量
		                click: ""//绑定点击方法
		            }, {
		                type: "button",//项目类型
		                slot_data: [{ title: '立即创建', _type: "primary", click: "" }, { title: '清空', _type: "warning", click: "" }, { title: '取消', _type: "", click: "" }],
		                click: ""//绑定点击方法
		            }		
		        ]
        create_vue_elementUI_input_form("form", data)

运行截图:

在这里插入图片描述

程序解释:

如上面的演示,在一个数组内定义一组对象,构造器就会按照顺序进行表单渲染。

表单项目文档

1、输入框
属性简介
typeinput
_type对应原生输入框的type属性,有password、text
label对应elementui输入框前的标签
model绑定到对象的变量名,双向绑定,改变变量就会更新页面
click绑定点击方法,填写方法名
2、下拉选择框
属性简介
typeselect
slot_data插槽数据,在这里就是就是选择数组,选项对象要求有label和value,例如{ label: "男", value: "GG" },请以数组方式填写,如:[{ label: "男", value: "GG" }, { label: "女", value: "MM" }]
label对应elementui输入框前的标签
model绑定到对象的变量名,双向绑定,改变变量就会更新页面
click绑定点击方法,填写方法名
3、多选框
属性简介
typecheckbox
slot_data插槽数据,在这里就是就是选择数组,选项对象要求有label,例如{ label: "csgo" },请以数组方式填写,如:[{ label: "csgo" }, { label: "魔兽世界" }]
label对应elementui输入框前的标签
model绑定到对象的变量名,双向绑定,改变变量就会更新页面
click绑定点击方法,填写方法名
4、单选框
属性简介
typeradio
slot_data插槽数据,在这里就是就是选择数组,选项对象要求有label,例如{ label: "csgo" },请以数组方式填写,如:[{ label: "csgo" }, { label: "魔兽世界" }]
label对应elementui输入框前的标签
model绑定到对象的变量名,双向绑定,改变变量就会更新页面
click绑定点击方法,填写方法名
4、多行文本框
属性简介
typetextarea
label对应elementui输入框前的标签
model绑定到对象的变量名,双向绑定,改变变量就会更新页面
click绑定点击方法,填写方法名
5、按钮
属性简介
typebutton
slot_data插槽数据,在这里就是就是按钮数组,按钮对象要求有title、_type、click,例如 { title: '立即创建', _type: "primary", click: "" },请以数组方式填写,如:[{ title: '立即创建', _type: "primary", click: "" }, { title: '清空', _type: "warning", click: "" }, { title: '取消', _type: "", click: "" }]
温馨提示按钮对象中的_type 对应elementUI中的按钮样式,有 primary、success、info、warning、danger
  • 本文作者: 大熙哥
  • 本文链接: https://blog.diyxi.top/archives/yi-ge-shu-zu--wan-cheng-yi-fen-biao-dan-
  • 版权声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0 许可协议。转载请注明出处!
# 小熙js脚本库
进入Dcoker的魔法世界,教你最简单的配置直播服务器
使用油猴脚本,看传智高校的视频
  • 文章目录
  • 站点概览
大熙哥

大熙哥

38 日志
11 分类
13 标签
RSS
Github
Creative Commons
Links
  • Ziki
  • 咸鱼的窝
  • Farmer的自习室
  • 一个肥肥的自习室
  • lafish
  • 小呆呆的生活
  • hekvn
© 2023 大熙哥
由 Halo 强力驱动
|
主题 - NexT.Mist v5.1.4
粤ICP备20011435号-1
0%