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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
jQuery操作cookie
Aug 08 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
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
php+javascript的日历控件
2009/11/19 PHP
PHP图片上传代码
2013/11/04 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
应届行政管理专业个人自我评价
2013/12/28 职场文书
二年级体育教学反思
2014/01/15 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
高中生家长寄语大全
2014/04/03 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
python中__slots__节约内存的具体做法
2021/07/04 Python
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