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.pswp.cn/news/533555.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/533555.shtml
英文地址,請注明出處:http://en.pswp.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…