Динамически генерируйте формы форм, больше не беспокойтесь о формах

GitHub JavaScript Vue.js
Динамически генерируйте формы форм, больше не беспокойтесь о формах

Используйте iview для быстрого создания формы

Конструктор форм с функциями сбора, проверки и отправки данных, включая флажки, переключатели, поля ввода, раскрывающиеся поля выбора и другие элементы, а также функции выбора времени, даты, выбора цвета и загрузки файлов/изображений.

Установить

npm install form-create

OR

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">
<script src="node_modules/iview/dist/iview.min.js"></script>

<!-- import formCreate -->
<script src="dist/form-create.min.js"></script>

использовать

let rules = [],el = document.body;
new Vue({
  mounted:function(){
    var $f = this.$formCreate(rules,el);
  }
})

$formCreate параметры

rulesПравила формы [inputRule, selectRule,...]

elВставленный узел Dom по умолчанию имеет значение document.body.

Метод экземпляра $f

получить данные формы

$f.formData()

Изменить данные формы

$f.changeField(field,value)

проверка формы

$f.validate(successFn,errorFn)

Указанные поля проверки формы

$f.validateField(field,errorFn)

Сброс форма

$f.resetFields()

удалить форму

$f.remove()

Получить все поля формы

$f.fields()

представить форму

$f.submit()

правила правила:

скрытое скрытое поле

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

поле ввода ввода

