哈嘍哈嘍，這期帶來螞蟻金服的一個 Ant Design 的 Vue 實現。
樣式還是很現代化的，嗯...現在是2019年9月17，對現在來說還很fashion過幾年就不知道了。
話不多說直接上手，喜歡記得關注，順手右上角來個賞我兩個大手贊，讓我體驗笑出個豬叫聲一下。
正文
要做這種樣式，我們一般在項目中全局引入一下，類似的還有reqwest這種http方法。
反正就是常用的組件都在main中引入一下，這樣每個頁面用起來方便，不需要像我上個login那樣單個頁面引入。
First of all：
引入Ant design
在npm cmd命令控制檯輸入如下語句
npm install ant-design-vue --save
安裝完成以後我們在全局引用一下，
main.js裏寫入
import Vue from 'vue';
import Antd from 'ant-design-vue'// 引入Ant Design Vue組件
import 'ant-design-vue/dist/antd.css' // 引入Ant Design Vue樣式
Vue.use(Antd) //掛載到vue中
我講一些剛開始使用的坑，Ant design以下簡稱Antd
1、Menu
入門一般先來個導航欄，咱用Antd的Menu組件
官方會給你一組寫好的死數據的實例，但是在項目中我們一般寫成動態。
vue中寫動態數據，方便的亞批，不僅代碼優美，還簡潔易讀。
HTML:
<a-menu @click="navClick"
style="width: 256px"
v-model="currentSelectChild"
@openChange="onOpenChange"
:openKeys="currentParent"
theme="dark"
mode="inline">
<!--橫向：horizontal-->
<!--有openKeys時 :defaultOpenKeys="[200]"無效 -->
<!--有v-model時 :ddefaultSelectedKeys="[202]"無效 -->
<a-sub-menu v-for="itParent in NavData" :key="itParent.NavID">
<span slot="title">
<a-icon :type="itParent.Icons" />
<span>{{itParent.Title}}</span>
</span>
<a-menu-item v-for="itChild in itParent.Child" :key="itChild.NavID">
<router-link :to="itChild.Path"><!--根據路徑去跳轉頁面-->
{{itChild.Title}}
</router-link>
</a-menu-item>
</a-sub-menu>
</a-menu>
數據格式：
NavData: [
{
NavID: 100,
Icons:"dashboard",
Title:"操作",
Path:"",
Child: [
{
NavID: 101,
Icons: "",
Title: "用戶",
Path: "/UserInfo",
}, {
NavID: 102,
Icons: "",
Title: "公司",
Path: "/CompanyInfo",
},{
NavID: 103,
Icons: "",
Title: "部門",
Path: "/TeamInfo",
},
]
},{
NavID: 300,
Icons:"audit",
Title:"報表",
Path:"",
Child: [{
NavID: 301,
Icons: "",
Title: "打卡",
Path: "/Card",
}]
}
]
2、全局通知
全局的通知在Antd裏面有各種炫酷的UI：Message、Notification
（Modal其實也可以算，只不過是一種確認提示框）
1)：Message
//只要一開始全局引入了Antd，並且掛載到vue上了，就能直接this出來
//Message,頁面頂部的通知
this.$message.success('Click Me', 2.5, ()=>{//帶callback的
this.$message.warning("上一個關閉了");//普通的
});
2)：Notification
這個不同於Message,他需要配置一些參數，所以不建議每個頁面直接this去調用
以下是我的做法
- 先建一個叫Global的js文件（參考https://blog.csdn.net/xj932956499/article/details/99647782）login頁面route.js用法
- 在main.js裏引入並掛載全局：
//main.js import global from '@/Global' // 引入global Vue.prototype.$global = global;掛載到vue上，就能直接this出來了 - 在Global裏寫下如下代碼
import { notification } from 'ant-design-vue'//引入
notification.config({//寫配置//一些參你也可以配置到動態的，看個人需要
placement: 'topRight',
top: '50px',
duration: 3,
});
function AntNotice(type, Tit, Cont) {
notification[type]({
message: Tit,
description: Cont,
});
}
export default {//頁面返回
AntNotice,
}
//調用： this.$global.AntNotice('success','Click Me','哈哈哈')
3、佈局
先用上這個一般管理系統的通用佈局
<template>
<a-layout id="homeLayout" :style="{ overflow: 'auto', height: '100vh' }">
<a-layout-sider :trigger="null"
collapsible
v-model="collapsed">
<div style="height: 32px;
background: rgba(255,255,255,.2);
margin: 16px;" />
<!--這個位置可以放上面講到的menu代碼-->
</a-layout-sider>
<a-layout>
<a-layout-header style="background: #fff; padding: 0;height:7vh">
<a-icon style=" margin-left: 15px;font-size: 1.2rem;vertical-align: middle;"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="()=> collapsed = !collapsed" />
</a-layout-header>
<a-layout-content :style="{ margin: '1.5vh 10px', padding: '10px', background: '#fff',height: '90vh' }">
Content
</a-layout-content>
</a-layout>
</a-layout>
</template>
效果如下：
主要講解：柵格的響應式佈局
我們在content位置寫下如下代碼
<a-row>
<a-col class="bgGreen" :xs="24" :sm="12" :md="8" :lg="6" >Col</a-col>
<a-col class="bgYellow" :xs="24" :sm="12" :md="8" :lg="6">Col</a-col>
<a-col class="bgGreen" :xs="24" :sm="12" :md="8" :lg="6">Col</a-col>
<a-col class="bgYellow" :xs="24" :sm="12" :md="8" :lg="6">Col</a-col>
</a-row>
這樣寫很舒服的，響應式處理，會根據不同屏幕寬給你顯示不同寬度，
官網沒有強調，特地拿出來引起注意下：
| xs | <576px 響應式柵格，可爲柵格數或一個包含其他屬性的對象 |
number|object | - |
| sm | ≥576px 響應式柵格，可爲柵格數或一個包含其他屬性的對象 |
number|object | - |
| md | ≥768px 響應式柵格，可爲柵格數或一個包含其他屬性的對象 |
number|object | - |
| lg | ≥992px 響應式柵格，可爲柵格數或一個包含其他屬性的對象 |
number|object | - |
| xl | ≥1200px 響應式柵格，可爲柵格數或一個包含其他屬性的對象 |
number|object | - |
| xxl | ≥1600px 響應式柵格，可爲柵格數或一個包含其他屬性的對象 |
number|object |