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,一经查实,立即删除!

相关文章

java biginteger 比较大小,java – 打印非常大的BigIntegers

我试图找出与Java 7 x64中的BigIntegers相关的以下问题.我试图计算一个极高功率的数字.代码如下,然后是问题描述.import java.math.BigInteger;public class main {public static void main(String[] args) {// Demo calculation; Desired calculation: BigInteger("4096&…

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

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

php 网络图片 转本地,PHP将Base64图片转换为本地图片并保存

PHP将Base64图片转换为本地图片并保存/*** [将Base64图片转换为本地图片并保存]* param [Base64] $base64_image_content [要保存的Base64]* param [目录] $path [要保存的路径]*/function base64_image_content($base64_image_content,$path){//匹配出图片的格式if (preg_matc…

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

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

php修改htpasswd,用来解析.htpasswd文件的PHP类

.htpasswd 文件示例:user1:{SHA}kGPaD671VNU0OU5lqLiN/h6Q6acuser2:{SHA}npMqPEX3kPQTox/ZckHDrIcQIuser3:{SHA}q1Fh2LTUjjkncp11m0M9WUH5Zrwclass Htpasswd {private $file ;private $salt AynlJ2H.74VEfI^BZElc-Vb6G0ezE9a55-Wj;private function write($pairs …

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

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

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

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

php 验证码字体居中,自定义验证码图片的宽高后文本垂直水平居中[帝国cms ShowKey.php]-网站程序网...

define(EmpireCMSAdmin,1);define(EmpireCMSAPage,login);define(EmpireCMSNFPage,1);require(../class/connect.php);//绘制居中文本, 对于GD的内置字体function pc_ImageStringCenter($image,$text,$font){//字体大小$width array(1>5,6,7,8,9);$height array(1>6,8,…

python中的常量可以修改吗_深入理解Python变量与常量

变量是计算机内存中的一块区域,变量可以存储规定范围内的值,而且值可以改变。基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中。常量是一块只读的内存区域,常量一旦被初始化就不能被改变。…

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

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

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

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

php适用于什么服务器,php – 找不到laravel类(适用于localhost但不适用于DO服务器)...

这是一个重复的问题 – 例如:Laravel 4 migrations – class not found但是,我已经尝试了所有解决方案(来自我能找到的每个论坛)并且无法解决这个问题.脚本我在我的本地机器上创建了一个Laravel 4项目 – 添加了一些类,控制器,视图等 – 项目运行良好.然后我将这个新…

python扫雷游戏课程设计小组任务计划与分配表_python实现扫雷游戏

本文为大家分享了python实现扫雷游戏的具体代码,供大家参考,具体内容如下本文实例借鉴mvc模式,核心数据为model,维护1个矩阵,0表无雷,1表雷,-1表已经检测过。本例使用python的tkinter做gui,由于…

时间同步服务器java,Windows 配置时间同步服务器以及配置时间同步间隔

如何修改windows下的时间同步间隔操作步骤如下:打开注册表:在“开始”菜单→“运行”项下(或按WinR)输入“Regedit”进入注册表编辑器。2.修改默认时间服务器IP:展开HKEY_LOCAL_MACHINE->SYSTEM->CurrentControlSet->Services->W…

房价python爬取_python爬取并解析 重庆2015-2019房价走势

1 #! /usr/bin/env python2 #-*- coding:utf-8 -*-34 5 Created on 2019年11月24日67 author: Admin8 910 importrequests11 from lxml importetree12 importtime13 importcsv1415 16 方法名称:spider17 功能: 爬取目标网站,并以源码文本18 参…

PHP递归删除目录面试题,PHP 递归删除目录中文件

/*** 递归删除目录中文件* param $pathname* return bool*/public static function delDir($pathname)//要删除的目录{if(file_exists($pathname)) {if(is_file($pathname)) {unlink($pathname);} else {$dir opendir($pathname);while($filename readdir($dir)) {if($filena…

python中 12_python编程中常用的12种基础知识总结

1、正则表达式替换目标: 将字符串line中的 overview.gif 替换成其他字符串>>> line >>> more.compile(r(?<SRC)"([\w\.])",re.I)>>> mo.sub(r"\1****",line)>>> mo.sub(rreplace_str_\1,line)< /span>>&…

php smarty分页原理,SMARTY分页详解

<?phprequire_once (include/common.inc.php);//这里是个接口common.inc.php里面包函了一些常用到的函数类库以及SMARTYinclude_once(header.php);//调用头部信息,SESSION的信息全都保存在这里,这样做的好处是几乎所有的页面都不需要在开头输入session_start();$smarty new…

python十个一行_python 如何将一系列数字十个一行输出

展开全部答案如下&#xff1a;代码详解1、使用循环输出列表&#xff0c;利用 计数器控制输出数量&#xff0c;当输出到第十个&#xff0c;62616964757a686964616fe4b893e5b19e31333365663532计数器归零&#xff0c;重新开始计数2、print输出增加end参数可以控制输出后以什么结尾…

sql oracle 递归查询语句,Oracle使用SQL语句进行递归查询

idpid问题描述&#xff1a;102031415262738495取出id为1及其下属的所有的数据,结果为下idpid1031417384SQL> CREATE TABLE TBL_TEST2 (3 ID NUMBER,4 NAME VARCHAR2(100 BYTE),5 PID NUMBER DEFAULT 06 );Table createdS…