Vuerender函数实战之实现tabs选项卡组件
⽤过Element ui库的童鞋肯定知道<el-tabs>组件，简单、好⽤、可以⾃定义标签页，不知道⼴⼤童鞋们在刚开始使⽤<el-tabs>组件的时候有没有想过它是如何实现的？我咋刚开始使⽤<el-tabs>组件的时候就有去想过，也想去实现⼀个超级简单的tabs选项卡组件，⽆奈当时功⼒不够，未能实现。最近的⼀个简单项⽬中正好要⽤到选项卡组件，由于项⽬简单也就没有使⽤任何第三⽅库，于是就⾃⼰动⼿写了个选项卡组件。
1、实现tabs选项卡组件的思考
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="⽤户管理" name="first">⽤户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="⾓⾊管理" name="third">⾓⾊管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
问题：
1. 如何根据<el-tab-pane>来⽣成标签页？
2. 如何过滤<el-tabs>组件中的⼦元素，使得在使⽤的时候只显⽰<el-tab-pane>，⽽不会显⽰其他组件或div之类的元素？
2、实现思路
想根据<el-tab-pane>来⽣成标签页就需要使⽤到<slot>，使⽤<slot>⽤<template>的形式肯定是不⾏的，因为⽆法获取到<slot>的数量；使⽤<template>的形式⾏不通，那就只有使⽤render函数了
过滤<el-tabs>组件中的⼦元素也需要使⽤render函数
3、代码实现
index.js
import PTabs from './PTabs';
import PTabPane from './PTabPane';
export default function tabsInstall(Vue) {
if(tabsInstall.installed){
return;
}
Vueponent('PTabs', PTabs);
Vueponent('PTabPane', PTabPane);
}
PTabs.vue
<script>
import PTabNav from './PTabNav';
export default {
name: "PTabs",
props: {
value: {
type: [String, Number],
default: ''
},
beforeClick: {
type: Function,
default(){
return function () {};
}
}
},
components: {
PTabNav
},
data(){
return {
pTabPanes: [],
currentName: this.value || 0
}
},
methods: {
addPane(pane){
this.pTabPanes.push(pane);
if(!this.currentName){
this.setCurrentName(this.pTabPanes[0].name);
}
},
removePane(pane){
let index = this.pTabPanes.indexOf(pane);
if(index > -1){
this.pTabPanes.splice(index, 1);
}
},
setCurrentName(name){
if(this.currentName !== name){
this.currentName = name;
this.$emit('input', name);
}
},
// 标签页点击事件
handTabNavClick(name, pane, e){
if(this.currentName === name || pane.disabled){
return;
}
let before = this.beforeClick();
if(before && before.then){
before.then(() => {
this.setCurrentName(name);
this.$emit('tabClick', pane, e);
})
}else{
this.setCurrentName(name);
this.$emit('tabClick', pane, e);
}
}
},
watch: {
value(newVal){
this.setCurrentName(newVal);
},
currentName(){
this.$nextTick(() => {
this.$refs.p_tab_nav.scrollToActiveTab();
});
}
},
render(h) {
let {$scopedSlots} = this;
let $default = $scopedSlots.default();
let qTabPanes = $default.map(item => {
/* 过滤<PTabs>xxx</PTabs>中传递的xxx内容。这⾥只接收<PTabPane>组件，因为我们需要根据<PTabPane>组件的数量来⽣成  * <PTabNav>组件，如果参差了其它节点则会导致不能正确⽣成<PTabNav>组件 */
if(itemponentOptions && itemponentOptions.tag === 'PTabPane'){
return item;
}
});
let qTab = h('PTabNav', {
props: {
// 将tab-pane传递给 <PTabNav>组件，<PTabNav>组件就知道要有多少个tab-item了
tabPanes: this.pTabPanes,
handTabNavClick: this.handTabNavClick
},
ref: 'p_tab_nav'
});
let qTabBody = h('div', {
staticClass: 'p-tabs_content'
}, qTabPanes);
console.log($default)
return h('div', {
staticClass: 'p-tabs'
}, [qTab, qTabBody]);
},
mounted() {
//console.log(this)
this.$nextTick(() => {
this.$refs.p_tab_nav.scrollToActiveTab();
});
}
}
</script>
<style lang="stylus">
.p-tabs{
.p-tabs_header{
position: relative;
margin-bottom: 15px;
&.is-scrollable{
padding-left: 20px;
padding-right: 20px;
}
}
.p-tabs_nav-prev,
.p-tabs_nav-next{
position: absolute;
top: 0;
width: 20px;
height: 100%;
display: none;
&::before{
position: absolute;
content: ' ';
font-size: 0;
line-height: 0;
width: 10px;
height: 10px;
top: 50%;
left: 50%;
border-top: 1px solid #eee;  border-left: 1px solid #eee;  margin: -5px 0 0 -5px; }
cursor: pointer;
&.disabled{
cursor: default;
border-color: #aaa;
}
}
.p-tabs_nav-prev{
left: 0;
&:before{
transform: rotate(-45deg); }
}
.p-tabs_nav-next{
right: 0;
&:before{
transform: rotate(135deg); }
}
.p-tabs_header{
&.is-scrollable{
.p-tabs_nav-prev,
.p-tabs_nav-next{
display: block;
}
}
}
.p-tabs_nav-scroll{
overflow: hidden;
}
.p-tabs_nav-list{
position: relative;
float: left;
white-space: nowrap;
transition: transform .3s; }
.p-tabs_nav-item{
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #fff;
cursor: pointer;
&.active,
&:hover{
color: #ffb845;
}
&.disabled{
cursor: not-allowed;
color: #aaa;
&:hover{
color: #aaa;
}
}
}
.p-tabs_content{
position: relative;
overflow: hidden;
}
.p-tabs-pane{
color: #fff;
}
}
</style>
PTabPane.vue
<template>
<div class="p-tabs-pane" v-show="show">
<slot></slot>
</div>
</template>
<script>
export default {
name: "PTabPane",
props: {
label: {
type: String,
default: ''
},
name: {
type: [String, Number],
default: ''
},
disabled: {
type: Boolean,
default: false
}
},
data(){
return {
loaded: false
}
},
computed: {
show(){
if(this.$parent.currentName === this.name){
if(!this.loaded){
this.loaded = true;
}
return true;
}
return false;
}
},
watch: {
label(){
// label更新的时候强制更新⽗组件，以触发PTabNav才能更新
this.$parent.$forceUpdate();
}
},
mounted() {
// 当当前组件创建的时候将当前组件添加到⽗组件的pTabPanes中，以触发PTabNav才能更新  this.$parent.addPane(this);
},
destroyed() {
if(this.$el && this.$el.parentNode){
this.$veChild(this.$el);
}
// 当当前组件销毁时需从⽗组件中的pTabPanes中移除当前组件，以触发PTabNav才能更新
this.$vePane(this);
}
}
</script>
PTabNav.vue
<script>
function noop() {};
export default {
name: "PTabNav",
props: {
tabPanes: {
type: Array,
default(){
return [];
}
},
handTabNavClick: {
type: Function,
default(){
return function () {};
}
}
},
data(){
return {
navPrevDisabled: true,
navNextDisabled: true,
// 控制左右箭头显⽰
scrollable: false,
listOffset: 0
}
},
methods: {
navPrevClickEvent(){
if(!this.navPrevDisabled){
let navScrollW = this.$refs.nav_scroll.offsetWidth;  let navListW = this.$refs.nav_list.offsetWidth;
let maxTransformX = 0;
let transformX = this.listOffset - navScrollW;
if(transformX < maxTransformX){
transformX = maxTransformX;
}
if(transformX === this.listOffset){
return;
}
console.log('上⼀页按钮点击了', transformX);
this.listOffset = transformX;
if(transformX === 0){
this.navPrevDisabled = true;
this.navNextDisabled = false;
}else if(transformX === (navListW - navScrollW)){  this.navPrevDisabled = false;
this.navNextDisabled = true;
}else{
this.navPrevDisabled = false;
this.navNextDisabled = false;
}
}
},
navNextClickEvent(){
if(!this.navNextDisabled){
let navScrollW = this.$refs.nav_scroll.offsetWidth;  let navListW = this.$refs.nav_list.offsetWidth;
let maxTransformX = navListW - navScrollW;
let transformX = this.listOffset + navScrollW;
if(transformX > maxTransformX){
transformX = maxTransformX;
}
if(transformX === this.listOffset){
pane
return;
}
console.log('下⼀页按钮点击了', transformX);
this.listOffset = transformX;