vue-form-layer v1.2.15

form-line 表单

解决：复杂布局、多重标记（前后端校验、标记信息等）方案。 特点：高度灵活性、可控性、扩展性。

演示

github pages

npm 安装

npm i vue-form-layer -S

使用

import VueFormLayer from 'vue-form-layer'
import 'vue-form-layer/dist/vue-form-layer.css'

Vue.use(VueFormLayer)

// 或者直接使用script导入
<script src="https://unpkg.com/vue-form-layer/dist/vue-form-layer.min.js"></script>
<script src="https://unpkg.com/vue-form-layer/dist/vue-form-layer.css"></script>

基本布局

<vue-form :model="form">
    <vue-form-line 
    :cols="[{ label: '名字' },
    { label: '年龄' }]">
        <input type="text" v-model="form.name">
        <input type="text" v-model="form.age">
    </vue-form-line>
</vue-form>

增加图层

<vue-form :model="form" :layer="layer">
    <vue-form-line 
    :cols="[{ label: '名字', prop: '/form/name' },
            { label: '年龄', prop: '/form/age'}]">
        <input type="text" v-model="form.name">
        <input type="text" v-model="form.age">
    </vue-form-line>
</vue-form>

<script>
export default {
  data () {
    return {
      form: {},
      layer: [
        {
          id: "layer-1",
          show: true,
          data: [
            {
              prop: "/form/name",
              data: "我是名字"
            },
            {
              prop: "/form/age",
              data: "我是年龄"
            }
          ]
        },
      ]
    }
  }
}
</script>

自定义显示模板

<vue-form :model="form" :layer="layer">
    <vue-form-line 
    :cols="[{ label: '名字', prop: '/form/name' },
            { label: '年龄', prop: '/form/age'}]">
        <input type="text" v-model="form.name">
        <input type="text" v-model="form.age">
    </vue-form-line>
</vue-form>

<script>
export default {
  data () {
    var templateFn = data => {
      return 
        // your component
        // vue1.0支持 this.$createElement("component", { attrs: { data: data } });
        
        // vue2.0支持jsx
        // 可以直接写 <component data={data}></component>
        // 或者写引入的组件
        
        // 不支持的可以
            npm install\
            babel-plugin-syntax-jsx\
            babel-plugin-transform-vue-jsx\
            babel-helper-vue-jsx-merge-props\
            babel-preset-es2015\
          --save-dev
        // .babelrc
            {
              "presets": ["es2015"],
              "plugins": ["transform-vue-jsx"]
            }
        // 然后就可以愉快地写jsx了
    };
    return {
      form: {},
      layer: [
        {
          id: "layer-1",
          show: true,
          data: [
            {
              prop: "/form/name",
              template: templateFn,
              data: // your show data
            },
            {
              prop: "/form/age",
              data: "我是年龄"
            }
          ]
        },
      ]
    }
  }
}
</script>

自定义校验

<vue-form :model="form" ref="form" :layer="layer">
    <vue-form-line 
    :cols="[{ label: '名字', prop: '/form/name' },
            { label: '年龄', prop: '/form/age'}]">
        <input type="text" v-model="form.name" @blur="recalculateField('/form/name')">
        <input type="text" v-model="form.age" @blur="recalculateField('/form/age')">
    </vue-form-line>
</vue-form>

<script>
export default {
  data () {
    const successValidate = {
      disabled: true,
      referenceBorderColor: "#67c23a"
    };
    const errorValidate = message => {
      return {
        message: message,
        disabled: false,
        referenceBorderColor: "#F56C6C"
      };
    };
    const recalculateName = value => {
      if (value === "") {
        return errorValidate("name is required");
      } else {
        return successValidate;
      }
    };
    const recalculateAge = value => {
      if (value === "") {
        return errorValidate("age is required");
      } else if (value < 18) {
        return errorValidate("age not less then 18");
      } else {
        return successValidate;
      }
    };
    return {
      form: {},
      layer: [
        {
          id: "layer-1",
          show: true,
          view: {
            disabled: true
          },
          data: [
            {
              prop: "/form/name",
              recalculate: recalculateName,
              data: ""
            },
            {
              prop: "/form/age",
              recalculate: recalculateAge,
              data: ""
            }
          ]
        },
      ]
    }
  },
  methods: {
    recalculateField(prop) {
      this.$refs['form'].recalculateField('layer-1', prop);
    }
  }
}
</script>

vue-form Attributes

vue-form Methods

vue-form Events

vue-form layer 图层 array

layer view 图层默认配置 object

layer data 图层item配置 array

vue-form-line Attributes

cols item布局配置

版本

1.2.14

2018-4-22

• 迁移到 rollup，优化组件打包，支持esm格式。

• form 增加 isTable 属性，以更少的node渲染 table，提高渲染性能。

1.2.13

2018-4-8

• 图层使用懒加载，在鼠标移入reference或重算时加载，提高组件渲染性能。

1.2.11

2018-4-8

• form增加line-height属性。

历史版本