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截取字符串的两种方法及区别详解
Nov 05 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
Js图片点击切换轮播实现代码
Jul 27 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来写记数器(详细介绍)
2006/10/09 PHP
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
详解Python编程中包的概念与管理
2015/10/16 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python configparser模块应用过程解析
2020/08/14 Python
电子狗项圈:eDog Australia
2019/12/04 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
如何清空Session
2015/02/23 面试题
火山动力Java笔试题
2014/06/26 面试题
医学生临床实习自我评价
2014/03/07 职场文书
出国导师推荐信
2015/03/25 职场文书
写给同事的离职感言
2015/08/04 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书