Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第11章 Vant UI

第11章VantUI課件V1.0

教學(xué)內(nèi)容第一節(jié)

Vant

介紹第二節(jié)Vant基礎(chǔ)組件第三節(jié)

Vant表單組件第四節(jié)Vant業(yè)務(wù)組件第五節(jié)其他擴(kuò)展插件知識目標(biāo)教學(xué)目標(biāo)理解和掌握

Vant

組件庫安裝和配置方法掌握

Vant

基礎(chǔ)、表單和業(yè)務(wù)類組件的使用理解和掌握

Vant

其他核類組件的使用知識點(diǎn)預(yù)覽#節(jié)知識點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用11C11-01Vant介紹1、Vant特點(diǎn)

2、Vant安裝與配置C11-02Vant基礎(chǔ)組件1、Button組件2、Image組件3、Layout組件C11-03Vant表單組件1、PasswordInput組件2、Rate組件3、Signature組件C11-04Vant業(yè)務(wù)組件1、Card組件2、Coupon優(yōu)惠券3、SubmitBar提交訂單欄

Vant是一個(gè)十分優(yōu)秀的面向移動端應(yīng)用的UI組件庫，它體積輕量、可定制化。除了輕量和可定制化的特點(diǎn)外，Vant還有以下幾個(gè)主要的特點(diǎn)。超過70多個(gè)高質(zhì)量組件，幾乎覆蓋移動端主流場景。不需要外部依賴，也不依賴第三方的npm包的安裝。提供Sketch和Axure設(shè)計(jì)資源的支持，便于開發(fā)。支持Vue2、Vue3和微信小程序前端的主流框架。支持TypeScript編寫代碼，并提供完整的類型定義。支持主題定制，內(nèi)置超700個(gè)主題變量，方便定制風(fēng)格。Vant特點(diǎn)

使用

Vue3

框架開發(fā)的應(yīng)用，必須選擇Vant4組件庫進(jìn)行安裝，先在應(yīng)用的根目錄下，執(zhí)行下列終端指令。npminstallvant-S完成成功后，還需要在應(yīng)用中配置Vant組件庫，才能在應(yīng)用的各個(gè)組件中使用，只需要在main.js文件中導(dǎo)入Vant模塊和對應(yīng)的CSS文件，并將導(dǎo)入的Vant模塊掛載到Vue實(shí)例上即可。Vant安裝與配置Vant中的Button組件從外形和狀態(tài)兩個(gè)方面，對原始的Button元素進(jìn)行了封裝，使它支持5種類型的按鈕，同時(shí)，還可以自定義按鈕的圖標(biāo)、形狀、尺寸和顏色，并可以設(shè)置按鈕的點(diǎn)擊狀態(tài)和是否可用性。

Button

組件參數(shù)說明類型默認(rèn)值type類型，可選值為primarysuccesswarningdangerstring defaultsize尺寸，可選值為largesmallministring normaltext按鈕文字string

color按鈕顏色，支持傳入linear-gradient漸變色string

icon左側(cè)圖標(biāo)名稱或圖片鏈接string

icon-prefix圖標(biāo)類名前綴string van-iconround是否為圓形按鈕boolean falsedisabled是否禁用按鈕boolean falsehairline是否使用0.5px邊框 boolean falseloading是否顯示為加載狀態(tài) boolean falseloading-text加載狀態(tài)提示文字string

Vant將原生的img元素封裝成增強(qiáng)版的image組件，并提供了多種圖片填充的模式，使圖片能按指定的方式呈現(xiàn)和縮放，同時(shí)，還支持圖片懶加載，加載中提示，加載失敗提示等。Image

組件參數(shù)說明類型默認(rèn)值src圖片鏈接string

fit圖片填充模式，與原生的object-fit屬性一致string fillposition圖片位置，與原生的object-position屬性一致string centerradius圓角大小，默認(rèn)單位為pxnumber 0round是否顯示為圓形boolean falselazy-load是否開啟圖片懶加載，須配合Lazyload組件使用booleanfalseshow-error是否展示圖片加載失敗提示boolean trueshow-loading是否展示圖片加載中提示boolean trueerror-icon失敗時(shí)提示的圖標(biāo)名稱或圖片鏈接 boolean photo-failloading-icon加載時(shí)提示的圖標(biāo)名稱或圖片鏈接 boolean photoicon-size加載圖標(biāo)和失敗圖標(biāo)的大小number 32

