在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的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实例来完成。
 
 
 
 

Vue可自定义tab组件的更多相关文章

  1. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  2. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  3. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  4. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  5. vue + element-ui 制作tab切换(切换vue组件,踩坑总结)

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  6. vue 自定义报警组件

    1.自定义报警组件 Alarm.vue <!-- 报警 组件 --> <template> <div class="alarm"> <!- ...

  7. vue自定义select组件

    1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据, ...

  8. vue 自定义分页组件

    vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...

  9. 【VUE】自定义组件

    [VUE]自定义组件 转载: ============================================ ======================================== ...

随机推荐

  1. Hadoop学习之 HIVE 多用户模式安装

    一.启动hadoop 集群 1.启动zookeeper 集群   zkServer.sh start 2.在master.hadoop 机器上 ./start-all.sh 由于 start-all命 ...

  2. HTTP/HTTPS协议 & GraphQL(非RESTFUL方式)

    HTTP访问控制-跨域资源共享(CORS) 缓存管理 HTTP VS HTTPS架构 TLS协议 HTTPS会话劫持 基于HTTP协议的服务器消息机制 1. Longpoll 2. SSE 3. We ...

  3. 用python编写一个合格的ftp程序,思路是怎样的?

      经验1.一般在比较正规的类中的构造函数.都会有一个verify_args函数,用于验证传入参数.尤其是对于系统传参.2.并且系统传参,其实后面大概都是一个函数名 例如:python server. ...

  4. SSD源码解读——网络搭建

    之前,对SSD的论文进行了解读,可以回顾之前的博客:https://www.cnblogs.com/dengshunge/p/11665929.html. 为了加深对SSD的理解,因此对SSD的源码进 ...

  5. [报错] Process finished with exit code 139 (interrupted by signal 11: SIGSEGV)

    今天下午做python的作业,我用PyQt5 中 利用QWebEngineView打开外部网页. 但是一直闪退,一运行就闪退. 显示报错:Process finished with exit code ...

  6. nginx-轮询、权重、ip_hash 、fair模式

    在 linux 下有 Nginx.LVS.Haproxy 等等服务可以提供负载均衡服 务,而且 Nginx 提供了几种分配方式(策略): 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器 ...

  7. gulp[13124]: c:\ws\src\node_contextify.cc:626: Assertion `args[1]->IsString()' failed

    在执行gulp sass时报下面错误,又或者执行ionic serve时报这个错,选择低一点版本的node,建议8v; gulp[13124]: c:\ws\src\node_contextify.c ...

  8. “不是一个有效的Win32应用程序”

    造冰箱的大熊猫@cnblogs 2018/10/23 今天在Windows计算机上安装一个应用程序时遇到“不是一个有效的Win32应用程序”错误.原以为是应用程序与操作系统版本兼容问题,或者是应用程序 ...

  9. poj 3579 Median 二分套二分 或 二分加尺取

    Median Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5118   Accepted: 1641 Descriptio ...

  10. 格子游戏x(并查集)

    格子游戏 [问题描述] Alice和Bob玩了一个古老的游戏:首先画一个n * n的点阵(下图n = 3) 接着,他们两个轮流在相邻的点之间画上红边和蓝边:           直到围成一个封闭的圈( ...