《前端開發(fā)框架》課件-第6章 常用UI組件庫

6.1.2

Element

Plus中的常用組件ElementPlus組件庫中的組件主要包括基礎(chǔ)組件、配置組件、表單組件、數(shù)據(jù)展示組件、導(dǎo)航和反饋組件以及其他組件。每個(gè)組件類別又進(jìn)行了細(xì)

分

，

例

如

，

基

礎(chǔ)

組

件

包

含Button組件、Border組件、Container組件等；表單組件包含F(xiàn)orm組件、Input組件等。下面對(duì)Element

Plus中常用的Button組件、Table組件、Form組件和Menu組件進(jìn)行講解。6.1.2

Element

Plus中的常用組件先定一個(gè)小目標(biāo)！掌握Element

Plus中Button組件的使用方法，能夠?qū)崿F(xiàn)按鈕效果6.1.2

Element

Plus中的常用組件1.Button組件Button組件使用<el-button>標(biāo)簽定義，<el-button>標(biāo)簽的常用屬性如下表所示。屬性名屬性值primary描述主要按鈕success成功按鈕typeinfo一般提示信息按鈕warningdanger警告按鈕危險(xiǎn)按鈕plainrounddisabledlinktrue或falsetrue或falsetrue或falsetrue或falsetrue或false是否為樸素按鈕，默認(rèn)值為false是否為圓角按鈕，默認(rèn)值為false是否為禁用按鈕，默認(rèn)值為false是否為鏈接按鈕，默認(rèn)值為false是否為圓形按鈕，默認(rèn)值為falsecircle6.1.2

Element

Plus中的常用組件如果需要設(shè)置plain、round或circle的屬性值為true，可以寫成“:屬性名="true"”或“屬性名”的形式。以round為例，示例代碼如下。<!--方式1--><el-buttontype="primary":round="true">Primary</el-button><!--方式2--><el-buttontype="primary"round>Primary</el-button>注意6.1.2

Element

Plus中的常用組件演示基礎(chǔ)的按鈕效果創(chuàng)建src\components\Button.vue文件。步驟1步驟2<template><el-rowclass="mb-4"><el-button>Default</el-button><el-buttontype="primary">Primary</el-button><el-buttontype="success">Success</el-button><el-buttontype="info">Info</el-button><el-buttontype="warning">Warning</el-button><el-buttontype="danger">Danger</el-button></el-row><!--此處省略了兩個(gè)<el-row></el-row>--></template>6.1.2

Element

Plus中的常用組件演示基礎(chǔ)的按鈕效果修改src\main.js文件，切換頁面中顯示的組件，具體代碼如下。步驟1步驟2importAppfrom

'./components/B'組件的文件名6.1.2

Element

Plus中的常用組件在瀏覽器中查看ElementPlus的按鈕效果如下圖所示。6.1.2

Element

Plus中的常用組件演示鏈接按鈕和禁用按鈕的使用創(chuàng)建src\components\Button2.vue文件。步驟1步驟2<template><el-rowclass="mb-4"><el-buttonlink>Round</el-button><el-buttontype="primary"link:disabled="false">Primary</el-button><el-buttontype="success"link:disabled="true">Success</el-button><el-buttontype="info"

link>Info</el-button><el-buttontype="warning"link>Warning</el-button><el-buttontype="danger"link>Danger</el-button></el-row></template>6.1.2

Element

Plus中的常用組件演示鏈接按鈕和禁用按鈕的使用修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/組件的文件名6.1.2

Element

Plus中的常用組件在瀏覽器中查看ElementPlus的鏈接按鈕和禁用按鈕效果如下圖所示。6.1.2

Element

Plus中的常用組件先定一個(gè)小目標(biāo)！掌握ElementPlus中Table組件的使用方法，能夠?qū)崿F(xiàn)表格效果6.1.2

Element

Plus中的常用組件2.Table組件Element

Plus組件庫提供了Table組件，用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，例如工資表、課程表和計(jì)劃表等，可以對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作。6.1.2

Element

Plus中的常用組件Table組件使用<el-table>標(biāo)簽定義，在該標(biāo)簽中綁定data對(duì)象數(shù)組后，在<el-table-column>中使用prop屬性對(duì)應(yīng)對(duì)象中的鍵名，即可將數(shù)據(jù)添加到表格中；使用label屬性可以定義表格的列名，使用width屬性可以定義表格的寬高。<el-table>標(biāo)簽的常用屬性如下表所示。屬性名data描述顯示的數(shù)據(jù)stripeborder是否加斑馬線，默認(rèn)值為false是否帶有縱向邊框，默認(rèn)值為false6.1.2

Element

Plus中的常用組件演示基礎(chǔ)的表格效果創(chuàng)建src\components\Table.vue文件。步驟1步驟2<template><el-table:data="tableData"stripeborderstyle="width:100%"><el-table-columnprop="date"

label="日期"width="180"/><el-table-columnprop="name"

label="姓名"width="180"/><el-table-columnprop="address"label="住址"width="300"/></el-table></template><scriptsetup>consttableData=[{date:'2023-02-03',name:'王五',address:'北京市海淀區(qū)'},//此處省略了3行數(shù)據(jù)]</script>6.1.2

Element

Plus中的常用組件演示基礎(chǔ)的表格效果修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/'組件的文件名6.1.2

Element

Plus中的常用組件在瀏覽器中查看ElementPlus的表格效果如下圖所示。6.1.2

Element

Plus中的常用組件先定一個(gè)小目標(biāo)！掌握ElementPlus中Form組件的使用方法，能夠?qū)崿F(xiàn)表單效果6.1.2

Element

Plus中的常用組件3.Form組件大多數(shù)的網(wǎng)站中都涉及表單的應(yīng)用，例如登錄和注冊(cè)頁面。Element

Plus組件庫提供了Form組件，該組件采用Flex布局，用于收集、驗(yàn)證和提交數(shù)據(jù)?；A(chǔ)的表單包含輸入框、單選框、下拉選擇、多選框等組件。6.1.2

Element

Plus中的常用組件Form組件使用<el-form>標(biāo)簽定義，在該標(biāo)簽中使用<el-form-item>作為輸入項(xiàng)的容器，用于獲取值和驗(yàn)證值。<el-form>標(biāo)簽的常用屬性如下表所示。屬性名描述inline行內(nèi)表單模式，默認(rèn)值為false，表示垂直表單表單域標(biāo)簽的位置，默認(rèn)值為right（標(biāo)簽右對(duì)齊），left表示標(biāo)簽左對(duì)齊，top表示標(biāo)簽位于表單域的頂部label-positionmodel表單數(shù)據(jù)對(duì)象注意6.1.2

Element

Plus中的常用組件演示基礎(chǔ)的表單效果創(chuàng)建src\components\Form.vue文件，在ElementPlus官方文檔中找到Form組件的相關(guān)代碼，復(fù)制部分核心代碼到當(dāng)前文件中。步驟1步驟2<template><el-form:model="form"label-width="80px"label-position="left"><el-form-itemlabel="用戶名："><el-inputv-model=""/></el-form-item><!--此處省略了兩個(gè)<el-form-item></el-form-item>--></template><scriptsetup>import{reactive

}from

'vue'constform=reactive({pass:'',name:''})</script>6.1.2

Element

Plus中的常用組件演示基礎(chǔ)的表單效果修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/'組件的文件名6.1.2

Element

Plus中的常用組件在瀏覽器中查看ElementPlus的表單效果如下圖所示。6.1.2

Element

Plus中的常用組件表單默認(rèn)為垂直表單，若想實(shí)現(xiàn)行內(nèi)表單，可以修改步驟①的代碼，為<el-from>標(biāo)簽添加inline屬性，使表單元素并列顯示。<el-form:model="form"label-width="80px"label-position="left">屬性在瀏覽器中查看表單內(nèi)容橫向排列效果如下圖所示。6.1.2

Element

Plus中的常用組件先定一個(gè)小目標(biāo)！掌握ElementPlus中Menu組件的使用方法，能夠?qū)崿F(xiàn)菜單效果6.1.2