在Vant中，Layout組件用于元素的響應(yīng)式布局，分別由van-row和van-col兩個(gè)組件來實(shí)現(xiàn)，前者表示行，后者被包裹在van-row組件中，表示列，共有24列柵格組成，在van-col組件中，span屬性表示所占列的比例，offset屬性表示列的偏移量。Layout

組件van-col組件常用屬性說明Layout

組件名稱說明類型默認(rèn)值span列元素寬度number|string

offset列元素偏移距離number|string

tag自定義元素標(biāo)簽stringdivvan-row

組件常用屬性說明Layout

組件名稱說明類型默認(rèn)值gutter列元素之間的間距number|string

tag自定義元素標(biāo)簽stringdivjustify主軸對齊方式stringstartalign交叉軸對齊方式stringtopwrap是否自動換行booleantrue

PasswordInput組件是一款帶網(wǎng)格輸入框的組件，用于輸入密碼和短信驗(yàn)證信息，通常結(jié)合數(shù)字鍵盤一起使用，常用的組件屬性說明如下。

PasswordInput組件名稱說明類型默認(rèn)值value密碼值string

info輸入框下方文字提示string

error-info輸入框下方錯(cuò)誤提示string

length密碼最大長度number|string6gutter輸入框格子之間的間距number|string0mask是否隱藏密碼內(nèi)容booleantruefocused是否已聚焦，聚焦時(shí)會顯示光標(biāo)booleanfalse

Rate組件常用于對事物評級使用，如商品的質(zhì)量、用戶對服務(wù)的滿意度等各種評級功能實(shí)現(xiàn)，都離不開Rate組件的使用，該組件可以自定義顯示的圖標(biāo)、數(shù)量和樣式，還能顯示半星的評分效果，當(dāng)用戶點(diǎn)擊圖標(biāo)時(shí)，可以獲取到最后的評分值。Rate組件常用的屬性如下。Rate組件名稱說明類型默認(rèn)值v-model當(dāng)前分值number

count圖標(biāo)總數(shù)number|string5color選中時(shí)的顏色string#ee0a24void-color未選中時(shí)的顏色string#c8c9ccicon選中時(shí)的圖標(biāo)名稱或圖片鏈接stringstarallow-half是否允許半選是否允許半選falsetouchable是否可以通過滑動手勢選擇評分是否可以通過滑動手勢選擇評分true

Signature組件用于頁面的手寫簽名，它的功能基于Canvas實(shí)現(xiàn)，Vant版本必須大于或等于4.3.0才能使用該組件，當(dāng)完成簽名并觸發(fā)綁定的submit事件后，在事件中，可以獲取格式為base64字符串的簽名圖片，用于保存簽名數(shù)據(jù)和顯示簽名效果。Signature組件常用的屬性如下。Signature組件名稱說明類型默認(rèn)值type導(dǎo)出圖片類型stringpngpen-color筆觸顏色string#000line-width線條寬度number 3background-color背景顏色string

tips當(dāng)不支持Canvas時(shí)的提示信息string

clear-button-text清除按鈕文案string清空confirm-button-text確認(rèn)按鈕文案string確認(rèn)

Signature組件常用的事件如下Signature組件事件名稱說明回調(diào)參數(shù)start開始簽名時(shí)觸發(fā)

end結(jié)束簽名時(shí)觸發(fā)

signing簽名過程中觸發(fā)event:TouchEventsubmit點(diǎn)擊確定按鈕時(shí)觸發(fā)data:{image:string;canvas:HTMLCanvasElement}clear點(diǎn)擊取消按鈕時(shí)觸發(fā)

Card組件用于展示商品的完整信息，包括商品圖片、價(jià)格、標(biāo)簽和促銷信息，還可以顯示商品的多種標(biāo)簽，自定義商品的底部操作按鈕，常用于購物車商品信息的展示和商品列表信息的顯示，它的常用屬性如下。Card組件名稱說明類型默認(rèn)值thumb左側(cè)圖片string

title標(biāo)題string

desc描述string

tag圖片角標(biāo)string

num商品數(shù)量number|string

price商品價(jià)格number|string

origin-price商品劃線原價(jià)number|string商品在展示時(shí)，通常會與一些優(yōu)惠券一起顯示，針對這種需求，Vant提供了專門用于優(yōu)惠券展示的組件——Coupon，它用于優(yōu)惠券的兌換和選擇，點(diǎn)擊CouponCell組件時(shí)，以彈框形式進(jìn)入