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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
Javascript函数的参数
Jul 16 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
JS验证码实现代码
Sep 14 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python格式化css文件的方法
2015/03/10 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Unicode和Python的中文处理
2017/03/19 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
python实现自动登录后台管理系统
2018/10/18 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
详解python:time模块用法
2019/03/25 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
2015年路政工作总结
2015/05/22 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
Python常遇到的错误和异常
2021/11/02 Python
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL