formx-vue2 v0.1.48

此项目封装了一些常用组件，目前包含表单、数字滚动组件，此后将持续进行更新完善。。。

基于vue@2.6.11、antd-design-vue@1.7.5

引入

    npm install formx-vue2

    main.js
    import "formx-vue2/lib/formx-vue2.css"
    import formx from "formx-vue2"
    Vue.use(formx)

表单

    <WyForm :options = "formOptions"  style="width:50%;margin:0 auto;"/>
    formOptions: {
        disabled: true,//不能编辑，比field中disabled优先级低
        theme: "white",//主题色
        formLayout: "inline",//horizontal|vertical|inline
        formItemLayout: {
          labelCol: {
            span: 4
          },
          wrapperCol: {
            span: 20
          }
        },
        actions: {
          layout: "rowHEndVCenter",//rowHCenterVCenter | rowHCenterVStart | rowHEndVCenter | rowHBetweenVStart | rowHBetweenVCenter | rowHBetweenVEnd | rowHStartVStart | rowHStartVBetween |  rowHStartVCenter | rowHEndVCenter | columnHStartVStart | columnHStartVCenter |
          buttons: [
            {
              show: false,//是否显示
              key: "submit",
              style: { width: "100px", marginRight: "20px" },
              text: "提交",
              type: "primary",
              manual: true,//是否自定义保存
              callback: this.submit,//提交 设置manual为true才会调用此方法
              callbackSuccess: this.summitSuccess,//保存成功
              callbackFailure: this.submitFailure,//保存失败
            },
            {
              show: false,
              key: "cancel",
              style: { width: "100px", marginRight: "20px" },
              text: "取消",
              manual: true,//是否自定义取消
              callback: this.cancel,//取消
            },
            {
              show: true,
              key: "edit",
              style: { width: "100px", marginRight: "20px" },
              text: "编辑",
              manual: true,//是否自定义编辑
              callback: this.edit,//编辑
            },
          ]
        },
        fields: [
          {
              key: "startTime",
              label: "开始时间",
              type: "date-picker",
              showTime: true,//是否显示小时分秒
              initValue: "",//初始值
              trigger: "blur",//何时触发校验
              validateReg: "^[0-9-:\\s\\/]+$",//校验正则
              validateErrorMessage: "日期为必选项",//校验失败提示信息
              style: { width: "48%", marginRight: "2%"  }
          },
          {
              key: "endTime",
              label: "结束时间",
              type: "date-picker",
              showTime: true,//是否显示小时分秒
              initValue: "",//初始值
              trigger: "blur",//何时触发校验
              validateReg: "^[0-9-:\\s\\/]+$",//校验正则
              validateErrorMessage: "日期为必选项",//校验失败提示信息
              style: { width: "48%", marginRight: "0"  }
          },
          {
              key: "xxx",
              label: "xxx",
              type: "input-number",
              unit: "%",
              placeholder: "请输入0 ~ 100的数值",
              initValue: null,//初始值
              validateReg: value => {
                if(value && value >=0 && value <= 100){
                  return true;
                }
                return false;
              },//校验函数
              trigger: "blur",//何时触发校验
              validateErrorMessage: "xxx在0 ~ 100之间",//校验失败提示信息
              style: { width: "48%", marginRight: "2%" }
          },
          {
              key: "yyy",
              label: "yyy",
              type: "input-number",
              unit: "%",
              placeholder: "请输入100 ~ 120的数值",
              initValue: null,//初始值
              validateReg: value => {
                if(value && value >=100 && value <= 120){
                  return true;
                }
                return false;
              },//校验函数
              trigger: "blur",//何时触发校验
              validateErrorMessage: "yyy值在100 ~ 120之间",//校验失败提示信息
              style: { width: "48%", marginRight: "2%" }
          },
          {
              key: "zzz",
              label: "zzz",
              type: "input-number",
              unit: "%",
              placeholder: "请输入0 ~ 100的数值",
              initValue: null,//初始值
              validateReg: value => {
                if(value && value >=0 && value <= 100){
                  return true;
                }
                return false;
              },//校验函数
              trigger: "blur",//何时触发校验
              validateErrorMessage: "放电效率值在0 ~ 100之间",//校验失败提示信息
              style: { width: "48%", marginRight: "2%" }
          },
          {
              key: "sss",
              label: "sss",
              type: "select",
              list: [{key: "充电", value: "1"}, {key: "放电", value: "2"}],//可选值
              initValue: "2",//初始值
              trigger: "blur",//何时触发校验
              validateReg: "^[^\s]+$",//校验正则
              validateErrorMessage: "sss为必选项",//校验失败提示信息
              style: { width: "48%", marginRight: "0"  }
          },
          {
            key: "sex",
            label: "性别",
            type: "radio",
            list: [{key: "男", value: "1"}, {key: "女", value: "2"}],//可选值
            initValue: "2",//初始值
            validateReg: "^[^\s]+$",//校验,支持正则
            validateErrorMessage: "性别为必选项",//校验失败提示信息
            style: { width: "30%", marginRight: "0" }
          },
        ]
      }

说明

自动生成form表单组件暂时只能自定义保存

数字滚动

示例

     <WyDigitRoll :value="num" decimal=4 unit="元" :showDelta="true" split=","></WyDigitRoll>

说明