vue form表单的封装--使用的是elementUI

该组件是一个动态生成表单的Vue组件,通过传入formList参数和插槽的方式实现表单项的定制化渲染

组件的封装

HCommonFormItem

根据传入的"formList"参数生成一组表单项,并通过插槽(slot)将表单项渲染出来。

  1. 在components下创建commonFormItem文件夹,在该文件夹下创建index.vue文件




  • 组件中使用了两个子组件:
    • HCommonForm: 这是一个自定义的表单组件,用于展示和处理表单数据。
    • HCommonBlock: 这是一个自定义的块级元素组件,用于包裹表单项,并提供标题和边框等样式。

    组件的模板部分使用了Vue的指令和循环语法,通过v-for指令遍历formList数组,生成多个HcommonBlock组件。每个HcommonBlock组件中包含了一个HCommonForm组件,根据item对象的属性设置HCommonForm组件的props。

HCommonBlock

该组件是实现一个可定制样式的块级容器组件,可以根据需要显示标题和内容,并支持选择不同的选项卡。

  1. 在components下创建HCommonBlock文件夹,在该文件夹下创建index.vue文件






  • 模板中的
    是整个容器的最外层元素,它使用flex布局,并且垂直居中对齐。它可以根据传入的props动态添加不同的类名,从而实现样式的变化。
  • 中会显示标题,如果没有传入标题,则会根据blockTitleList数组中的数据渲染多个标题选项,点击选项会触发handleChooseTab方法,并通过$emit将选中的选项值传递给父组件。
  • 用于显示内容,可以根据传入的props进行样式控制,如是否有边框、是否可滚动等。
HCommonForm

该组件实现了一个灵活配置的表单组件,可以根据传入的数据动态生成表单项,并支持各种类型的输入框、下拉框、日期选择等功能。同时也包含了上传文件、显示图片、查看PDF等功能。

  1. 在components下创建HCommonForm文件夹,在该文件夹下创建index.vue文件






  • 重要部分
    • 模板部分(template): 包含了整个表单组件的布局和结构,通过使用Element UI组件库中的el-form、el-form-item等组件来构建表单项。
    • 脚本部分(script): 定义了表单组件的逻辑处理部分,包括对表单数据的处理、事件处理函数的定义、计算属性的定义等。
    • 样式部分(style): 包含了组件的样式定义,使用了scoped属性来使得样式只作用于当前组件。
    • 组件引入部分: 引入了一些自定义组件和第三方组件,如HSelect、HDatePicker、addressCascader等。
      • HSelect:详见该篇文章vue elementUI el-select的封装
      • HDatePicker:详见该篇文章vue elementUI el-date-picker的封装
      • addressCascader:详见该篇文章vue elementUI el-cascader的封装
      • HSelectMultiple:详见该篇文章vue elementUI el-select多选的封装
      • HRadioGroup:详见该篇文章vue elementUI el-radio-group的封装
      • commonTooltip:详见该篇文章Vue tooltip 组件封装
      • viewer:详见该篇文章v-viewer----底部title显示图片的名称
    • 方法引入部分:
      • downLoadFile: 详见该篇文章vue 全局封装文件下载及导入
      • validateFileName: 详见该篇文章检验文件命名
      • this.$commonMessage.message():详见该篇文章vue elementUI 消息提示封装

页面引用

  • 在views下创建名为index.vue的文件





  • 页面中使用了两个子组件,引入了一个mixins:
    • HCommonPop: 定义了一个包含标题和右侧插槽的div容器。
    • HCommonFormItem: 详见上文
    • commonFormMixin: 处理表单数据、上传文件、校验表单、获取下拉选项,提交表单;具体处理详见该篇文章vue 表单封装后数据的获取提交
HCommonPop

标题会根据传入的title属性进行显示,如果没有传入则显示空字符串。右侧插槽可以在使用该组件时插入其他内容。接着,使用了slot标签来插入组件的内容,即弹出窗口的主体部分。最后,通过引入HCommonFooter组件,将按钮列表传递给该组件,并在footerList有内容时显示通用底部组件







HCommonFooter

动态生成button的组件







  • 模板部分(template):
    • 通过v-for指令循环遍历buttonList数组,动态生成按钮组。根据buttonList中的数据来渲染h-button组件,实现按钮的动态生成。
    • 根据getButtonDisplay方法返回的布尔值来决定按钮是否显示。
  • 脚本部分(script):
    • 导入HButton组件,并在components属性中注册。
      • HButton:详见该篇文章vue elementUI el-button的封装
    • 定义了props属性,用于接收父组件传递的数据。其中isAllWidth和isSmallBtn是布尔类型的prop,buttonList是数组类型的prop,包含了按钮的各种属性和回调函数。
  • 方法部分:
    • getButtonDisplay方法用于根据按钮的display属性确定按钮是否显示。如果display是布尔值,则直接返回;如果是函数,则执行函数并返回结果。
  • 样式部分(style):
    • 使用了SCSS语法定义了.footer-button-group类的样式。设置了按钮组的样式,包括顶部间距、宽度、排列方式等。根据isAllWidth和isSmallBtn属性的值,可以动态改变按钮组的样式。

你可能感兴趣的:(vue.js,elementui,javascript)