Element

Plus中的常用組件4.Menu組件導(dǎo)航欄是網(wǎng)頁設(shè)計(jì)中不可或缺的一部分，通常應(yīng)用于頁面的頂部，可以幫助用戶快速找到他們想要訪問的內(nèi)容。例如，導(dǎo)航欄可以實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)。Element

Plus組件庫提供了Menu組件，用于為網(wǎng)站提供導(dǎo)航功能。6.1.2

Element

Plus中的常用組件Menu組件使用<el-menu>標(biāo)簽定義，在該標(biāo)簽中包含<el-menu-item>和<sub-menu>標(biāo)簽。菜單默認(rèn)為垂直模式，通過將mode屬性值設(shè)為horizontal，可以將導(dǎo)航菜單變更為水平模式。<el-menu>標(biāo)簽的常用屬性如下表所示。屬性名mode描述菜單展示模式，默認(rèn)值為vertical（垂直模式），horizontal表示菜單為水平模式是否水平折疊并收起菜單，默認(rèn)值為false菜單的背景色collapsebackground-colortext-color菜單的文字顏色，默認(rèn)值為#303133active-text-colordefault-active當(dāng)前激活菜單的文字顏色，默認(rèn)值為#409EFF頁面加載時(shí)默認(rèn)激活菜單的index屬性6.1.2

Element

Plus中的常用組件演示頂部菜單欄效果創(chuàng)建src\components\Menu.vue文件。步驟1<template><el-menuclass="el-menu-demo"mode="horizontal"><el-menu-itemindex="1">首頁</el-menu-item><el-sub-menuindex="2"><!--此處省略了部分代碼--></el-sub-menu><el-menu-itemindex="3"disabled>信息</el-menu-item><el-menu-itemindex="4">聯(lián)系</el-menu-item></el-menu>步驟2步驟3</template><scriptsetup>import{ref

}from

'vue'constactiveIndex=ref('1')</script>6.1.2

Element

Plus中的常用組件演示頂部菜單欄效果修改src\main.js文件，切換頁面中顯示的組件。步驟1importAppfrom

'./components/e'步驟2步驟3組件的文件名6.1.2

Element

Plus中的常用組件演示頂部菜單欄效果修改src\main.js文件，將導(dǎo)入style.css的代碼進(jìn)行注釋，以免其影響Menu組件的樣式效果。步驟1//import'./style.css'步驟2步驟36.1.2

Element

Plus中的常用組件在瀏覽器中查看ElementPlus頂部菜單欄效果如下圖所示。6.1.2

Element

Plus中的常用組件若想實(shí)現(xiàn)垂直菜單欄效果，可以修改上述代碼，將<el-menu>標(biāo)簽中class的值改為el-menu-vertical-demo，將mode的值改為vertical。單擊“我的”菜單項(xiàng)，會(huì)顯示折疊的子菜單信息，如下圖所示。6.2Vant組件庫6.2.1

安裝Vant先定一個(gè)小目標(biāo)！掌握Vant組件庫的安裝方法，能夠獨(dú)立安裝、配置Vant6.2.1

安裝Vant什么是Vant？6.2.1

安裝VantVant是一個(gè)輕量級(jí)的、可靠的移動(dòng)端組件庫，于2017年開源。目前Vant官方提供了對(duì)Vue2、Vue

3和微信小程序的支持。6.2.1

安裝Vant使用npm或yarn包管理工具安裝Vant。#使用npm包管理工具安裝npminstallvant

--save#使用yarn包管理工具安裝yarnaddvant

--save6.2.1

安裝Vant在Vue

3項(xiàng)目中使用yarn安裝Vant打開命令提示符，切換到D:\vue\chapter06目錄，使用yarn創(chuàng)建一個(gè)名稱為vant-component的項(xiàng)目。步驟1步驟2步驟3步驟4yarncreatevite--templatevue項(xiàng)目名稱6.2.1

安裝Vant在Vue

3項(xiàng)目中使用yarn安裝Vant在命令提示符中，切換到vant-component目錄，為項(xiàng)目安裝所有依賴。步驟1步驟2步驟3步驟4cdvant-componentyarn6.2.1

