Vue render函数实战之实现tabs选项卡组件


Posted in Javascript onApril 22, 2019

用过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、代码实现

Vue render函数实战之实现tabs选项卡组件

index.js

import PTabs from './PTabs';
import PTabPane from './PTabPane';

export default function tabsInstall(Vue) {
 if(tabsInstall.installed){
 return;
 }
 Vue.component('PTabs', PTabs);
 Vue.component('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(item.componentOptions && item.componentOptions.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.$el.parentNode.removeChild(this.$el);
  }
  // 当当前组件销毁时需从父组件中的pTabPanes中移除当前组件,以触发PTabNav才能更新
  this.$parent.removePane(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){
   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;
   }
  }
  },
  // 计算 .p-tabs_nav-list 是否溢出
  calculateListSpilled(){
  let navScrollW = this.$refs.nav_scroll.offsetWidth;
  let navListW = this.$refs.nav_list.offsetWidth;
  if(navScrollW < navListW){
   this.scrollable = true;
  }else{
   if(this.listOffset > 0){
   this.listOffset = 0;
   }
   this.scrollable = false;
  }
  },
  // 滚动条滚动到激活的tab
  scrollToActiveTab(){
  if(this.scrollable){
   this.$nextTick(() => {
   let navScrollW = this.$refs.nav_scroll.offsetWidth;
   let navList = this.$refs.nav_list;
   let activeTab = navList.querySelector('.active');
   let activeTabOffsetLeft = 0;
   if(activeTab){
    activeTabOffsetLeft = activeTab.offsetLeft;
   }

   let transformX = activeTabOffsetLeft + activeTab.offsetWidth - navScrollW;

   transformX = transformX < 0 ? 0 : transformX;
   this.listOffset = transformX;
   if(transformX === 0){
    this.navPrevDisabled = true;
    this.navNextDisabled = false;
   }else if(transformX === (navList.offsetWidth - navScrollW)){
    this.navPrevDisabled = false;
    this.navNextDisabled = true;
   }else{
    this.navPrevDisabled = false;
    this.navNextDisabled = false;
   }
   });
  }
  }
 },
 computed: {
  listOffsetTran(){
  console.log('dddd',`translateX(-${this.listOffset}px);`)
  return {
   transform: `translateX(-${this.listOffset}px)`
  }
  }
 },
 render(h) {
 /*dom结构
 <div class="p-tabs_header is-scrollable">
  <span class="p-tabs_nav-prev disabled"></span>
  <span class="p-tabs_nav-next"></span>
  <div class="p-tabs_nav-scroll">
  <div class="p-tabs_nav-list">
   <div class="p-tabs_nav-item active">全部</div>
   <div class="p-tabs_nav-item disabled">技术教学</div>
   <div class="p-tabs_nav-item">新手教学</div>
  </div>
  </div>
 </div>
 */
  let navPrev = h('span', {
  staticClass: 'p-tabs_nav-prev',
  'class': {
   disabled: this.navPrevDisabled
  },
  on: {
   click: this.navPrevClickEvent
  }
  });
  let navNext = h('span', {
  staticClass: 'p-tabs_nav-next',
  'class': {
   disabled: this.navNextDisabled
  },
  on: {
   click: this.navNextClickEvent
  }
  });
  // 生成标签页
  let navItems = this.tabPanes.map(item => {
  let $labelSlot = item.$scopedSlots.label ? item.$scopedSlots.label() : null;
  let labelContent = $labelSlot ? $labelSlot : item.label;
  return h('div', {
   staticClass: 'p-tabs_nav-item',
   'class': {
   active: this.$parent.currentName === item.name,
   disabled: item.disabled,
   },
   on: {
   click: (e) => {
    this.handTabNavClick(item.name, item, e);
   }
   }
  }, [labelContent]);
  });
  let navScroll = h('div', {
  staticClass: 'p-tabs_nav-scroll',
  ref: 'nav_scroll'
  }, [
  h('div', {
   staticClass: 'p-tabs_nav-list',
   ref: 'nav_list',
   style: this.listOffsetTran
  }, [navItems])
  ]);

  return h('div', {
  staticClass: 'p-tabs_header',
  'class': {
   'is-scrollable': this.scrollable
  },
  }, [navPrev, navNext, navScroll]);
 },
 updated(){
  this.calculateListSpilled();
 },
 mounted() {
  this.calculateListSpilled();
 }
 }
</script>

4、使用

main.js

// 引入tabs组件
import tabs from './components/p-tabs';
// 全局注册p-tabs组件
Vue.use(tabs);

页面中使用

<PTabs v-model="activeName">
 <PTabPane label="用户管理" name="first">用户管理</PTabPane>
 <PTabPane label="配置管理" name="second">配置管理</PTabPane>
 <PTabPane label="角色管理" name="third">角色管理</PTabPane>
 <PTabPane label="定时任务补偿" name="fourth">定时任务补偿</PTabPane>
</PTabs>

总结

以上所述是小编给大家介绍的Vue render函数实战之实现tabs选项卡组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
微信小程序实现日历签到
Sep 21 Javascript
详解Vue依赖收集引发的问题
Apr 22 #Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 #Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 #Javascript
深入理解vue中的slot与slot-scope
Apr 22 #Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 #Javascript
详解50行代码,Node爬虫练手项目
Apr 22 #Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 #Javascript
You might like
php 验证码制作(网树注释思想)
2009/07/20 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
开始着手第一个Django项目
2015/07/15 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python之array赋值技巧分享
2019/11/28 Python
Python使用type动态创建类操作示例
2020/02/29 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
python实例化对象的具体方法
2020/06/17 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
小学母亲节活动方案
2014/03/14 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
廉洁校园实施方案
2014/05/25 职场文书
中国合伙人观后感
2015/06/02 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