1.0.6 • Published 5 years ago

htadmin-form v1.0.6

Weekly downloads
-
License
ISC
Repository
-
Last release
5 years ago

表单的封装

介绍

前端的组件库 npm:

表单: htadmin-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/htadmin-form

使用说明

在main.js中写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import HtAdmin from 'htadmin-form';
Vue.use(HtAdmin);
Vue.use(ElementUI);
new Vue({
   el: '#app',
   render: h => h(App)
 });

表单:

html

ps:config是表单的各项数据类型, formConfig是整个表单的配置例如 按钮显示隐藏

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

js

import * as type from "htadmin-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 "htadmin-form";

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

打开 表单js

   // 第一个参数是 初始化表单数据,可不传, 第二个参数是各种配置项
                  this.$refs.alertForm.openAlert({name: '名字'}, {
                      labelWidth: '80px',
                      closeOnClickModal: false,
                      /**
                       * 关闭之前
                       * @param action  action 的值为'confirm', 'cancel'或'close';
                       * @param instance instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法;
                       * @param done done 用于关闭 MessageBox 实例
                       * @param form form是表单的数据
                       */
                      beforeClose: function (action, instance, done, form) {
                          if (action === 'confirm') {
                              instance.confirmButtonLoading = true;
                              instance.confirmButtonText = '执行中...';
                              setTimeout(() => {
                                  done();
                                  setTimeout(() => {
                                      instance.confirmButtonLoading = false;
                                  }, 300);
                              }, 2000)
                          } else {
                              done();
                          }
                      }
                  });

效果

enter image description here

数据类型(扩展)

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

// 特殊配置项

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

......更多

表单配置项

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

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

传入对象的配置项

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

DEMO请看附件

参与贡献

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

码云特技

  1. 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
  2. 码云官方博客 blog.gitee.com
  3. 你可以 https://gitee.com/explore 这个地址来了解码云上的优秀开源项目
  4. GVP 全称是码云最有价值开源项目,是码云综合评定出的优秀开源项目
  5. 码云官方提供的使用手册 https://gitee.com/help
  6. 码云封面人物是一档用来展示码云会员风采的栏目 https://gitee.com/gitee-stars/
1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago