专栏首页CRPER折腾记Vue 折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

Vue 折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

前言

在写这个的时候,还是不信邪的用了vue jsx的风格去写东西,

当组件的东西多了起来之后,各种报错;没错,最终我又回归到传统的写法;

上一篇写了个搜索的封装,到写这个的时候发现有所可以优化的地方。


效果图


实现思路和功能

基础的功能直接配置上来渲染,而上传组件就不大合适了;

所以选择了slot来实现,如何保证传入的form-item的布局一致,则是拿slot-scope

我这边选型用的是vue 2.6 +的版本,所以直接用的是最新的写法

而且作为表单组件,校验这些肯定需要考虑,所以数据的构造改造了下,

对于校验规则这些,因为走的是antd form用的那套,所以我直接在传递的时候把对应的属性拍平了,

在里面再进行组合构建需要渲染的数据结构。样式依旧需要自己修正(在维护大佬没有修正的情况下)

演示的代码用法

<form-list @change="onFormListChange">
       <template #field="{options}">
         <a-form-item label="Upload" v-bind="options">
           <a-upload
             v-decorator="[
               'upload',
               {
                 valuePropName: 'fileList',
                 getValueFromEvent: normFile
               }
             ]"
             name="logo"
             action="/upload.do"
             list-type="picture"
           >
             <a-button> <a-icon type="upload" /> Click to upload </a-button>
           </a-upload>
         </a-form-item>
       </template>
     </form-list>

复制代码

代码

  • FieldRender.vue
<template>
<a-form-item
  :label="fieldOptions.labelText"
  :label-col="fieldOptions.labelCol"
  :wrapper-col="fieldOptions.wrapperCol"
>
  <a-input
    v-if="fieldOptions.fieldName && fieldOptions.type === 'text'"
    :size="fieldOptions.size ? fieldOptions.size : 'default'"
    v-decorator="[
      fieldOptions.fieldName,
      {
        initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
        rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
      }
    ]"
    :placeholder="fieldOptions.placeholder"
  />
  <a-select
    v-else-if="fieldOptions.fieldName && fieldOptions.type === 'select'"
    style="width: 100%"
    showSearch
    :filterOption="selectFilterOption"
    :size="fieldOptions.size ? fieldOptions.size : 'default'"
    allowClear
    v-decorator="[
      fieldOptions.fieldName,
      {
        initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : undefined,
        rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
      }
    ]"
    :placeholder="fieldOptions.placeholder"
  >
    <template v-for="(item, index) in fieldOptions.options">
      <a-select-option :value="item.value" :key="index">
        {{ item.label }}
      </a-select-option>
    </template>
  </a-select>
  <a-input-number
    v-else-if="fieldOptions.fieldName && fieldOptions.type === 'number'"
    :size="fieldOptions.size ? fieldOptions.size : 'default'"
    :min="fieldOptions.min ? fieldOptions.min : 1"
    style="width: 100%"
    v-decorator="[
      fieldOptions.fieldName,
      {
        initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
        rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
      }
    ]"
    :placeholder="fieldOptions.placeholder"
  />
  <a-radio-group
    v-else-if="fieldOptions.fieldName && fieldOptions.type === 'radio' && Array.isArray(fieldOptions.options)"
    :size="fieldOptions.size ? fieldOptions.size : 'default'"
    buttonStyle="solid"
    v-decorator="[
      fieldOptions.fieldName,
      {
        initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
        rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
      }
    ]"
  >
    <template v-for="(item, index) in fieldOptions.options">
      <a-radio-button :key="index" :value="item.value">{{ item.label }} </a-radio-button>
    </template>
  </a-radio-group>

  <a-date-picker
    v-else-if="fieldOptions.fieldName && fieldOptions.type === 'datetime'"
    :size="fieldOptions.size ? fieldOptions.size : 'default'"
    :placeholder="fieldOptions.placeholder"
    v-decorator="[
      fieldOptions.fieldName,
      {
        initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
        rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
      }
    ]"
  />
  <a-range-picker
    v-else-if="fieldOptions.fieldName && fieldOptions.type === 'datetimeRange'"
    :size="fieldOptions.size ? fieldOptions.size : 'default'"
    v-decorator="[
      fieldOptions.fieldName,
      {
        initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
        rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
      }
    ]"
    :placeholder="fieldOptions.placeholder"
  />
  <a-cascader
    v-else-if="fieldOptions.fieldName && fieldOptions.type === 'cascader'"
    :size="fieldOptions.size ? fieldOptions.size : 'default'"
    :options="fieldOptions.options"
    :showSearch="{ cascaderFilter }"
    v-decorator="[
      fieldOptions.fieldName,
      { initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : [] }
    ]"
    :placeholder="fieldOptions.placeholder"
  />
  <a-time-picker
    v-else-if="fieldOptions.fieldName && fieldOptions.type === 'timepicker'"
    v-decorator="[
      fieldOptions.fieldName,
      {
        initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
        rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
      }
    ]"
    :size="fieldOptions.size ? fieldOptions.size : 'default'"
  />
</a-form-item>
</template>

<script>
export default {
props: {
  fieldOptions: {
    // 待渲染的对象
    type: Object,
    default: function() {
      return {};
    }
  }
},
methods: {
  selectFilterOption(input, option) {
    // 下拉框过滤函数
    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  },
  cascaderFilter(inputValue, path) {
    // 级联过滤函数
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  }
}
};
</script>


复制代码
  • FormList.vue
<template>
 <div class="form-list-wrapper">
   <a-form :layout="formLayout" :form="form">
     <template v-for="(item, index) in renderDataSource">
       <field-render :fieldOptions="item" :key="item.fieldName" />
     </template>
     <slot name="field" :options="GlobalOptions"></slot>

     <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
       <a-button type="primary" :size="size" @click="handleSubmit">查询</a-button>
       <a-button :size="size" style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
     </a-form-item>
   </a-form>
 </div>
</template>

<script>
import FieldRender from './FieldRender';
export default {
 name: 'FormList',
 components: {
   FieldRender
 },
 props: {
   formLayout: {
     // 表单布局
     type: String, // 'horizontal'|'vertical'|'inline'
     default: 'horizontal'
   },
   datetimeTotimeStamp: {
     // 是否把时间控件的返回值全部转为时间戳
     type: Boolean,
     default: false
   },
   size: {
     // 全局控件大小
     type: String,
     default: 'default'
   },
   responsive: {
     // 表单项的响应布局
     type: Object,
     default: function() {
       return {
         labelCol: { span: 5 },
         wrapperCol: { span: 16 }
       };
     }
   },
   dataSource: {
     type: Array,
     default: function() {
       return [
         {
           type: 'text', // 控件类型
           labelText: '控件名称', // 控件显示的文本
           fieldName: 'formField1',
           placeholder: '文本输入区域', // 默认控件的空值文本
           rules: [
             {
               required: true,
               message: '必填'
             }
           ]
         },
         {
           labelText: '数字输入框',
           type: 'number',
           fieldName: 'formField2',
           placeholder: '这只是一个数字的文本输入框'
         },
         {
           labelText: '单选框',
           type: 'radio',
           fieldName: 'formField3',
           defaultValue: '0',
           options: [
             {
               label: '选项1',
               value: '0'
             },
             {
               label: '选项2',
               value: '1'
             }
           ]
         },
         {
           labelText: '日期选择',
           type: 'datetime',
           fieldName: 'formField4',
           placeholder: '选择日期'
         },
         {
           labelText: '日期范围',
           type: 'datetimeRange',
           fieldName: 'formField5',
           placeholder: ['开始日期', '选择日期']
         },
         {
           labelText: '时刻选择',
           type: 'timepicker',
           fieldName: 'formField8',
           placeholder: '请选择时刻(时间)'
         },
         {
           labelText: '下拉框',
           type: 'select',
           fieldName: 'formField7',
           placeholder: '下拉选择你要的',
           options: [
             {
               label: 'text1',
               value: '0'
             },
             {
               label: 'text2',
               value: '1'
             }
           ]
         },
         {
           labelText: '联动',
           type: 'cascader',
           fieldName: 'formField6',
           placeholder: '级联选择',
           options: [
             {
               value: 'zhejiang',
               label: 'Zhejiang',
               children: [
                 {
                   value: 'hangzhou',
                   label: 'Hangzhou',
                   children: [
                     {
                       value: 'xihu',
                       label: 'West Lake'
                     },
                     {
                       value: 'xiasha',
                       label: 'Xia Sha',
                       disabled: true
                     }
                   ]
                 }
               ]
             },
             {
               value: 'jiangsu',
               label: 'Jiangsu',
               children: [
                 {
                   value: 'nanjing',
                   label: 'Nanjing',
                   children: [
                     {
                       value: 'zhonghuamen',
                       label: 'Zhong Hua men'
                     }
                   ]
                 }
               ]
             }
           ]
         }
       ];
     }
   }
 },
 beforeCreate() {
   this.form = this.$form.createForm(this);
 },
 computed: {
   GlobalOptions() {
     // 全局配置
     return {
       size: this.size,
       ...this.formItemLayout
     };
   },
   renderDataSource() {
     // 重组传入的数据,合并全局配置,子项的配置优先全局
     return this.dataSource.map(item => ({ ...this.GlobalOptions, ...item }));
   },
   formItemLayout() {
     // 更改布局项目的尺寸
     const { formLayout } = this;
     if (formLayout === 'horizontal') {
       return this.responsive;
     } else {
       return {};
     }
   },
   buttonItemLayout() {
     // 提交按钮布局
     const { formLayout } = this;
     return formLayout === 'horizontal'
       ? {
           wrapperCol: { span: 14, offset: 4 }
         }
       : {};
   }
 },
 methods: {
   handleParams(obj) {
     // 判断必须为obj
     if (!(Object.prototype.toString.call(obj) === '[object Object]')) {
       return {};
     }
     let tempObj = {};
     for (let [key, value] of Object.entries(obj)) {
       if (Array.isArray(value) && value.length <= 0) continue;
       if (Object.prototype.toString.call(value) === '[object Function]') continue;

       if (this.datetimeTotimeStamp) {
         // 若是为true,则转为时间戳
         if (Object.prototype.toString.call(value) === '[object Object]' && value._isAMomentObject) {
           // 判断moment
           value = value.valueOf();
         }
         if (Array.isArray(value) && value[0]._isAMomentObject && value[1]._isAMomentObject) {
           // 判断moment
           value = value.map(item => item.valueOf());
         }
       }
       // 若是为字符串则清除两边空格
       if (value && typeof value === 'string') {
         value = value.trim();
       }
       tempObj[key] = value;
     }

     return tempObj;
   },
   handleSubmit(e) {
     // 触发表单提交,也就是搜索按钮
     e.preventDefault();
     this.form.validateFields((err, values) => {
       if (!err) {
         console.log('处理前的表单数据', values);
         const queryParams = this.handleParams(values);
         this.$emit('change', queryParams);
       }
     });
   },
   resetSearchForm() {
     // 重置整个查询表单
     this.form.resetFields();
     this.$emit('change', null);
   }
 }
};
</script>


