vue tab切换_iviewUITabs选项卡切换组件

6fffbd0d6f0a31400cba4cd8cd4193e2.png

概述 

选项卡切换组件,常用于平级区域大块内容的的收纳和展现。

源码地址:https://github.com/iview/iview/tree/2.0/src/components/tabs

使用: 

                标签一的内容

                标签二的内容

                标签三的内容

       标签二的内容

在源码的tabs文件下有三个文件:index.js,tabs.vue,pane.vue

index.js中引入了tabs.vue和pane.vue.

import Tabs from './tabs.vue';

import Pane from './pane.vue';

Tabs.Pane = Pane;

export default Tabs;

tabs.vue

tabs.vue是整个组件的容器,分为三部分:

1 通过 扩展tabs选项的附加内容。

2 通过this.$children获取tabs下的每一个TabPane并放进navLIst,遍历navLIst设置tabs选项标签。

3 声明slot接收整个panes。

this.$children查找当前组件的直接子组件,可以遍历全部子组件,需要注意 $children 并不保证顺序,也不是响应式的。

slot 插槽

父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。Slot分发的内容,作用域是在父组件上

   

       

           

                :

                tabindex="0"

                ref="navContainer"

               @keydown="handleTabKeyNavigation"

                @keydown.space.prevent="handleTabKeyboardSelect(false)"

           >

                                {{ item.label }}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533555.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

paypal创建订单后怎么获得id_5步创建Facebook商店(最新版教程)学习如何在Facebook上卖货...

请按照以下步骤设置Facebook商店:步骤1:转到您的Facebook页面并配置Shop页面。步骤2:设置您的商店详细信息。步骤3:配置付款。步骤4:将产品添加到您的Facebook商店。步骤5:管理您的订单。步骤6:…

创建索引名称已由现有对象使用_Excel编程周末速成班第3课:Excel对象模型

学习Excel技术,关注微信公众号:excelperfect导语:为了帮助想要快速学会Excel VBA的朋友,特以《Excel Programming Weekend Crash Course》这本书为基础,开始整理一系列资料,在完美Excel社群上分享。一共有3…

socket用起始码分割_常用条码Code128码及EAN13码的介绍

在条码打印软件中,设计条码标签时经常用到的码制是Code128码和EAN13码。因为这两种码制比较贴近我们的生活。比如:我们去超市购物,商品上贴的条码标签都是EAN13码,因为EAN13码多用于零售产品包装。而code128码多用于工厂产线&…

matlab在c盘有缓存文件夹吗,win10如何清除C盘缓存文件-win10清除C盘缓存的方法 - 河东软件园...

在电脑的使用过程中我们会发现磁盘的容量会不断减小,更多时候其他磁盘还有很多剩余空间,C盘的存储空间就已经达到极限了。其实在系统的升级和软件的下载中很多文件就会默认储存在C盘,时间久了以后,C盘不仅有软件文件,还…

java方法体逻辑不会写怎么办,想自己写框架?不会写Java注解可不行

用注解一时爽,一直用一直爽Java后端开发进入spring全家桶时代后,开发一个微服务提供简单的增删改查接口跟玩泥巴似的非常简单,一顿操作猛如虎,回头一看代码加了一堆注解:Controller Autowired Value,面向注…

联想拯救者y7000加内存条_短测联想拯救者Y7000,到底值不值得买?

7000块左右的笔记本电脑有什么好选择,我相信这是很多人一直纠结的问题,虽然我用过的笔记本很多,但是这个价位的用的少之又少,但随着十代酷睿标压处理器的大量铺货,联想拯救者Y7000进入了我的视线。那到底值不值得买呢&…

求逆矩阵计算器_991CN的矩阵运算

昨天的推文中说了一道二端口的题目,虚线中的大二端口由两个小二端口级联而成,在计算过程中,我们需要使用到矩阵的运算,昨天讲题的时候说会说一下用计算器进行矩阵运算,今天我们就来说一下。其实在算电路的时候&#xf…

去快捷方式小箭头_电脑桌面如何快速去掉快捷方式小箭头

我们使用电脑时会发现在电脑桌面图标上经常有一个小箭头,这是什么原因呢?原来,这个小箭头只存在于快捷方式的软件图标上,就是说通过快捷方式创建的图标就有这个小箭头。那么如何去掉这些小箭头呢!不知道也没关系&#…

oracle 移动日志文件,Oracle数据库移动数据文件、日志文件和控制文件

