阅读 8412

我给公司封装的组件帮公司提效了60%| 8月更文挑战

前置内容

在公司开发中或多或少都会有几个管理系统的项目,而对于这些系统大多页面都是表单、表格组成,为了不花费太多精力在这些不那么需要定制化的页面上,一般都会选择去用组件库完成,这个时候就如果将这些简单、枯燥的事情用配置项完成,把精力放在更有挑战的事情上,那么工作摸鱼的时间又多了不少。下面就分享下我花了近一个月的时间为公司封装的组件。

涉及到的技术:

  • vue
  • element-ui

就基于上面两个来实现的,使用起来也非常简单,并不需要你去记太多prop,就是element哪些。你只需要这么简单的配置,表单项就出来了

<template>
  <el-card>
    <dynamic-form
      v-model="testFormModel"
      v-bind="formConfig"
    />
  </el-card>
</template>
​
<script>
export default {
  data() {
    return {
      testFormModel: {},
      formConfig: {
        labelWidth: '100px',
        formItemList: [
          {
            label: '树形下拉',
            // formModel绑定的属性
            prop: 'treeProp',
            type: 'treeSelect',
            'node-key': 'label',
            data: [
              {
                label: '一级 1',
                children: [...]
                //...
              }
            ]
            nodeKey: 'label',
          }
        ]
      }
    }
  },
}
</script>
复制代码

1.gif

选择之后, testFormModel对象就会是这样

{
  treeProp: '三级 1-1-1',
}
复制代码

为了方便使用, 我需要下拉提供这么几个功能:

  • 根据url动态请求数据(可携带参数,且参数变动之后重新发起请求)
  • 需要获取动态请求回来的数据
  • 需要提供数据格式化的能力(数据格式化显示是为了不变动数据的情况正确显示页面)
  • 需要实现过滤功能
{
  label: '树形下拉',
  // formModel绑定的属性
  prop: 'treeProp',
  type: 'treeSelect',
  url: 'xxxx',
  params: {
    query: 'all',
  },
  resolveData: (data) => {
    this.xxx = data
  }
  nodeKey: 'dyId',
  props: {
    label: 'name',
    children: 'sublevel'
  },
  multiple: true,
  checkStrictly: false,
  filterable: true,
}
复制代码

效果图💗

2.gif

简单的配置下这树形功能就非常的强大了,同样也支持用户自己去配置懒加载数据

{
  lazy: true,
  load: this.loadNode,
}
复制代码

这个时候就不需要去配置动态请求的哪些的配置,由用户自己实例接口的懒加载数据请求

我们需要完成什么样的东西?

整体效果图💗

3.gif

  • 配合侧边栏,校验失败右侧对应label标红
  • 点击右侧label视图自动滚动到对应表单项,并激活表单项
  • 侧边栏可配置(可以需要,也可以不配置)

这就是后面我们要实现的组件库,本文只是抛转引玉,对后面要做的事件大概说下,后续文章会很详细的分享整个组件封装的架构和思路,对于表单的一些「原子组件」的实现,之前也分享过一些,感兴趣的可以关注我的专栏:组件封装最佳实践

表单支持的组件

  • el-input/el-autocomplete
  • el-select
  • treeSelect 「集成」
  • el-switch
  • el-checkbox/el-radio/el-raiod-group/el-checkbox-group
  • el-date-picker/el-time-picker
  • el-cascader/el-cascader-panel
  • table 「集成」

有些功能还在完善,暂时就没有共享代码。后续会发布到npm提供下载,通过Vue.use()使用插件的方式使用

4.png

如何使用?

main.js

// 引用插件
import './plugins'
复制代码

plugins.js

import './element-ui'
import './dynamic-ui'
复制代码

这套组件是依赖element-ui封装的,所以前提是需要使用element

dynamic-ui.js