<style lang="scss">
.form-list-wrapper {
 .ant-form-inline {
   .ant-form-item {
     display: flex;
     margin-bottom: 12px;
     margin-right: 0;

     .ant-form-item-control-wrapper {
       flex: 1;
       display: inline-block;
       vertical-align: middle;
     }

     > .ant-form-item-label {
       line-height: 32px;
       padding-right: 8px;
       width: auto;
     }
     .ant-form-item-control {
       height: 32px;
       line-height: 32px;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       .ant-form-item-children {
         min-width: 160px;
       }
     }
   }
 }

 .table-page-search-submitButtons {
   display: block;
   margin-bottom: 24px;
   white-space: nowrap;
 }
}
</style>

复制代码

问题

暴露的方法和搜索组件一样,@change回来表单数据;

目前有点bug的是,操作父的props会造成死循环(在有slot的情况下,因为slot-scope拿的是

props经过computed执行的。排查了许久,目前还没找出具体缘由;


总结

antd vue版本目前的功能复现上,还是有所欠缺,可能vuereact实现的机子不一致导致;

不管怎么说,不考虑极端情况下,目前这个库用起来感觉还好;

至少是可用状态,后续若有修正,会继续更新文章,谢谢阅读

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 巧用滑动选项卡,提升用户体验

    目前针对移动设备的Cordova应用程序和渐进式的Web应用程序非常流行。提升用户体验和交互的关键是传递出原生的视觉效果和感觉,这并不总是一件容易的事情。当然,...

    疯狂的技术宅
  • 只写CSS的禅

    CSS不受欢迎是一个很普遍的现象。导致这一现象的原因有很多,但可以归结为:CSS的不可预测性。如果你在开发中从未有过这种经历:过调试一个样式时,一不小心破坏布局...

    疯狂的技术宅
  • 1、TypeScript初识及环境搭建

    TypeScript最近很火,有很多开源的项目也是由其开发的,如果你是一名前端开发工程师或准备要成为一名前端开发工程师的话,现在如果再不学习TypeScript...

    用户1272076
  • 为什么我们喜爱,使用和支持Vue.js

    让我告诉你一个关于Vue的故事,不仅仅是从Vue开发者的角度,我也会尝试着解释在Monterail中使用它的很多原因,你将会发现采用它对开发者和产品所有者来说都...

    疯狂的技术宅
  • 为什么我会选择 React 而不是 Vue?

    你注意到我过于圆滑的标题了吗?我将依据我所喜欢的方式去构建这个对话,而不是我客观上认为的唇枪舌战。我想后者并不会起作用。

    疯狂的技术宅
  • 理解vue中的插槽------slot与slot-scope

    单个插槽是vue官方的叫法。你也可以叫它默认插槽。另外因为该插槽不用设置name属性,也可以称其为匿名插槽。 先来看一个例子。 父组件:

    用户1272076
  • 2019年 Vue.js 报告中的亮点 [每日前端夜话0x3B]

    最新版的 State of Vue.js 报告是现场直播,它为 Vue 生态系统的状态以及团队未来的储备提供了一些有价值的见解。让我们仔细看看。

    疯狂的技术宅
  • Vue3.0马上就要来了,TypeScript学会了没?

    大家都知道Vue的作者是尤雨溪,而像尤雨溪这种神级的开发者可能真的具有想改变世界的想法。而有的小伙伴可能要想:神也是人,改变世界也需要钱啊!而Vue既然是一款免...

    用户1272076
  • 渐进式 JavaScript 框架 Vue.js,精华都在这了

    Vue.js,这个软件可是当下最火的 JavaScript 框架之一,相比其他框架,Vue.js 显得可以更加快速地上手并使用,如果你是前端开发人员,想知道入...

    疯狂的技术宅
  • 最易理解的VUE双向绑定原理不足70行代码搞定,逐行注释!

    用户1272076

扫码关注云+社区

领取腾讯云代金券