常用Iview元件集合以及常用特性

2021-10-08 07:43:42 字數 3005 閱讀 4469

可以選擇不同型別代表會以不同顏色呈現

可以選擇邊框是否為虛線或者為文字模式的按鈕

可設定為幽靈按鈕

可設定loading狀態

可禁用size只可選small、default、large三種

可根據type來選擇不同的圖示樣子

size可設定大小,單位px

color可設定顏色

分別有三種元件,分別適用於標題、不同樣式的文字、段落,這三個元件都可設定是否可複製、新增刪除線樣式、是否可編輯、文字型別,其中pragraph可以設定超過多少行顯示省略號並且是否可展開

方向可選vertical、horizental

是否為虛線

若有文字,文字的位置左、中、右

柵格其實可以做水平布局

row中放置col,col的總數小於24

可以給row中的col設定間隔,可設定改變柵格順序

可設定左右偏移量

flex布局的justify、align屬性可以使用

可響應式布局

布局的元件

裡面可放置header、content、sider、footer

可設定摺疊屬性

設定間隔

可以設定水平間隔和垂直間隔

可用v-model雙向繫結自定義間隔

可以將一片區域分割為可以拖拽調整寬度或高度的兩部分區域

可巢狀使用

用於固定的選單列表

每一項單元格可設定禁用以及選中

可以將內容固定在螢幕上,位置是相對於瀏覽器的位置而定的

顯示**的層級結構並標識當前所在位置,並可新增導航和vue-router結合使用

可以設定如何觸發,hover、click、右鍵、custom自定義

可巢狀可選擇主題風格

可選vertical、horizontal

用於分頁快速切換

可以設定快速跳轉

可以設定每頁數量

用於做頁頭

可帶麵包屑、可帶內容

可用slot巢狀一些內容

用於顯示某項流程的步驟

輸入框自動完成

可通過data屬性自定義自動完成資料來源

也可通過傳入option元件作為選項

可不區分大小寫

自定義option顯示複雜的布局

用於多項選擇,用v-model雙向繫結選中資料

可設定全選

通常用語一組相關聯並且遞進的資料集合

可與搜尋合併,搜尋並選擇

年月日 選擇時間點或者時間段

可新增具體日子的快捷方式

可多選可選擇時間

具有資料收集、校驗和提交功能的表單

此元件非常重要,特別是校驗功能

只允許輸入數字的輸入框,並且可以設定一定的範圍

可設定禁用、可編輯、小數等功能

輸入框,可設定三種尺寸,可設定是否可清空

可設定icon,可設定slot字首字尾

可設定文字域輸入,輸入段落

用於在輸入中提及某人或某事,等同於@功能

可與form配合使用

可自定義匹配字元

評分元件

可半星、可顯示提示

唯讀可自定義字元

可用v-model雙向繫結,可選擇button樣式單選框

進行兩種狀態切換

可禁用、可載入

可單方向滑

可設定range,雙方向滑

可用離散值,離散值時可顯示間斷點

可用輸入框輸入值

支援單選、多選、搜尋以及鍵盤快捷操作

transfer屬性很重要,可以避免在position:fixed的定位中被覆蓋

雙欄穿梭選擇框,常用於將多個專案從一邊移到另一邊

詳情例子請官網

選擇或輸入標準時間,支援選擇範圍

可支援上傳單個檔案、多個檔案

支援拖拽上傳

還可以自定義上傳列表,如上傳**並展示

v-model雙向繫結顏色資料

可預設選擇

可預設選擇

設定src獲取頭像

可設定徽標

可設定為右上角或者dot型

顏色可選

可繫結預設開啟、可手風琴模式

可巢狀通常用於輪播一組或卡片輪播

可自動切換

包括切換速度、指示器樣式、指示器位置、切換箭頭顯示、指示器觸發都可調整

基礎容器,用來顯示文字、列表、**等內容,也可以配合其他元件一起使用,基本上用於資料展示或者名片展示,也可以用於布局,基本上相當於div,可巢狀

按照日曆形式展示資料的容器

可顯示通知事項

可用卡片模式

可選擇用於顯示多個唯讀字段

很類似於唯讀的table,可設定邊框和背景顏色

其實不對,這幾天自己用了一下, 原來它並不是放唯讀欄位的,也可以巢狀元件,感覺他的真實用途應該是以一種**的方式但又沒有table那麼強大,當然也沒有table使用起來那麼複雜

展示空資料時的頁面

列表展示,最基礎的用法

loading和柵格布局也都有

可hover,click,focus觸發

位置可調

mask可關

可巢狀複雜內容

可展示一些需要突出的數值

可prefix或者suffix內容,加單位、icon或者百分比都可以

可以做倒計時元件countdown

可以做級聯展示

可用show-checkbox多選

也可以自定義結點

hover時會顯示

可調位置

可禁用transfer屬性很重要,可以避免在position:fixed的定位中被覆蓋

對一系列資訊進行時間排序,用法很基礎

可刪除顏色可選

通常用於切換一些比較簡單的頁面,如果切換較複雜頁面,建議menu

這個元件可就複雜了

可單獨設計每列的render

可多選可篩選

常用於表示幾秒鐘前,幾分鐘前,幾天前

用於顯示百分比進度,可配合外部元件使用

可設定成儀錶盤樣式

用於側邊欄的顯示

可巢狀多層抽屜

可自定義內容

。。。未完待續

iView常用元件清空技巧

清空datepicker 日期選擇器 的方法 this refs.element.handleclear 清空timepicker 時間選擇器 的方法 this refs.element.handleclear 清空select元件的方法 this refs.element.clearsingles...

springcloud的常用元件,以及它們的用處

1.eureka註冊中心 3.客戶端註冊服務到集群 eureka client service url eurekaserver位址,多個位址以 隔開 defaultzone 4.服務續約 lease renewal interval in seconds 服務續約 renew 的間隔,預設為30秒...

Python的集合以及集合的常用操作(day06)

1.定義 python中的集合用於儲存不重複的元素。在形式上,集合的所有元素都放在一對 中,兩個相鄰元素間使用 分隔。集合最好的應用就是去掉重複元素,因為集合中的每個元素都是唯一的。本質也是乙個無序的集合,但是只儲存了字典中key,沒有儲存字典中的value。set集合中的元素與字典中key的元素有...