当前位置: 首页 > Web前端 > vue.js

[Vue]基于UI库

时间:2023-04-01 00:16:05 vue.js

vue的二次组件封装现在应用很广泛,我们通常会把一些常用的功能封装成组件,有各种各样的UI组件库方便我们开发。为什么要封装成组件呢?它可以将页面抽象成多个相对独立的模块,实现代码复用,提高开发效率和代码质量,使代码易于维护。为什么要封装基于第三方UI库的组件?这期间我处理了几个项目。它们都是后台管理系统。我们都知道后台管理系统最多的就是表格和表格。几乎90%的页面都会包含这两个,但是我们发现了几个问题:第一,有些项目表基本没有打包。使用的element-ui或者iview等UI库都提供了现成的拷贝,然后很多页面可以看到表格和表单的各种逻辑,每个页面的基本代码都差不多,不同的是调用接口,Form配置。第二,有些项目虽然重新封装了表格或者表格,但是维护起来很不方便。参数一个一个传递,代码量大,slot不支持,大大降低了灵活性。下面以antd-vue封装一个Table组件为例,做一个简单的封装实例。封装前需要考虑的问题?如何定义自己的组件可以支持库中当前组件的所有接收参数。如果第一个参数太多了,一个一个传参数,第二个,如果更新了第三方库,增加了accept参数,自己的库也需要更新。如何将所有传值挂载到UI库的组件中。如何支持插槽。如果能解决以上三个问题,其实就完成了50%,剩下的就是处理一些逻辑了。让我们先解决第一个问题。下面是antd官方的例子:现在我想改成下面这样使用效果是一样的,tablePanel是我需要封装的组件。现在上面的代码只传入了两个参数。官方文档有15+个API参数可以配置。如果我们一个一个传进去,然后用props一个一个接口,非常繁琐。而且在更新UI库,增加参数的时候,需要同步修改组件。实际上,每个组件都有一个props对象。我们只需要将子组件的props赋值给当前组件的props,就可以继承子组件的所有属性。TablePanel组件:接下来我们处理第二个和第三个问题。解决这两个问题,我们可以使用jsx来处理。首先我们需要安装Babel插件npminstall@vue/babel-preset-jsx@vue/babel-helper-vue-jsx-merge-props然后添加presets到babel.config.js:module.exports={presets:['@vue/babel-preset-jsx'],}然后修改TablePanel组件:这样我们就可以将所有道具属性传递给表格组件,并支持插槽。可以如下使用,参数和槽位与antd和Table组件相同。剩下的我们就可以开始封装分页请求的逻辑了,完整代码如下:父组件可以通过this.$ref['tablePanel].loadTableData({...parameter})更新表单数据,一般用于查询