vue-admin-form

1.0.0 • Public • Published

前端组件库

介绍

前端的组件库 npm:

表单: vue-admin-form

软件架构

软件架构说明

安装教程

  1. npm install htadmin-form -S
  2. 需要element-ui 请 npm install element-ui -S
  3. 需要jsx 如何安装移步https://github.com/vuejs/babel-plugin-transform-vue-jsx

npm 地址 https://www.npmjs.com/package/vue-admin-form

使用说明

引入(基础) // main.js

import VueAdmin from 'vue-admin-form';

Vue.use(VueAdmin);

表单:

html

<elm-form ref="myForm" :config="config" :formConfig="{showCancelButton: false, confirmButtonText: '点击添加'}"> </elm-form>

js

import * as type from "vue-admin-form"; // 引入类型

config: [ new type.Input({ key: 'name', label: '名字', value: ''}) ] // 准备表单格式数据......

效果

enter image description here

弹窗式表单

html

<elm-alert-form ref="alertForm" :config="config"> </elm-alert-form>

js

import {Input} from "vue-admin-form";

config: [ new Input({ key: 'name', label: '名字' }) ]

打开 表单js

this.$refs.alertForm.openAlert({name: '名字'}).then( // alertForm是表单html ref的名字 第一个参数是初始化数据对象, 第二个是配置项

({form, close}) => { this.$message(JSON.stringify(form));

close();//调用close在请求完成之后关闭

}

)

效果

enter image description here

数据类型(扩展)

公用配置项 类型 说明
key string 必传且不能重复(表单最后输出对象的key值)
label string 表单控件左侧的标签名。如果不传则无表单格式(适用与在表单中间插入自定义模板)
value all 可以为空,初始化数据作用
rules array 验证规则,参见 async-validator

// 特殊配置项

可用控件名称 类型 特殊配置项
输入框 Input inputType(input的type类型), placeholder
选择框 Select options(可选列表-对象/字符串数组,可传一个返回数组的promise),placeholder,labelKey(默认值:label),valueKey(默认值:value)
单个日期 SingDate placeholder
Switch开关 Switch trueValue,falseValue (默认值:true,false)
单选框 Radio options(字符串数组,也可以promise)
复选框 Checkbox options(字符串数组,也可以promise),max(数字类型,最大可选),min(最小可选)
UploadImg UploadImg url(上传图片路径), max(最大数量), size(大小限制/kb)
富文本 Editor .
自定义控件 CustomComponent 见下文

......更多

表单配置项

表单使用 formConfig属性 传入一个对象

弹窗表单使用 openAlert函数的 第二个参数 (对象)

传入对象的配置项

参数 类型 说明 例子/默认值
label-width string 标签的宽度 '120px'
showCancelButton boolean 是否显示取消按钮 true
showConfirmButton boolean 是否显示确定按钮 true
confirmButtonText string 确定按钮的文本 '确定'
cancelButtonText string 取消按钮的文本 '取消'
closeOnClickModal boolean 是否可通过点击遮罩关闭(弹窗可用) false
... more 更多参考element-ui ...

DEMO请看附件

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

Package Sidebar

Install

npm i vue-admin-form

Weekly Downloads

6

Version

1.0.0

License

ISC

Unpacked Size

50.1 kB

Total Files

19

Last publish

Collaborators

  • hdhdhd