form-create(ElementUI)学习记录
安装CDN 引入直接在页面js引入<!-- import Vue.js --><script src="//vuejs.org/js/vue.min.js"></script><!-- import stylesheet --><link href="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/l
·
安装
CDN 引入
直接在页面js引入
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/theme-chalk/index.css" rel="stylesheet">
<!-- import ElementUI -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.8.2/lib/index.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
NPM
npm i @form-create/element-ui
引入
import formCreate from '@form-create/element-ui'
例子展示
<form-create v-model="dataFormApi" :rule="dataFormRule" :option="dataFormOptions" />
//dataFormApi为表格实例,dataFormRule为表格组件组合规则,dataFormOptions为全局配置
做一个新增banner图配置页面:
data(){
return{
dataFormApi: {},
dataFormOptions: {
submitBtn: false // 隐藏默认提交按钮
},
dataFormRule: [
{
type: 'input',
field: 'configName',
title: '标题',
value: '',
validate: [{ required: true, message: '请输入标题' }]
},
{
type: 'upload',
field: 'imageUrl',
title: 'Banner图片',
value: [],
validate: [{ required: true, message: '请上传图片' }],
props: uploadPic(),
suffix: '尺寸要求:690*150px'
},
{
type: 'radio',
field: 'linkType',
title: '跳转链接',
value: 0,
validate: [{ required: true, message: '请选择医生' }],
options: [
{ label: '小程序路径', value: 0 },
{ label: 'H5链接', value: 1 },
{ label: '外部小程序路径', value: 2 }
],
on: {
change: (e) => {
this.onTabLinkType(e)
}
}
},
{
type: 'input',
field: 'appId',
title: 'appID',
value: '',
col: {
span: 12
},
hidden: true,
validate: [{ required: true, message: '请输入外部小程序路径链接地址' }]
},
{
type: 'input',
field: 'linkSrc',
title: '链接地址',
value: '',
validate: [{ required: true, message: '请输入链接地址' }]
},
{
type: 'datePicker',
props: {
type: 'datetime'
},
field: 'startTime',
title: '生效时间',
value: '',
validate: [{ required: true, message: '请选择开始时间' }]
},
{
type: 'datePicker',
props: {
type: 'datetime'
},
field: 'endTime',
title: '结束时间',
value: '',
validate: [{ required: true, message: '请选择结束时间' }]
}
],
}
}
全局配置
官方文档说明form-create
<form-create v-model="dataFormApi" :rule="dataFormRule" :option="dataFormOptions" />
//dataFormApi为表格实例,dataFormRule为表格组件组合规则,dataFormOptions为全局配置
option:
/*
全局配置中额外支持一下配置项:
form:表单整体显示规则配置
row:表单组件布局配置
submitBtn:提交按钮样式配置
resetBtn:重置按钮样式配置
info:组件提示消息配置
wrap: 配置FormItem
*/
//表单整体显示规则配置
form:{
//行内表单模式
inline: false,
//表单域标签的位置,如果值为 left 或者 right 时,则需要设置 label-width
labelPosition: 'right',
//表单域标签的后缀
labelSuffix: undefined,
//是否显示必填字段的标签旁边的红色星号
hideRequiredAsterisk: false,
//表单域标签的宽度,例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
labelWidth: '125px',
//是否显示校验错误信息
showMessage: true,
//是否以行内形式展示校验信息
inlineMessage: false,
//是否在输入框中显示校验结果反馈图标
statusIcon: false,
//是否在 rules 属性改变后立即触发一次验证
validateOnRuleChange: true,
//是否禁用该表单内的所有组件。若设置为 true,则表单内组件上的 disabled 属性不再生效
disabled: false,
//用于控制该表单内组件的尺寸 medium / small / mini
size: undefined,
//是否显示 label
title: true
}
//表单组件布局配置
row:{
//栅格间隔
gutter: 0,
//布局模式,可选 flex,现代浏览器下有效
type: undefined,
//flex 布局下的垂直排列方式 top/middle/bottom
align: undefined,
//flex 布局下的水平排列方式 start/end/center/space-around/space-between
justify: undefined,
//自定义元素标签
tag: 'div'
}
//提交按钮样式和布局配置
submitBtn:{
//类型 primary / success / warning / danger / info / text
type: "primary",
//尺寸 medium / small / mini
size: "medium",
//是否朴素按钮
plain: false,
//是否圆角按钮
round: false,
//是否圆形按钮
circle: false,
//是否加载中状态
loading: false,
//是否禁用状态
disabled: false,
//图标类名
icon: 'el-icon-upload',
//按钮宽度
width: '100%',
//是否默认聚焦
autofocus: false,
//原生 type 属性
nativeType: "button",
//按钮内容
innerText: "提交",
//按钮是否显示
show: true,
//按钮布局规则
col: undefined,
//按钮点击事件
click: undefined,
}
//重置按钮样式和布局配置
resetBtn:{
type: "default",
size: "medium",
plain: false,
round: false,
circle: false,
loading: false,
disabled: false,
icon: 'el-icon-refresh',
width: '100%',
autofocus: false,
nativeType: "button",
innerText: "重置",
show: false,
col: undefined,
click: undefined,
}
//组件提示消息配置
info:{
//提示消息类型,popover,tooltip
type:"popover"
}
col 布局规则
//所有组件均支持布局配置规则,
Input 输入框
{
type:"input",
title:"商品名称",
field:"goods_name",
value:"iphone 7",
col:{
span:12,
labelWidth:150
},
props: {
type: "text",
},
validate:[
{ required: true, message: '请输入goods_name', trigger: 'blur' },
],
}
props:
on 事件
InputNumber 数字输入框
{
type: "InputNumber",
field: "price",
title: "价格",
value: 1,
props: {
precision:2
},
}
AutoComplete 自动生成
//对于输入的值可做操作完成类似联想输入操作
{
type: "autoComplete",
title: "自动完成",
field: "auto",
value: "xaboy",
props: {
fetchSuggestions: function (queryString, cb) {
cb([
{value: queryString}, {value: queryString + queryString}
]);
}
}
}
Radio 单选框
{
type:"radio",
title:"是否包邮",
field:"is_postage",
value:"0",
options:[
{value:"0",label:"不包邮",disabled:false},
{value:"1",label:"包邮",disabled:true},
],
}
Checkbox 多选框
{
type:"checkbox",
title:"标签",
field:"label",
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},
]
}
Select 下拉选择框
{
type: "select",
field: "cate_id",
title: "产品分类",
value: ["104","105"],
options: [
{"value": "104", "label": "生态蔬菜", "disabled": false},
{"value": "105", "label": "新鲜水果", "disabled": false},
],
props: {
multiple: true
},
}
Switch 开关
{
type:"switch",
title:"是否上架",
field:"is_show",
value:"1",
props: {
activeValue:"1",
inactiveValue:"0",
},
}
Cascader 多级联动
{
type:"cascader",
title:"所在区域",
field:"address",
value:['陕西省','西安市','新城区'],
props:{
options:[{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}]
}
}
DatePicker 日期选择器
{
type: "DatePicker",
field: "section_day",
title: "活动日期",
value: ['2018-02-20', '2021-02-15'],
props: {
type: "datetimerange",
format: "yyyy-MM-dd HH:mm:ss",
placeholder:"请选择活动日期",
}
}
具体参数及配置参考官网DatePicker
TimePicker 时间选择器
{
type: "TimePicker",
field: "section_time",
title: "活动时间",
value: [],
props: {
isRange:true
},
}
具体参数及配置参考官网TimePicker
ColorPicker 颜色选择框
{
type: "ColorPicker",
field: "color",
title: "颜色",
value: '#ff7271',
}
Upload 上传
{
type: "upload",
field: "pic",
title: "轮播图",
value: [
'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg',
'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'
],
props: {
type:"select",
uploadType:"image",
action: "/upload.php",
name:"pic",
multiple: true,
accept:"image\/*",
limit: 2,
onSuccess:function (res, file) {
file.url = res.data.filePath;
}
},
}
详细上传文件要求及生命周期钩子Upload
Rate 评分
{
type:"rate",
field:"rate",
title:"推荐级别",
value:3.5,
props:{
max: 10,
},
validate:[
{required:true,type:'number',min:3, message: '请大于3颗星',trigger:'change'}
]
}
Slider 滑块
{
type:"slider",
field:"slider",
title:"滑块",
value:[0,52],
props:{
min: 0,
max: 100,
range: true,
}
}
Frame 框架
{
type:"frame",
title:"素材",
field:"fodder",
value:["/uploads/20131030/30-075657_191.jpg"],
props:{
type:"image",
src:"iframe.html",
maxLength:2,
},
validate:[
{required:true, type: 'array', min: 2, message: '请选择2张图片', trigger: 'change'}
],
}
官网详解Frame 框架
更多推荐
已为社区贡献3条内容
所有评论(0)