Vue可自定义tab组件用法实例


Posted in Javascript onOctober 24, 2019

在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间。

Vue可自定义tab组件用法实例

如何使用?

1. 首先先安装:

npm i vue-cus-tabs -S

2. 在new vue之前引入样式并use一下VueCusTab:

import 'vue-cus-tabs/style/index.css'
import { installCusTabs } from 'vue-cus-tabs';
Vue.use(installCusTabs);

3. 在代码中引入组件:

<CusTabWrap>
   <template v-slot:tabBar>
    <CusTabBar :style="{'height':'50px'}">
     <CusTabItem v-for="item in tabItems" :key="item.title">
      {{item.title}}
     </CusTabItem>
    </CusTabBar>
   </template>

   <template v-slot:tabContainer>
    <CusTabContainer>
     <CusTabContainerItem v-for="item in tabItems">
      <ul>
       <li v-for="data in item.data">
        {{data.title}}
       </li>
      </ul>
     </CusTabContainerItem>
    </CusTabContainer>
   </template>
  </CusTabWrap>
import { TabController } from 'vue-cus-tabs';
  import Vue from 'vue'

  

  export default class Test extends Vue{
   public tabItems = [
    { title: '新闻', type: 'list', data: [{ img: '', title: 'list item  title' }] },
    { title: '视频', type: 'block', data: [{ video: '', title: 'list item   title' }] },
    { title: '视频1', type: 'block', data: [{ video: '', title: 'list item  title' }] },
   ];
   public tabController?: TabController;
   public mounted() {
    
    // 创建控制器
    this.tabController = new TabController({ data: this.tabItems, tabScroll: true, initIndex: 1 });
   }
  }

4. 启动Vue Cli的serve,即可看到成果。

整个组件的设计思路借鉴了flutter的tabs组件,数据的渲染交由vue完成,之后的tab控制由TabController实例来完成。

github: https://github.com/axel10/cus-tabs

npm: https://www.npmjs.com/package/vue-cus-tabs

在线演示:https://vue-cus-tabs-axel10.now.sh

以上就是本次介绍的相关知识点内容,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
vue实现登录功能
Dec 31 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
js实现转动骰子模型
Oct 24 #Javascript
js实现固定区域内的不重叠随机圆
Oct 24 #Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 #Javascript
windows实现npm和cnpm安装步骤
Oct 24 #Javascript
JS实现简单随机3D骰子
Oct 24 #Javascript
JS合并两个数组的3种方法详解
Oct 24 #Javascript
js实现简单掷骰子小游戏
Oct 24 #Javascript
You might like
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP发送短信代码分享
2015/08/11 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
删除重复数据的算法
2006/11/23 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Python中模块与包有相同名字的处理方法
2017/05/05 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
深入了解Python 变量作用域
2020/07/24 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
教师自我评价范例
2013/09/24 职场文书
玲玲的画教学反思
2014/02/04 职场文书
集体生日活动方案
2014/08/18 职场文书
学习考察心得体会
2014/09/04 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python