1、关闭数据库SQL> shutdown immediate;2、移动数据文件和日志文件到新位置SQL> host mv /u01/olddata.dbf /u02/newdata.dbf;SQL> host mv /u01/oldredo.log /u02/newredo.log;3、以加载模式启动数据库SQL> startup mount;4、在数据库中更改数据文件和日志文件路径…

oracle查询sql时间ain,Oracle SQL 时间查询

一、在使用Oracle的to_date函数来做日期转换时,很多Java程序员也许会和我一样,直觉的采用ldquo;yyyy-MM-dd HH:mm:ssrdquo;的to_date()与24小时制表示法及mm分钟的显示:一、在使用Oracle的to_date函数来做日期转换时,很多Java程序…

室内定位算法_001:室内定位算法技术咨询服务工作室简介(更新)

点击蓝字关注我们团队成员:何博士(中国科学院大学,博士) 杨博士(加拿大多伦多大学,博士后)微信联系号:UWB_cwhe服务模式:1. 为企业提供定位算法技术支持与指导,以提高企业室内定位系统产品的稳定…

双系统还是虚拟机 linux系统时间,你会选择Mac虚拟机还是双系统

在Mac上运行双系统,你是会选择Mac虚拟机呢还是直接双系统?今天我们就这个问题来讨论一下这两之前的区别,究竟是选择Mac最好用的虚拟机 parallels desktop还是Boot Camp?1、安装在pd虚拟机中,安装系统和安装驱动完全自动…

oracle中修改多个字段默认值_利用VBA代码在已有的数据表中删除、添加、修改字段...

大家好,今日继续给大家讲解VBA数据库解决方案的第21讲,如何利用VBA代码在已有的数据表中删除,添加,修改字段。这个内容是操作数据库的一项必修的内容,还望大家在实际工作中多利用,所以这节的知识,对于读者提高自己的数…

linux中的码字软件,码字写作软件下载

极音创作linux版一款的掌上码字软件,这款软件支持ios,mac,Windows和Android设备上自动同步文件,有需要的朋友快来下载吧!软件特色1、【文件功能】在本软件的左侧是导航栏,罗列了几个常用的功能。在导航条上…

linux svn可视化工具,CentOS6.5安装SVN 可视化管理工具iF.SVNAdmin

实际系统环境:CentOS 6.5 x64一、安装Apache通常系统都已经装好了,但我的服务器上却没有安装,所以要安装:# yum install httpd二、安装SVN根据SVN官网指南使用yum进行安装:# yum install subversion mod_dav_svn三、配…

skywalking使用方法_SkyWalking 源码分析—— Collector Server Component 服务器组件

摘要: 原创出处 http://www.iocoder.cn/SkyWalking/collector-server-component/「芋道源码」欢迎转载,保留摘要,谢谢!本文主要基于 SkyWalking 3.2.6 正式版1. 概述2. 接口2.1 Server2.2 ServerHandler3. gRPC 实现3.1 GRPCServer3.2 GRPCHa…

linux dns及时添加,在ARM Linux上成功实现添加DNS库

工作需要要在嵌入Linux上实现DNS, 从Delphi的Indy9中移植了一个DNS,用了半年了还可以。今日偶然看到了网上有源码(竟然原来没有搜到ftp://ftp.isc.org/isc/bind9/9.5.0/bind-9.5.0.tar.gz)1. 找到bind-9.5.0.tar.gz源码,其中有包含DNS协议的源…

linux dns 内网ip,Ubuntu中ip地址、网关、网络号、DNS等解释

在Ubuntu中查看ip地址,输入指令:ifconfig在Ubuntu中查看网关,DNS服务器的命令:nm-tool其中,inet 地址即为ip地址。在图中,我们看到有广播地址,还有掩码,当然在一个计算机网络中&…

linux 进程函数替换,Linux使用exec函数实现进程替换的代码分享

这篇文章主要介绍了Linux 进程替换(exec函数)实现代码的相关资料,需要的朋友可以参考下Linux 进程替换(exec函数)实现代码# include#include#include#include#include#include#includeint main(){pid_t idfork();if(id0){printf("child is running\n");sleep(1);char…

c++输出重定向 linux,C++ stderr/stdout 重定向到文件

通常,stderr和stdout被用来输出内容显示到屏幕,但是,有时候我们需要把这些信息写到指定的文件,方便随时查阅。最简单的实现方式就是,把 stderr/stdout 的输出重定向到文件。stderr/stdout 重定向到文件这里以stderr代码…