一、Vuetify組件
&emps;&emps;一個(gè)vue ui庫(kù)赃份，提供vue組件供使用。根據(jù) Google Material Design 指南實(shí)現(xiàn)（https://material.io/）姻檀。Vuetify支持SSR(服務(wù)端渲染)爽醋，SPA(單頁(yè)應(yīng)用程序)蔬崩，PWA(漸進(jìn)式web應(yīng)用程序)和標(biāo)準(zhǔn)HTML頁(yè)面。
https://vuetifyjs.com/en/getting-started/quick-start
官網(wǎng)地址：
https://vuetifyjs.com/en/components/dividers
源碼查看
二搀暑、組件安裝
npm install vuetify --save
圖標(biāo)安裝：
npm install material-design-icons-iconfont -D
三沥阳、Vuetify組件引入
main.js
import Vuetify from 'vuetify'
//圖標(biāo)
import 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.use(Vuetify)
index.js
<link rel="stylesheet">
四、Vuetify組件使用
<v-app>
內(nèi)容
</v-app>
所有其他組件都是寫(xiě)在 <v-app></v-app> 之間的自点，通常是在這頁(yè)定義出整個(gè)應(yīng)用的模版桐罕，比如 sidebar，navigation bar 和主要區(qū)域桂敛。然后再根據(jù)不同的頁(yè)面功炮，創(chuàng)建不同的 .vue 文件，通常每個(gè)頁(yè)面都是一個(gè)單獨(dú)的文件术唬，有公用的模塊可以寫(xiě)在一個(gè)地方薪伏。
- v-card卡片
v-card組件是一個(gè)多功能組件，可用于從面板到靜態(tài)圖像的任何事物粗仓。card組件有許多輔助組件嫁怀，使標(biāo)記盡可能簡(jiǎn)單。沒(méi)有列出選項(xiàng)的組件使用Vue的功能組件選項(xiàng)來(lái)加快渲染速度借浊，并作為標(biāo)記糖來(lái)使構(gòu)建更容易塘淑。
一個(gè)卡片有四個(gè)基本組件，v-card-media巴碗、v-card-title朴爬、v-card-text和v-card-actions∠鹣卡片v-card包含四個(gè)基本組件說(shuō)明：
（1）v-card-media：一般放圖片或視頻；
（2）v-card-title：卡片的標(biāo)題母赵，一般位于卡片頂部逸爵；
（3）v-card-text：卡片的文本（主體內(nèi)容），一般位于卡片正中凹嘲；
（4）v-card-action：卡片的按鈕师倔，一般位于卡片底部；
<template>
<div id="app">
<v-app>
<v-card>
<!-- 卡片的頭部 -->
<v-card-title>
<v-btn color="primary">新增</v-btn>
</v-card-title>
<!-- 分割線 -->
<v-divider/>
<!--卡片的中部-->
<v-data-table
:headers="headers"
:items="brands"
:search="search"
:pagination.sync="pagination"
:total-items="totalBrands"
:loading="loading"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.id }}</td>
<td class="text-xs-center">{{ props.item.name }}</td>
<td class="text-xs-center">
<img :src="props.item.image">
</td>
<td class="text-xs-center">{{ props.item.letter }}</td>
<td class="justify-center layout">
<v-btn color="info">編輯</v-btn>
<v-btn color="warning">刪除</v-btn>
</td>
</template>
</v-data-table>
</v-card>
</v-app>
</div>
</template>
顯示效果
- 柵格v-layout
Vuetify擁有一個(gè)12點(diǎn)的柵格系統(tǒng)周蹭，它使用flex-box構(gòu)建趋艘，柵格用于布局應(yīng)用程序的內(nèi)容。它包含5種類型的媒體斷點(diǎn)凶朗，用于定位特定的屏幕大小或方向瓷胧。柵格組件的屬性實(shí)際上是從它們定義的屬性派生的類，這允許您輕松地將這些輔助類指定為屬性棚愤，同時(shí)仍然提供在任何地方使用的類搓萧；其實(shí)vuetify的柵格與bootstrap的柵格系統(tǒng)是類似的杂数。
其中v-layout就是對(duì)應(yīng)柵格中的一行，而v-flex對(duì)應(yīng)的就是一列瘸洛；
<v-layout row wrap>
一行內(nèi)容
</v-layout>
- 水平卡片v-flex
使用v-flex揍移，您可以創(chuàng)建自定義的水平卡片。使用contain屬性來(lái)縮小v-card-media以適應(yīng)容器內(nèi)部反肋，而不是覆蓋那伐。
<template>
<div id="app">
<v-app>
<v-layout class="px-4 pb-3">
<!-- 列 -->
<v-flex xs2>
<v-btn class="info">新增品牌</v-btn>
</v-flex>
<!-- 間隔 -->
<v-spacer/>
<v-flex xs6>
<v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
</v-flex>
</v-layout>
</v-app>
</div>
</template>
代碼中的px-4表示x軸邊距為4，pb-3表示底部邊距為3石蔗；以及 <v-spacer />表示自動(dòng)填充罕邀。
- v-btn按鈕
在UI組件中v-btn組件是用一個(gè)material design主題和多個(gè)選項(xiàng)來(lái)替換標(biāo)準(zhǔn)的html按鈕。任何色彩輔助類都可以用來(lái)改變背景或文字的顏色抓督。
v-btn按鈕常用屬性：
（1）flat：移除按鈕的背景色燃少，布爾值類型，默認(rèn)為false铃在；
（2）icon：將按鈕指定為圖標(biāo)——原型和平面阵具，布爾值類型，默認(rèn)為false定铜；
（3）small：小型按鈕阳液，布爾值類型，默認(rèn)為false揣炕；
<template>
<div id="app">
<v-app>
<v-btn color="info" small>修改</v-btn>
<v-btn color="error" large>刪除</v-btn>
<v-btn flat icon color="info">
<v-icon>edit</v-icon>
</v-btn>
<v-btn flat icon color="error">
<v-icon>delete</v-icon>
</v-btn>
</v-app>
</div>
</template>
按鈕
- v-text-field文本
v-text-field文本框組件用于收集用戶提供的信息帘皿。
v-text-field文本框組件常用屬性
（1）append-icon：在文本框后面追加一個(gè)圖標(biāo)，默認(rèn)為String類型畸陡；
（2）counter：為輸入長(zhǎng)度創(chuàng)建一個(gè)計(jì)數(shù)器鹰溜，如果未指定數(shù)字，則默認(rèn)為25丁恭，不會(huì)應(yīng)用任何驗(yàn)證曹动；類型為boolean|number|string；
（3）disabled：布爾類型boolean不可見(jiàn)牲览；
（4）multi-line：是否轉(zhuǎn)為文本域墓陈，默認(rèn)是false。文本框和文本域可以自由切換第献；
（5）name：字段名贡必，表單中會(huì)用到；
（6）label：提示文字庸毫，輸入框的標(biāo)簽仔拟；
（7）value：值〔沓瘢可以用v-model代替理逊，實(shí)現(xiàn)雙向綁定橡伞。
（8）hide-details：表示隱藏文本框底部錯(cuò)誤信息。
（9）required：是否為必填項(xiàng)晋被，如果是兑徘，會(huì)在label后加*，不具備校驗(yàn)功能羡洛。默認(rèn)是false挂脑；
（10）rows：文本域的行數(shù)，multi-line為true時(shí)才有效欲侮；
（11）single-line：是否單行文本顯示崭闲，默認(rèn)是false。
<template>
<div id="app">
<v-app>
<v-flex xs6>
<v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
</v-flex>
</v-app>
</div>
</template>
搜索
- v-dialog對(duì)話框
v-dialog 組件用來(lái)通知用戶有關(guān)特定任務(wù)的信息威蕉，并且可能包含重要信息刁俭，需要作出決定或者涉及多任務(wù)；應(yīng)謹(jǐn)慎使用對(duì)話框韧涨，因?yàn)樗侵袛嗟摹?br> v-dialog 組件常用屬性
（1）max-width：限制寬度牍戚；
（2）v-model：value值雙向綁定到show變量，用來(lái)控制窗口顯示虑粥；
（3）persisitent：控制窗口不會(huì)被意外關(guān)閉如孝，布爾類型，默認(rèn)值為false
（4）scrollable：當(dāng)包含card, card-title, card-text 以及 card-actions這幾個(gè)的對(duì)話框可滾動(dòng)設(shè)為 true 的時(shí)候娩贷；card-text 應(yīng)該指定高度并且設(shè)置 overflow-y第晰；布爾類型，默認(rèn)值為false彬祖。
<template>
<div id="app">
<v-app>
<!--彈出的對(duì)話框-->
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on }">
<v-btn color="red lighten-2" dark v-on="on">新增內(nèi)容</v-btn>
</template>
<v-card>
<!--對(duì)話框的標(biāo)題-->
<v-card-title class="headline grey lighten-2" primary-title>主要內(nèi)容</v-card-title>
<v-card-text>對(duì)話框測(cè)試</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="dialog = false">確定</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
dialog: false
};
}
};
</script>
對(duì)話框
注意：我們需要在data中定義show與v-dialog組件中的show進(jìn)行雙向綁定
show: false,//是否顯示對(duì)話框
- data-tables組件
v-data-table 用于顯示表格數(shù)據(jù)茁瘦，功能包括排序、搜索储笑、分頁(yè)腹躁、行內(nèi)編輯、頭部提示以及行選擇南蓬。而我們?cè)趯?shí)際應(yīng)用中使用最多的就是服務(wù)端分頁(yè)和排序，如果你從后臺(tái)加載數(shù)據(jù)哑了，并希望顯示結(jié)果之前進(jìn)行分頁(yè)和排序赘方，你可以使用 total-items 屬性。定義這個(gè)屬性將會(huì)禁用內(nèi)置的分頁(yè)和排序弱左，并且你需要使用 pagination 屬性來(lái)監(jiān)聽(tīng)變化窄陡。使用 loading 屬性來(lái)顯示獲取數(shù)據(jù)時(shí)的進(jìn)度條。
v-data-table核心屬性：
（1）headers：定義表頭的數(shù)組拆火，數(shù)組的每個(gè)元素就是一個(gè)表頭信息對(duì)象跳夭，結(jié)構(gòu)：
{
text: string, // 表頭的顯示文本
value: string, // 表頭對(duì)應(yīng)的每行數(shù)據(jù)的key
align: 'left' | 'center' | 'right', // 位置
sortable: boolean, // 是否可排序
class: string[] | string,// 樣式
width: string,// 寬度
}
（2）items：表格的數(shù)據(jù)的數(shù)組涂圆，數(shù)組的每個(gè)元素是一行數(shù)據(jù)的對(duì)象，對(duì)象的key要與表頭的value一致币叹。
（3）loading：是否顯示加載數(shù)據(jù)的進(jìn)度條润歉，默認(rèn)是false；
（4）total-items：分頁(yè)的總條數(shù)信息颈抚，number類型踩衩，無(wú)默認(rèn)值；
（5）pagination.sync：包含分頁(yè)和排序信息的對(duì)象贩汉，將其與vue實(shí)例中的屬性關(guān)聯(lián)驱富，表格的分頁(yè)或排序按鈕被觸發(fā)時(shí)，會(huì)自動(dòng)將最新的分頁(yè)和排序信息更新匹舞。對(duì)象結(jié)構(gòu)：
{
page: 1, // 當(dāng)前頁(yè)
rowsPerPage: 5, // 每頁(yè)大小
sortBy: '', // 排序字段
descending:false, // 是否降序
}
（6）select-all ：是否顯示每一行的復(fù)選框褐鸥，Boolean類型，無(wú)默認(rèn)值赐稽；
（7）no-data-text：當(dāng)沒(méi)有查詢到數(shù)據(jù)時(shí)顯示的提示信息叫榕，string類型，無(wú)默認(rèn)值又憨；
（8）dark：是否使用黑暗色彩主題翠霍，默認(rèn)是false；
（9）expand：表格的行是否可以展開(kāi)蠢莺，默認(rèn)是false寒匙。
（10）search：搜索過(guò)濾字段。
五躏将、服務(wù)端分頁(yè)模板
- 官網(wǎng)服務(wù)端分頁(yè)
<template>
<div>
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
:pagination.sync="pagination"
:total-items="totalDesserts"
:loading="loading"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</div>
</template>
Vue自動(dòng)遍歷傳遞過(guò)來(lái)的items屬性锄弱，并把得到的對(duì)象傳遞給這個(gè)段template中的props.item屬性。但是需要注意的是給items和totalitems賦值祸憋；
當(dāng)pagination變化時(shí)会宪，重新獲取數(shù)據(jù)，再次給items和totalitems賦值蚯窥。
- 分頁(yè)屬性
（1）pagination.sync屬性說(shuō)明
首先我們發(fā)現(xiàn)pagination包含分頁(yè)以及排序信息的對(duì)象掸鹅。有下屬性：
page當(dāng)前頁(yè)，也就是當(dāng)前第幾頁(yè)拦赠；
rowsPerPage表示每頁(yè)多少條記錄巍沙；
sortBy表示分頁(yè)字段；
descending：是否降序荷鼠；
totalItems表示總條數(shù)句携，一般是后臺(tái)傳遞給前臺(tái)。
【需要注意】我們?cè)谇芭_(tái)頁(yè)面選擇分頁(yè)方式需要采用watch對(duì)pagination對(duì)象進(jìn)行監(jiān)控允乐。
watch:{
key(){
this.loadBrands();
},
pagination:{
deep: true,//深度監(jiān)控
handler(){
this.loadBrands();
}
}
},
methods:{
loadBrands(){
this.$http.get("/brands/page",{ params:{
page: this.pagination.page,//當(dāng)前頁(yè)
row: this.pagination.rowsPerPage,//每頁(yè)大小
sortBy: this.pagination.sortBy, //分頁(yè)字段
desc: this.pagination.descending,//第幾頁(yè)
key: this.key,//查詢條件
}
}).then();
}
}
}
以上代碼發(fā)出的請(qǐng)求是http://api.leyou.com/api/brands/page?page=1&row=25&sortBy=id&desc=true&key=zhagnsan
示例：
<template>
<div>
<v-app>
<v-data-table
:headers="headers"
:items="brands"
:pagination.sync="pagination"
:total-items="totalBrands"
:loading="loading"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td class="text-xs-center">{{ props.item.id }}</td>
<td class="text-xs-center">{{ props.item.name }}</td>
<td class="text-xs-center">
<img :src="props.item.image" alt>
</td>
<td class="text-xs-center">{{ props.item.letter }}</td>
<td class="text-xs-center">修改/刪除</td>
</template>
</v-data-table>
</v-app>
</div>
</template>
<script>
export default {
name: "MyBrand",
data() {
return {
totalBrands: 0, //
brands: [], //數(shù)組矮嫉，就是個(gè)數(shù)組削咆，對(duì)應(yīng)組件中的item
loading: false,
pagination: {}, //空對(duì)象
headers: [
//headers表頭數(shù)組，里面是對(duì)象
{
text: "品牌id", //顯示文本
align: "center", //left蠢笋，center拨齐，rights三種對(duì)其方式
sortable: true, //是不是需要排序
value: "id" //value這個(gè)頭關(guān)聯(lián)的字段
},
{ text: "品牌名稱", align: "center", value: "name", sortable: false },
{ text: "品牌Logo", align: "center", value: "image", sortable: false },
{ text: "首字母", align: "center", value: "letter", sortable: false },
{ text: "操作", align: "center", sortable: false }
]
};
},
created() {
this.brands = [
{ id: 1, name: "小米", image: "2.jpg", letter: "X" },
{ id: 2, name: "華為", image: "", letter: "H" },
{ id: 1, name: "Apple", image: "", letter: "A" },
{ id: 1, name: "三星", image: "", letter: "S" }
];
this.totalBrands = 15;
}
};
</script>
分頁(yè)顯示
六、v-form表單及校驗(yàn)
- v-form表單
v-form的屬性和方法
v-form表單的常用屬性：
（1）lazy-validation：如果啟用挺尿，value將永遠(yuǎn)是 true 奏黑，除非有可見(jiàn)的驗(yàn)證錯(cuò)誤。您仍然可以調(diào)用validate()來(lái)手動(dòng)觸發(fā)驗(yàn)證编矾；布爾類型熟史，默認(rèn)值為false。
（2）value：true窄俏，代表表單驗(yàn)證通過(guò)蹂匹；false，代表表單驗(yàn)證失敯简凇限寞；布爾類型，默認(rèn)值為false仰坦。
v-form的常用方法
（1）validate：校驗(yàn)整個(gè)表單數(shù)據(jù)履植，前提是你寫(xiě)好了校驗(yàn)規(guī)則。返回Boolean表示校驗(yàn)成功或失敗悄晃。
（2）reset：重置表單數(shù)據(jù)玫霎。
<template>
<v-app>
<v-form ref="form" v-model="valid" lazy-validation>
<v-text-field v-model="name" :rules="nameRules" :counter="10" label="姓名" required></v-text-field>
<v-text-field v-model="email" :rules="emailRules" label="E-mail" required></v-text-field>
<v-select v-model="select" :items="items" :rules="[v => !!v || '必須填加']" label="內(nèi)容" required></v-select>
<v-checkbox v-model="checkbox" :rules="[v => !!v || '接受并繼續(xù)!']" label="你接受嗎?" required></v-checkbox>
<v-btn :disabled="!valid" @click="submit">提交</v-btn>
<v-btn @click="clear">清除</v-btn>
</v-form>
</v-app>
</template>
<script>
export default {
name: "MyBrand"
};
</script>
