ElementUI tabs组件源码分析

最近闲来无事，对平常用的饿了么UI框架感兴趣了，很好奇element-ui对tabs标签页下面的滑动条滑动是如何实现的。说实话，我就喜欢研究与浏览器交互的东西，哈哈哈。 1.tabs标签页 通过阅读源码，知道标签页下方的滑动条是单独写的一个组件叫做tab-bar组件。这个组件只接受tabs属性。当这个tabs属性值变化的时候，又通过计算属性barStyle来计算出滑动条需要滑行（translate）的距离和其本身的宽度。核心源码见下方。 2.代码 computed: { barStyle: { g

最近工作中遇到这个场景： 根据右边侧边栏切换左边内容。其实就是个tab切换。由于类似的功能在项目挺多的，想着实现一个通用可配置的组件。 1.一开始第一时间考虑使用component标签的is属性去控制<component :is="currentView" />，但这有个问题，component标签是依赖当前组件components去注入需要切换的组件，这就导致相当的不灵活，没办法实现需要的通用组件 2.后面考虑手动挂载组件到某个节点上，具体实现如下： 通过js配置，使用tab组件 <t

好啦，在最后其实笔者也想分享一下代码的调试心得，毕竟这种跟组件化、渲染相关的问题多多少少都得跟所依赖的 js框架 搭边，不能单凭对 ui库 调试就能得出结论的。所以如果要对 js框架 进行调试，那必定是一个很复杂的场景，所以demo 一定要最简化！笔者自己调试的时候，几乎把整个el-table都删干净了，就留下了slot和来调试，但还是耗费了很多时间。然后有时候也要进行一些适当性的反推，说不定能有妙用！该说不说整个el-table的源码是很多也比较复杂的，源码阅读加调试确实很麻烦。

Element 去年十月份开始用 vue 做管理后台的时候毫不犹豫的就选择了 Elemen，那时候 vue2 刚发没多久，市面上也没有很多其它的 vue2 的 ui 框架。虽然 Element 也有很多的不足，前期的 bug 也不少，但我还是选择了它，说一下我选择 Element 的原因吧： 有大厂背书 : 虽然核心开发只有三个人，但至少不用担心哪天就不维护，带着小姨子跑路了。持续迭代

别再犹豫了，看一篇文章学三个框架它不香么？

tabs 标签页组件源码简单分享，主要从以下几个方面：1、tabs 组件页面结构。2、tabs 组件属性。3、tabs 组件事件。4、tab-pane 组件属性。

【代码】Vue页签的常用写法。

如果el-tabs是子组件，父组件传值value / v-model为空字符，这个时候在watch中监听value / v-model就会发现监听的数据会被调用为‘0’。一定是作为子组件引用，且在watch进行监听，且vuex没有缓存。就刚进入页面的时候会出现空白页面，点击tab之后就不会再有问题了，因为value / v-model数据更新了。当然如果你的tabPanes中的code原本就为‘0’，那就不会出现这个问题了，因为value / v-model匹配的到页面。

以上就是我最近遇到问题以及解决问题的全过程，记录下。解决的方法不一定好，但是，目前暂时想不到其他好的方式，对于element-plus的源码研究也就是个皮毛的程度，看能不能merge吧。

el-tabs封装成公共组件，方便拓展。

Element Plus部分组件源码解析

1.template <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="已开户的存款" name="first"> <div class="timeChoose"> ...

功能：实现点击页面A的“更多”，跳转到页面B的“重大消息” 先看一下el-tabs的代码 <div class="tabs"> <el-tabs v-model="activeName" @tab-click="changeTab"> <el-tab-pane label="系统推送" name="receivedAut...

input 结构 <template> <div ...> <!-- 非textarea --> <template v-if="type !== 'textarea'"> <!-- 前置元素 --> <div class="el-input-group__prepend" v-if="$slots.prepend"> <slot name="prepend"&gt