安裝Vant在Vue

3項(xiàng)目中使用yarn安裝Vant在vant-component目錄下使用yarn安裝Vant。步驟1步驟2步驟3步驟4yarnadd--項(xiàng)目運(yùn)行時(shí)依賴@4.0.0表示安裝vant的版本號(hào)6.2.1

安裝Vant在Vue

3項(xiàng)目中使用yarn安裝Vant使用VSCode編輯器打開vant-component目錄，在src\main.js文件中，導(dǎo)入并掛載Vant模塊。步驟1步驟2步驟3步驟4import{createApp}from

'vue'import'./style.css'importVant

from

'vant'import'vant/lib/index.css'importAppfrom

'./App.vue'constapp=createApp(App)app.use(Vant)app.mount('#app')6.2.1

安裝Vant在Vue

3項(xiàng)目中使用yarn安裝Vant執(zhí)行命令啟動(dòng)服務(wù)。步驟1步驟2步驟3yarndev項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)開啟一個(gè)本地服務(wù)，地址為:5173/。步驟46.2.2

Vant中的常用組件Vant組件庫中包含很多組件，由于篇幅有限，僅對(duì)Vant組件庫中Button組件、Swipe組件、Tab組件、Form組件、Grid組件和Tabbar組件進(jìn)行講解。6.2.2

Vant中的常用組件先定一個(gè)小目標(biāo)！掌握Vant中Button組件的使用方法，能夠?qū)崿F(xiàn)按鈕效果6.2.2

Vant中的常用組件1.Button組件Button組件使用<van-button>標(biāo)簽定義，<van-button>標(biāo)簽的常用屬性如下表所示。屬性名屬性值primary描述主要按鈕，藍(lán)色success成功按鈕，綠色typedefault（默認(rèn)值）warning默認(rèn)按鈕，白的警告按鈕，黃色danger危險(xiǎn)按鈕，紅色plainhairlinedisabledloadingroundtrue或falsetrue或falsetrue或falsetrue或falsetrue或falsetrue或falsetrue或false是否為樸素按鈕，默認(rèn)值為false是否為細(xì)邊框，默認(rèn)值為false是否禁用按鈕，默認(rèn)值為false是否顯示為加載狀態(tài)，默認(rèn)值為false是否為圓角按鈕，默認(rèn)值為false是否為方形按鈕，默認(rèn)值為false是否為塊級(jí)元素，默認(rèn)值為falsesquareblock6.2.2

Vant中的常用組件演示基礎(chǔ)的按鈕效果創(chuàng)建src\components\Button.vue文件。步驟1步驟2<template><van-buttontype="primary">主要按鈕</van-button><van-buttontype="success"round>成功按鈕</van-button><van-buttontype="default"disabled>默認(rèn)按鈕</van-button><van-buttontype="warning"block>警告按鈕</van-button><van-buttontype="danger"plainhairline>危險(xiǎn)按鈕</van-button><van-buttontype="danger"loadingloading-type="spinner"loading-text="加載中..."/></template><stylescoped>button{margin:3px;

}</style>6.2.2

Vant中的常用組件演示基礎(chǔ)的按鈕效果修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/B'組件的文件名6.2.2

Vant中的常用組件在瀏覽器中查看Vant的按鈕效果如下圖所示。6.2.2

Vant中的常用組件演示圖標(biāo)按鈕的使用創(chuàng)建src\components\Button2.vue文件。步驟1步驟2<template><van-buttonicon="circle"

type="primary">基礎(chǔ)圖標(biāo)</van-button><van-buttonicon="like"

type="primary">實(shí)底風(fēng)格</van-button><van-buttonicon="phone-o"

type="primary">線框風(fēng)格</van-button><van-button:icon="icon">按鈕</van-button></template><scriptsetup>importiconfrom

'../assets/user-active.png'</script><style>.van-button{margin:5px

1px

!important;}</style>6.2.2

Vant中的常用組件演示圖標(biāo)按鈕的使用修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/組件的文件名6.2.2