import Vue from 'vue'
import dynamicUI from 'dynamic-ui'
import 'dynamic-ui/lib/index.scss'
// 向表单添加组件类型
import DynamicTable from '@/components/DynamicTable/src/index.vue'
​
import { getToken } from '@/utils/auth'
import request from '@/utils/request'
​
Vue.component(DynamicTable.name, DynamicTable)
Vue.use(dynamicUI, {
  request, // 动态请求数据的方法
  baseURI: process.env.VUE_APP_BASE_API, 
  parseData: () => {}, // 解析接口返回数据的方法
  requestHeaders: { // 请求头
    Authorization: getToken()
  },
  // 需要动态添加到表单组件的类型
  addFormComponent: [
    {
      type: 'table',
      name: DynamicTable.name
    }
  ]
})
​
复制代码

组件库提供的功能

  • 传入[全局, 局部]的request
  • 传入[全局, 局部]的parseData
  • 传入requestHeaders请求头参数
  • 动态添加组件作为表单项

支持动态请求的数据组件

  • select
  • treeSelect
  • checkbox/radio
  • table
  • cascader/cascader-panel

以上几个组件类型在element基础上进行了扩展,允许用户动态请求数据,统一prop这样

参数说明类型默认值
request请求数据的方法Function全局配置的
url请求数据的接口String
method请求方式StringGET
params/data遵循RESTful-API规范Object{}
parseData解析接口获取的数据Function全局配置的
formatter格式化数据(不影响原有数据)Function
resolveData获取数据(响应式)Function

三者的使用场景

这里分别说下parseData/formatter/resoveData的使用场景

parsseData

一般我们在使用axios都会封装响应拦截器,做业务码的统一处理,但一般不会去变动data,现在有个问题是这样的,后端返回的数据是这样的

{
  code: '200',
  message: 'xxx',
  data: {
    ...
    pageData: [] // 这个才是我们要的数据
  }
}
复制代码

只有个别数据是这样的格式,这个时候全局配置就不去动,可以允许去传递单个组件的parseData来解决这个问题

formatter

用于在不影响原有数据的情况下格式化数据以正确显示页面,比如这样

formatter: (value) => {
	return `dy-${value}`
},
复制代码

5.png

resolveData

获取响应式的数据:直接变动数据,可直接影响页面。

resolveData: (data) => {
 	console.log(data)
  data[0].name = '欢迎关注:前端自学驿站'
},
复制代码

6.png

以上所有类型都会在请求参数变动之后重新请求数据,所以如果后端提供分页接口,前端也就能实现分页懒加载的功能

表格组件支持的类型

表格会支持

  • 展示模式
  • 编辑模式(支持所有表单组件类型,包括用户动态添加的)

本来打算将组件的功能大致的过一遍,但是写到这太晚了,有点肝不动了~,目前就是表格编辑模式这块还有些地方需要完善,后续完善测试通过之后就会立马发布,欢迎大家持续关注~

写在最后

如果文章中有那块写的不太好或有问题欢迎大家指出,我也会在后面的文章不停修改。也希望自己进步的同时能跟你们一起成长。喜欢我文章的朋友们也可以关注一下,我会很感激第一批关注我的人。此时,年轻的我和你,轻装上阵;而后,富裕的你和我,满载而归。

业精于勤,荒于嬉

系列文章

手把手教你玩转render函数「组件封装-dynamic-form」

手把手教你玩转render函数「组件封装-dynamic-select」

手把手教你玩转render函数「组件封装-dynamic-input」

手把手教你玩转render函数「组件封装-dynamic-checkbox」

手把手教你玩转render函数「组件封装-dynamic-cascader」

往期文章

【建议追更】以模块化的思想来搭建中后台项目

【以模块化的思想开发中后台项目】第一章

【前端体系】从一道面试题谈谈对EventLoop的理解 (更新了四道进阶题的解析)

【前端体系】从地基开始打造一座万丈高楼

【前端体系】正则在开发中的应用场景可不只是规则校验

「函数式编程的实用场景 | 掘金技术征文-双节特别篇」

【建议收藏】css晦涩难懂的点都在这啦

\

文章分类
前端
文章标签