好资源导航 » 文章资讯 » Vue可自定义tab组件用法实例

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

2023-08-10 11:01:04 74

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

如何使用？

1.首先先安装：

npmivue-cus-tabs-S

2.在newvue之前引入样式并use一下VueCusTab：

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

3.在代码中引入组件：





{{item.title}}









{{data.title}}

import{TabController}from'vue-cus-tabs';
importVuefrom'vue'



exportdefaultclassTestextendsVue{
publictabItems=[
{title:'新闻',type:'list',data:[{img:'',title:'listitemtitle'}]},
{title:'视频',type:'block',data:[{video:'',title:'listitemtitle'}]},
{title:'视频1',type:'block',data:[{video:'',title:'listitemtitle'}]},
];
publictabController?:TabController;
publicmounted(){

//创建控制器
this.tabController=newTabController({data:this.tabItems,tabScroll:true,initIndex:1});
}
}

4.启动VueCli的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

以上就是本次介绍的相关知识点内容，感谢大家的学习和对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