Vant中的常用組件在瀏覽器中打開開發(fā)者工具，測(cè)試在移動(dòng)設(shè)備模擬環(huán)境下Vant的圖標(biāo)按鈕效果如下圖所示。6.2.2

Vant中的常用組件多學(xué)一招：按鈕尺寸和頁面導(dǎo)航使用<van-button>的size屬性可以設(shè)置按鈕的尺寸。size取值分別為large（大型按鈕）、normal（普通按鈕）、small（小型按鈕）和mini（迷你按鈕），默認(rèn)為normal。使用<van-button>的url屬性和to屬性可以實(shí)現(xiàn)頁面導(dǎo)航，其中，url屬性可以進(jìn)行URL跳轉(zhuǎn)，to屬性可以進(jìn)行路由跳轉(zhuǎn)。6.2.2

Vant中的常用組件演示按鈕尺寸和頁面導(dǎo)航效果創(chuàng)建src\components\Button3.vue文件。步驟1步驟2<template><van-buttontype="primary"size="large">大型按鈕</van-button><van-buttontype="primary"size="normal">普通按鈕</van-button><van-buttontype="primary"size="small">小型按鈕</van-button><van-buttontype="primary"size="mini">迷你按鈕</van-button><van-buttontype="primary"url="/test.html">URL跳轉(zhuǎn)</van-button><van-buttontype="primary"to="目標(biāo)地址">路由跳轉(zhuǎn)</van-button></template><style>.van-button{margin:5px

1px

!important;}</style>6.2.2

Vant中的常用組件演示按鈕尺寸和頁面導(dǎo)航效果修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/組件的文件名6.2.2

Vant中的常用組件在瀏覽器中查看Vant按鈕尺寸和頁面導(dǎo)航效果如下圖所示。6.2.2

Vant中的常用組件先定一個(gè)小目標(biāo)！掌握Vant中Swipe組件的使用方法，能夠?qū)崿F(xiàn)輪播效果6.2.2

Vant中的常用組件2.Swipe組件Vant組件庫提供了Swipe組件，用于實(shí)現(xiàn)圖片輪播效果。輪播圖是頁面結(jié)構(gòu)中重要的組成部分，常用于網(wǎng)站的首頁，主要用于展示頁面中的活動(dòng)信息，讓用戶不用滾動(dòng)屏幕就能看到更多內(nèi)容，可以最大化信息密度。6.2.2

Vant中的常用組件Swipe組件使用<van-swipe>標(biāo)簽定義，在該標(biāo)簽中使用<van-swipe-item>定義每一張輪播的圖片。在<van-swipe>中可以使用autoplay屬性設(shè)置自動(dòng)輪播的間隔；當(dāng)輪播中含有圖片時(shí)，可以通過lazy-render屬性來開啟懶加載模式，從而優(yōu)化網(wǎng)頁性能。<van-swipe>標(biāo)簽的常用屬性如下表所示。屬性名autoplaylazy-rendervertical描述自動(dòng)輪播間隔，單位為ms是否延遲渲染未展示的輪播，默認(rèn)值為false是否為縱向滾動(dòng)，默認(rèn)值為false指示器顏色，默認(rèn)值為#1989fa動(dòng)畫時(shí)長(zhǎng)，單位為ms，默認(rèn)值為500是否開啟循環(huán)播放，默認(rèn)值為trueindicator-colordurationloop6.2.2

Vant中的常用組件演示一種簡(jiǎn)單的圖片輪播效果創(chuàng)建src\components\Swipe.vue文件，在Vant官方文檔中找到Swipe組件相關(guān)代碼，復(fù)制部分核心代碼到當(dāng)前文件中。步驟1步驟2<template><van-swipe:autoplay="3000"lazy-renderstyle="width:300px;"><van-swipe-itemv-for="imageinimages":key="image"><img:src="image"

/></van-swipe-item></van-swipe></template><scriptsetup>constimages=['/images/01.jpg','/images/02.jpg','/images/03.jpg','/images/04.jpg']</script>6.2.2

Vant中的常用組件演示一種簡(jiǎn)單的圖片輪播效果修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/'組件的文件名6.2.2