inputRule :
{
  type:"input",
  title:"商品名称", //label名称
  field:"goods_name" , //字段名称
  value:"iphone 7", //input值,
  props: {
        "type": "text", //输入框类型，可选值为 text、password、textarea、url、email、date
        "clearable":false, //是否显示清空按钮
        "disabled": false, //设置输入框为禁用状态
        "readonly": false, //设置输入框为只读
        "rows": 4, //文本域默认行数，仅在 textarea 类型下有效
        "autosize": false, //自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
        "number": false, //将用户的输入转换为 Number 类型
        "autofocus": false, //自动获取焦点
        "autocomplete": "off", //原生的自动完成功能，可选值为 off 和 on
        "placeholder": "请输入商品名称", //占位文本
        "size": "default", //输入框尺寸，可选值为large、small、default或者不设置,
        "spellcheck": false //原生的 spellcheck 属性
    },
  validate:[
     { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
     { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
   ]
}

проверить правила проверки формы, см. конкретную конфигурацию:GitHub.com/один и/как…

радио кнопка радио

radioRule :
{
  type:"radio",
  title:"是否包邮",
  field:"is_postage",
  value:"0", //input值,
  options:[
    {value:"0",label:"不包邮",disabled:false},
    {value:"1",label:"包邮",disabled:true}
  ],
  props: {
        "type":undefined, //可选值为 button 或不填，为 button 时使用按钮样式
        "size":"default", //单选框的尺寸，可选值为 large、small、default 或者不设置
    	"vertical":false //是否垂直排列，按钮样式下无效
    },
  validate:[]
}

флажок флажок

checkboxRule :
{
  type:"checkbox",
  title:"标签",
  field:"label",
  value:[
    "1","2","3"
  ],//input值,
  options:[
    {value:"1",label:"好用",disabled:true},
    {value:"2",label:"方便",disabled:false},
    {value:"3",label:"实用",disabled:false},
    {value:"4",label:"有效",disabled:false}
  ],
  props: {
        "size":"default" //多选框组的尺寸，可选值为 large、small、default 或者不设置
    },
  validate:[]
}

переключатель переключатель

switchRule :
{
  type:"switch",
  title:"是否上架",
  field:"is_show",
  value:"1",//input值,
  props: {
        "size":"default", //开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用 large。
        "disabled":false,//禁用开关
        "trueValue":"1", //选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
        "falseValue":"0" //没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
    },
  slot: {
    open:"上架", //自定义显示打开时的内容
    close:"下架" //自定义显示关闭时的内容
  }, //slot可以不用配置
  validate:[]
}

выберите селектор

selectRule :
{
    type: "select",
    field: "cate_id",
    title: "产品分类",
    value: "104", //input值, multiple为true时 value为数组 [value,value,...]
    props: {
        "multiple": false, //是否支持多选
        "clearable": false, //是否可以清空选项，只在单选时有效
        "filterable": false, //	是否支持搜索
        // 暂不支持远程搜索
        // "remote": false, //是否使用远程搜索
        // "remote-method":()=>{}, //远程搜索的方法
        // "loading": false, //当前是否正在远程搜索
        // "loading-text": "加载中", //远程搜索中的文字提示
        "size":"default", //选择框大小，可选值为large、small、default或者不填
        "placeholder": "请选择", //选择框默认文字
        "not-found-text": "无匹配数据", //当下拉列表为空时显示的内容
        "placement": "bottom", //弹窗的展开方向，可选值为 bottom 和 top
        "disabled": false //是否禁用
    },
    options: [
      {"value": "104", "label": "生态蔬菜", "disabled": false},
      {"value": "105", "label": "新鲜水果", "disabled": false}
    ]
}

Выбор даты DatePicker

DatePickerRule :
{
    type: "DatePicker",
    field: "section_day",
    title: "活动日期",
    value: 1519110955000 || new Date(), //input值, type为daterange,datetimerange value为数组 [start_value,end_value]
    props: {
        "type": "date", //显示类型，可选值为 date、daterange、datetime、datetimerange、year、month
        "format": "yyyy-MM-dd", //展示的日期格式
        "placement": "bottom-start", //	日期选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
        "placeholder":"请选择获得时间", //占位文本
        "confirm":false, //是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭
        "size":"default", //尺寸，可选值为large、small、default或者不设置
        "disabled":false, //是否禁用选择器
        "clearable":true, //是否显示清除按钮
        "readonly":false, //完全只读，开启后不会弹出选择器
        "editable":false //文本框是否可以输入
    },
    validate:[]
}

Средство выбора времени TimePicker

TimePickerRule :
{
    type: "TimePicker",
    field: "section_time",
    title: "活动时间",
    value: [], //input值, type为timerange value为数组 [start_value,end_value]
    props: {
        "type": "timerange", //显示类型，可选值为 time、timerange
        "format": "HH:mm:ss", //展示的时间格式
        "steps": [], //下拉列表的时间间隔，数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时，分钟会显示：00、15、30、45。
        "placement": "bottom-start", //	时间选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
        "placeholder":"请选择获得时间", //占位文本
        "confirm":false, //是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭
        "size":"default", //尺寸，可选值为large、small、default或者不设置
        "disabled":false, //是否禁用选择器
        "clearable":true, //是否显示清除按钮
        "readonly":false, //完全只读，开启后不会弹出选择器
        "editable":false //文本框是否可以输入
    },
    validate:[]
}

Поле ввода числа InputNumber

InputNumberRule :
{
    type: "InputNumber",
    field: "sort",
    title: "排序",
    value: 0, //input值
    props: {
        "max": undefined, //最大值
        "min": undefined, //最小值
        "step": 1, //每次改变的步伐，可以是小数
        "size":"default", //输入框尺寸，可选值为large、small、default或者不填
        "disabled":false, //设置禁用状态
        "readonly":false, //是否设置为只读
        "editable":true, //是否可编辑
        "precision":0 //数值精度
    },
    validate:[]
}

Палитра цветов ColorPicker

ColorPickerRule :
{
    type: "ColorPicker",
    field: "coloe",
    title: "颜色",
    value: '#ff7271', //input值
    props: {
        "alpha": false, //是否支持透明度选择
        "hue": true, //是否支持色彩选择
        "recommend": false, //是否显示推荐的颜色预设
        "size":"default", //尺寸，可选值为large、small、default或者不设置
        "colors":[], //自定义颜色预设
        "format":"hex" //颜色的格式，可选值为 hsl、hsv、hex、rgb,开启 alpha 时为 rgb，其它为 hex
    },
    validate:[]
}

Загрузить

UploadRule :
{
    type: "Upload",
    field: "pic",
    title: "轮播图",
    value: [], //input值
    props: {
        "type":"select", //上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）
        "action": "", //上传的地址，必填
        "headers": {}, //设置上传的请求头部
        "multiple": false, //是否支持多选文件
        "data":{}, //上传时附带的额外参数
        "name":"", //上传的文件字段名
        "with-credentials":false, //支持发送 cookie 凭证信息
        "show-upload-list":true, //是否显示已上传文件列表
        "accept":"", //接受上传的文件类型
        "format":[], //支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用
        "max-size":undefined, //文件大小限制，单位 kb
        "beforeUpload":()=>{}, //上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传
        "onProgress":()=>{}, //文件上传时的钩子，返回字段为 event, file, fileList
        "onSuccess":( push, response, file, fileList)=>{
          let filePath = response.data.filePath;
          push(filePath);
          //其他操作
        }, //文件上传成功时的钩子，返回字段为 push, response, file, fileList.  push(filePath) 将上传后的路径添加到value中
        "onError":()=>{}, //文件上传失败时的钩子，返回字段为 error, file, fileList
        "onPreview":()=>{}, //点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据
        "onRemove":()=>{}, //文件列表移除文件时的钩子，返回字段为 file, fileList
        "onFormatError":()=>{}, //文件格式验证失败时的钩子，返回字段为 file, fileList
        "onExceededSize":()=>{}, //文件超出指定大小限制时的钩子，返回字段为 file, fileList
        "default-file-list":[
            {
                name: 'img1.jpg',
                url: 'http://www.xxx.com/img1.jpg'
            },
            {
                name: 'img2.jpg',
                url: 'http://www.xxx.com/img2.jpg'
            }
        ] // 默认已上传的文件列表
    },
    validate:[]
}

принять тип файла:developer.Mozilla.org/en-US/docs/…

Формат времени

имя иллюстрировать Пример
yyyy год (четыре цифры) 2016
yy год (две цифры) 16
MM месяц (две цифры) 01
M месяц (один бит) 1
MMMM Месяц (англ.) January
MMM Месяц (английская аббревиатура) Jan
dd дата (две цифры) 01
d дата (один бит) 1
Do дата (сокращенно) 1st
DD неделя (две) 00
D первая неделя) 0
dddd Неделя (англ.) Monday
ddd Неделя (английская аббревиатура) Mon
HH Часы (две цифры в 24-часовом формате) 01
H Часы (одна цифра в 24-часовом формате) 1
hh Часы (две цифры в 12-часовом формате) 01
h Час (12-часовые часы) 1
mm минуты (две цифры) 01
m минуты (один бит) 1
ss секунды (две цифры) 01
s секунды (один бит) 1
SSS миллисекунды (три цифры) 019
SS миллисекунды (две цифры) 01
S миллисекунды (один бит) 1
A AM и PM (верхний регистр) AM/PM
a AM и PM (строчные буквы) am/pm
ZZ Часовой пояс +0800

Выше приведены форматы даты, поддерживаемые iView, вы можете свободно комбинировать нужные вам типы, например:

  • гггг М месяц д день: 1 января 2016 г.
  • MM/dd/yy: 24.12.16
  • Точка H m минуты s секунды: 9:41:00

Контакт и вознаграждение

Почта для связи :xaboy2005@qq.com
Награда и свип здесь, пожалуйста, оставьте свое имя и фамилию

https://raw.githubusercontent.com/xaboy/form-builder/master/exceptional.jpg

Категории