在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?

如果你在h5页面中想要写一个tabs标签页,而mint-ui这样已经成型的h5组件没有办法满足交互UI需求时,为了节约自己写组件逻辑的时间,你会怎么办?本篇交给大家一个实现思路,就是我们可以利用antd和element-ui的底层组件功能进而封装出自己需要的组件样式。 

为了解释如何利用antd和element-ui的底层组件功能,我们需要了解一下antd和element-ui的组件实现逻辑。首先来看一下antd的源码逻辑,在图中已经用数字标明:1.antd中关于tabs标签页的源码大部分都是less样式定义。2.tabs标签页的组件功能逻辑都是从rc-tabs库中来引入的。

在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?


3.tabs标签页主要在rc-tabs组件中注入了自定义的一些小组件和状态参数。

在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?


所以对于react的技术栈,我们在复用antd的底层组件逻辑的时候就可以直接引入rc库,类似:rc-animate、rc-tabs,然后自己来定义组件的样式,来满足UI需求。如下面步骤所示,首先引入rc-tabs参考antd官方文档中的代码结构,摘抄到项目中:


在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?

在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?


可以适当参考antd中对于特定的类的样式的定义,摘抄到自己的样式文件中,其中需要自己定义的部分适当修改:


在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?

在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?


最终形成了我们自己的Tabs标签页:


在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?


同理,对于vue技术栈,我们也可以用element-ui来进行样式开发,首先我们先来了解一下element-ui的源码结构,在element-ui源码的package/tabs文件夹中我们可以看到element-ui没有用第三方库,而是自己通过vue框架自己实现了一个组件逻辑,以最外层tabs.vue为例,引入了更小的组件tab-nav.vue:


在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?


但是目前在element-ui源码中看到的只是组件逻辑而已,我们可以从官网的element的引入方式中看到,element-ui的样式文件是需要单独引入的:


在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?


按照同样的原理我们可以按需引入element-ui的组件逻辑部分,自己定义样式,来实现自己想要的UI样式。









在h5中如何利用antd和element-ui的底层组件逻辑自定义组件样式?


上一篇:基于vite2的react脚手架


下一篇:Umi3实现antd列表增删改查