Vant中的常用組件在瀏覽器中查看圖片的橫向滾動(dòng)如下圖所示。6.2.2

Vant中的常用組件若想要圖片縱向滾動(dòng)，可以為<van-swipe>標(biāo)簽添加vertical屬性，并設(shè)置滑塊容器的高度，使輪播圖片縱向排列。在瀏覽器中查看圖片的縱向滾動(dòng)如下圖所示。6.2.2

Vant中的常用組件先定一個(gè)小目標(biāo)！掌握Vant中Tab組件的使用方法，能夠?qū)崿F(xiàn)標(biāo)簽頁效果6.2.2

Vant中的常用組件3.Tab組件Vant組件庫提供了Tab組件，用于實(shí)現(xiàn)標(biāo)簽頁效果。標(biāo)簽頁一般出現(xiàn)在頁面的頂部或者頁面中，用于在不同的內(nèi)容區(qū)域之間進(jìn)行切換。6.2.2

Vant中的常用組件Tab組件使用<van-tabs>標(biāo)簽定義，在該標(biāo)簽中使用<van-tab>定義每一個(gè)標(biāo)簽項(xiàng)。在<van-tabs>標(biāo)簽中可以使用v-model:active綁定當(dāng)前激活標(biāo)簽的對(duì)應(yīng)的索引值，默認(rèn)情況下啟用第一個(gè)標(biāo)簽，其索引值為0；如果<van-tab>標(biāo)簽中指定了name屬性，則v-model:active的值為<van-tab>標(biāo)簽的name，此時(shí)無法通過索引值來匹配標(biāo)簽。<van-tabs>標(biāo)簽的常用屬性如下表所示。屬性名type描述樣式風(fēng)格類型，默認(rèn)值為line（線性），card表示卡片標(biāo)簽主題色，默認(rèn)值為#1989facolorbackgroundellipsis標(biāo)簽欄背景色，默認(rèn)值為white是否省略過長(zhǎng)的標(biāo)題文字，默認(rèn)值為true是否開啟手勢(shì)左右滑動(dòng)來切換，默認(rèn)值為falseswipeable6.2.2

Vant中的常用組件演示一種簡(jiǎn)單的標(biāo)簽頁效果創(chuàng)建src\components\Tab.vue文件。步驟1步驟2<template><divstyle="width:350x;text-align:

center;"><van-tabsv-model:active="active"swipeabletype="card"><van-tabtitle="我是標(biāo)簽1的內(nèi)容">內(nèi)容1</van-tab><!--此處省略3個(gè)<van-tab></<van-tab>標(biāo)簽--></div></template><scriptsetup>import{ref

}from

'vue'constactive=ref(0)</script>6.2.2

Vant中的常用組件演示一種簡(jiǎn)單的標(biāo)簽頁效果修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/組件的文件名6.2.2

Vant中的常用組件在瀏覽器中查看Vant的標(biāo)簽頁效果如下圖所示。6.2.2

Vant中的常用組件先定一個(gè)小目標(biāo)！掌握Vant中Form組件的使用方法，能夠?qū)崿F(xiàn)表單效果6.2.2

Vant中的常用組件4.Form組件Vant組件庫提供了Form組件，用于數(shù)據(jù)輸入、校驗(yàn)，支持輸入框、單選框、復(fù)選框等類型。6.2.2

Vant中的常用組件Form組件使用<van-form>標(biāo)簽定義，該標(biāo)簽需要與<van-field>標(biāo)簽搭配使用，用戶可以在輸入框內(nèi)輸入或編輯文字。<van-field>標(biāo)簽內(nèi)可以通過rules屬性定義校驗(yàn)規(guī)則，通過@submit觸發(fā)單擊事件。6.2.2

Vant中的常用組件演示一種簡(jiǎn)單的表單效果創(chuàng)建src\components\Form.vue文件，在Vant官方文檔中找到Form組件相關(guān)代碼，復(fù)制部分核心代碼到當(dāng)前組件中。步驟1<template><van-nav-bartitle="登錄組件"/><van-form@submit="onSubmit"><van-cell-groupinset>步驟2步驟3<van-fieldv-model="username":rules="[{

}]"/><van-fieldv-model="password":rules="[{

}]"/></van-cell-group><van-buttonblocktype="primary"native-type="submit">提交</van-button></van-form></template>6.2.2

Vant中的常用組件演示一種簡(jiǎn)單的表單效果修改src\main.js文件，切換頁面中顯示的組件。步驟1importAppfrom

'./components/'步驟2步驟3組件的文件名6.2.2

Vant中的常用組件演示一種簡(jiǎn)單的表單效果修改src\main.js文件，對(duì)導(dǎo)入style.css文件的代碼進(jìn)行注釋。步驟1//import'./style.css'步驟2步驟36.2.2

Vant中的常用組件在瀏覽器中查看Vant的表單效果如下圖所示。6.2.2

Vant中的常用組件單擊“提交”按鈕后，會(huì)進(jìn)行規(guī)則校驗(yàn)，如下圖所示。6.2.2

Vant中的常用組件先定一個(gè)小目標(biāo)！掌握Vant中Grid組件的使用方法，能夠?qū)崿F(xiàn)網(wǎng)格效果6.2.2

Vant中的常用組件5.Grid組件Vant組件庫提供了Grid組件，用于實(shí)現(xiàn)網(wǎng)格效果，網(wǎng)格可以在水平方向上把頁面分隔成等寬度的區(qū)塊，一般用于同時(shí)展示多個(gè)同類項(xiàng)目的場(chǎng)景，例如微信支付頁面。6.2.2

Vant中的常用組件Grid組件使用<van-grid>標(biāo)簽定義，在該標(biāo)簽中使用<van-grid-item>作為每一個(gè)網(wǎng)格元素的容器。<van-grid-item>標(biāo)簽的常用屬性如下表所示。屬性名icontextto描述圖標(biāo)名稱或圖片鏈接，等同于Icon組件的name屬性圖標(biāo)的文字內(nèi)容單擊后跳轉(zhuǎn)的目標(biāo)路由對(duì)象，等同于vue-router的to屬性單擊后跳轉(zhuǎn)的鏈接地址urldot是否顯示圖標(biāo)右上角小紅點(diǎn)，默認(rèn)為false圖標(biāo)右上角徽標(biāo)的內(nèi)容badge6.2.2

Vant中的常用組件演示一種基礎(chǔ)的網(wǎng)格效果創(chuàng)建src\components\Grid.vue文件，在Vant官方文檔中找到Grid組件相關(guān)代碼，復(fù)制部分核心代碼到當(dāng)前文件中。步驟1步驟2<template><van-grid><van-grid-itemicon="wap-home-o"text="首頁"dot/><van-grid-itemicon="chat-o"

text="聊天"badge="99+"/><van-grid-itemicon="phone-o"

text="電話"/><van-grid-itemicon="user-o"

text="我的"/></van-grid><!--

見下一頁--></template>6.2.2

Vant中的常用組件演示一種基礎(chǔ)的網(wǎng)格效果實(shí)現(xiàn)一行中平均顯示3列圖片，圖片素材從配套源代碼中獲取。步驟1步驟2<van-grid:column-num="3"square:gutter="5"><van-grid-itemicon="more-o"

text="文字"><van-imagesrc="/images/01.jpg"/></van-grid-item><van-grid-itemicon="more-o"

text="文字"><van-imagesrc="/images/02.jpg"/></van-grid-item><van-grid-itemicon="more-o"

text="文字"><van-imagesrc="/images/03.jpg"/></van-grid-item></van-grid>6.2.2

Vant中的常用組件演示一種基礎(chǔ)的網(wǎng)格效果修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/組件的文件名6.2.2

Vant中的常用組件在瀏覽器中查看Vant的網(wǎng)格效果如下圖所示。6.2.2

Vant中的常用組件若想網(wǎng)格的內(nèi)容呈橫向排列，則可以為<van-grid>標(biāo)簽添加direction屬性，將屬性值設(shè)置為horizontal，網(wǎng)格內(nèi)容橫向排列效果如下圖所示。6.2.2

Vant中的常用組件先定一個(gè)小目標(biāo)！掌握Vant中Tabbar組件的使用方法，能夠?qū)崿F(xiàn)標(biāo)簽欄效果6.2.2

Vant中的常用組件6.Tabbar組件Vant組件提供了Tabbar組件，用于在不同頁面之間進(jìn)行切換，常放置在頁面的底部。6.2.2

Vant中的常用組件Tabbar組件使用<van-tabbar>標(biāo)簽定義，在該標(biāo)簽中使用<van-tabbar-item>定義每一個(gè)標(biāo)簽項(xiàng)。<van-tabbar>標(biāo)簽的常用屬性如下表所示。屬性名fixed描述是否固定在底部，默認(rèn)值為true是否顯示外邊框，默認(rèn)值為true選中標(biāo)簽的顏色，默認(rèn)值為#1989fa未選中標(biāo)簽的顏色，默認(rèn)值為#7d7e80borderactive-colorinactive-colorplaceholder

固定在底部時(shí)是否在標(biāo)簽位置生成一個(gè)等高的占位元素，默認(rèn)值為false6.2.2

Vant中的常用組件演示一種基礎(chǔ)的標(biāo)簽欄效果創(chuàng)建src\components\Tabbar.vue文件，在Vant官方文檔中找到Tabbar組件相關(guān)代碼，復(fù)制部分核心代碼到當(dāng)前文件中。步驟1步驟2<template><van-tabbarv-model="active"fixedactive-color="red"inactive-color="blue":placeholder="true"><van-tabbar-itemicon="home-o">標(biāo)簽</van-tabbar-item><!--此處省略了3個(gè)<van-tabbar-item>標(biāo)簽--></van-tabbar></template><scriptsetup>import{ref

}from

'vue'constactive=ref(2)</script>6.2.2

Vant中的常用組件演示一種基礎(chǔ)的標(biāo)簽欄效果修改src\main.js文件，切換頁面中顯示的組件。步驟1步驟2importAppfrom

'./components/組件的文件名6.2.2

Vant中的常用組件在瀏覽器中查看Vant的標(biāo)簽欄效果如下圖所示。6.3Ant

Design

Vue組件庫6.3.1

安裝Ant

Design

Vue先定一個(gè)小目標(biāo)！掌握Ant

Design

Vue組件庫的安裝方法，能夠獨(dú)立安裝、配置Ant

DesignVue6.3.1

安裝Ant

Design

Vue什么是AntDesignVue？6.3.1

安裝Ant

Design

VueAntDesign

Vue是一個(gè)優(yōu)秀的前端UI組件庫，由螞蟻金服體驗(yàn)技術(shù)部推出，于2018年3月正式開源，受到眾多前端開發(fā)者及企業(yè)的喜愛。Ant

Design

Vue基于Vue實(shí)現(xiàn)，專門服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品，支持主流瀏覽器和服務(wù)器端渲染。6.3.1

安裝Ant

Design

Vue使用npm或yarn包管理工具安裝AntDesignVue。#使用npm包管理工具安裝npminstallant-design-vue--save#使用yarn包管理工具安裝yarnaddant-design-vue--save6.3.1

安裝Ant

Design

Vue在Vue

3項(xiàng)目中使用yarn安裝Ant

Design

Vue打開命令提示符，切換到D:\vue\chapter06目錄，使用yarn創(chuàng)建一個(gè)名稱為ant-component的項(xiàng)目。步驟1步驟2步驟3步驟4yarncreatevite--templatevue項(xiàng)目名稱6.3.1

安裝Ant

Design

Vue在Vue

3項(xiàng)目中使用yarn安裝Ant

Design

Vue在命令提示符中，切換到ant-component目錄，為項(xiàng)目安裝所有依賴。步驟1步驟2步驟3步驟4cdant-componentyarn6.3.1

安裝Ant

Design

Vue在Vue

3項(xiàng)目中使用yarn安裝Ant

Design

Vue在ant-component目錄下使用yarn安裝AntDesignVue。步