關於Ant-Design-Vue快速上手指南+排坑
前言
公司要開發一個後臺管理系統，對於UI庫的選擇上選擇瞭顏值爆表的Ant-Design-Vue作為整個項目UI庫，但誰曾想，暗中的坑一個接一個，文檔也不怎麼詳細，可能習慣瞭element-ui的掘友們也許不怎麼好適應，本文就帶大傢一起學習如何高效使用Ant-Design-Vue。
NO.1 表單組件
首先就來說說最常用的Form組件的正確使用姿勢：
先來看官方一段話述：
第一、我們不推薦在Form中使用雙向綁定，同一份數據可能在多處使用，如果使用雙向綁定，那麼數據的修改會同時同步到各個組件，但這並不是我們想要的， 你應該在表單提交成功或失敗或確認時同步數據，使用非雙向綁定的表單，你會擁有最大限度的控制數據修改/同步的權限。
第二、如果你不使用表單的自動校驗/收集功能，即沒有使用v-decorator修飾過的組件，你依然可以使用v-model
看瞭官方的建議後，我們愉快的使用v-decorator修飾input組件，代碼如下：
<a-form-item>
<a-input
placeholder="賬號"
v-decorator="['account',{rules: [{ required: true,whitespace:true,message: '請輸入您的登陸賬號' }]}]"
/>
</a-form-item>
劃重點：
v-decorator裡的account可以理解為input的name值，後面{}對象可以配置校驗規則，初始值等參數，這裡需要註意的是使用瞭v-decorator的組件無法使用v-model，也無法設置value等與值有關的屬性，否則報錯
v-decorator會自動收集你表單裡的數據到form對象裡，所以別忘瞭在data中加上這句代碼：
form: this.$form.createForm(this)
模板中這麼寫：
如何自定義表單校驗規則
這裡拿確認密碼舉例：
<a-input
type="password"
v-decorator="['new_password',{rules:[{required: true,whitespace:true,message: '請輸入新密碼'},{validator: handlePass}]}]"
/>
<a-input
type="password"
v-decorator="['confirm_password',{rules:[{required: true,whitespace:true,message: '請重復新密碼'},{validator:handleConfirmPass}]}]"
/>
這裡我們使用validator校驗器自定義函數
handlePass(rule, value, callback) {
this.password = value;
callback();
},
handleConfirmPass(rule, value, callback) {
if (this.password && this.password !== value) {
callback('與新密碼輸入不一致');
}
callback();
},
這裡需要註意callback()必須調用
這裡的value就是對應表單輸入瞭的值，然後知道瞭這些我們就可以寫我們自己的業務邏輯瞭
做好的效果如圖：
表單回顯
我們在做編輯時首先需要通過後端接口讀取到之前的數據，但是因為現在沒有瞭v-model，那麼我們該怎麼辦？
可以調用form對象中的setFieldsValue把後端返回的對象直接設置上去，如果是在mounted方法裡必須加上$nextTick，不然會拋出警告說我們在表單未渲染好之前給予瞭數據
代碼如圖：
圖中setFieldsInitialValue是設置表單初始值，如果表單中有重置按鈕，就需要設置上，重置按鈕調用this.form.resetFields()就可以重置form表單瞭
這個setFieldsValue方法會把傳進去的對象的key和模板中v-decorator中的第一個參數比較，會自動把對應的值set進去。
提交表單
按鈕加上html-type="submit"後點擊會觸發這個方法，這個方法校驗表單中所有必填項沒有問題後會自動幫我們把表單中所有帶有v-decorator修飾的組件的值和name序列化好，我們就可以直接傳給後端瞭。
NO.2 表格(Table)
我們的模板可以這麼寫：
ant-design-vue的表格自帶分頁，接下來我把上圖中的參數挨個解釋下，columns是單元格信息，我們可以把他導出為一個數組，如下圖：
這裡的title是用戶看到的文字，dataIndex要和後臺傳過來的字段一致，不然數據不會顯示出來，其次還提供瞭customRender和scopedSlots兩種方式自定義內容，這裡使用瞭第一種方式，但值得一提的是如果使用的是slot-scope方式，在模板中定義一個點擊事件，想要獲取到當前行的數據時，一定一定不要加dataIndex屬性，否則會是undefined
看一個scopedSlots使用的例子：
可以看到上面定義columns時給action沒有加dataIndex
我們繼續看dataSource是什麼，他就是你給table傳遞的數據
rowKey可以理解為時循環時需要的key(必有)pagination初始化一個空對象scroll定義表格可以橫向滾動handleTableChange是當分頁數據發生改變時拋出的事件
為瞭簡化操作，我這裡封裝瞭一個mixin,當頁面中有table時直接混入mixin就支持分頁和拉取數據的邏輯瞭，代碼如下：
export const mixin = {
data() {
return {
pagination: {},
data: [],
};
},
methods: {
handleTableChange(pagination) {
const pager = {...this.pagination};
pager.current = pagination.current;
this.pagination = pager;
this.loadData({
page: pagination.current
});
},
async loadData(params = {}) {
try {
const {data: table_data, total, per_page} = await this.loadMethod('flush' in params ? {page: 1} : {page: 1, ...params});
const pagination = {...this.pagination};
pagination.total = total;
pagination.pageSize = per_page;
'flush' in params && (pagination.current = 1);
this.data = table_data;
this.pagination = pagination;
} catch (e) {
console.log(e);
}
}
}
};
flush用於標識是否是插入新數據或者刪除瞭數據，如果是我們直接把page重置為1返回第一頁
我們在頁面使用隻需要以下幾行代碼：
import { getLog } from '@/api/api';
import { mixin } from '@/mixins';
export default {
name: "log",
mixins: [mixin],
data() {
return {
columns,
loadMethod: getLog
};
},
mounted() {
this.loadData();
}
};
這樣其他類似的組件也可以直接復用本邏輯。
NO.3 Spin組件
我們平時在後臺管理系統中，ajax請求過程中都會出現全屏加載提示的遮罩層，做這個功能時我想到瞭這個組件，然後去官方文檔查看，看到瞭如下圖的操作方式：
然後粘貼到代碼中，各種操作，沒有任何反應，甚至有時候還來點小報錯，Spin組件肯定是引入瞭，反正就是最後怎麼操作都沒成功，無奈之下，自己用瞭他的樣式寫瞭個Vue的Spin插件：
我們首先新建Loading.vue
<template> <div v-if="show" class="loading-container"> <div class="loading-mask"></div> <div class="loading-content"> <a-spin tip="正在加載數據中..." size="large"> </a-spin> </div> </div> </template>
<script>
export default {
name: 'Loading',
props: {
show: Boolean,
},
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.loading-container{
position: relative;
text-align: center;
z-index:9999;
.loading-mask{
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(0,0,0,.7);
}
.loading-content{
position: fixed;
left: 50%;
top: 50%;
z-index: 300;
transform: translate(-50%,-50%);
text-align: center;
color:#fff;
}
}
</style>
然後再新建Loading.js
import Vue from 'vue';
import loadingComponent from './Loading.vue';
const LoadingConstructor = Vue.extend(loadingComponent);
const instance = new LoadingConstructor({
el: document.createElement('div')
});
instance.show = false; // 默認隱藏
const loading = {
show() { // 顯示方法
instance.show = true;
document.body.appendChild(instance.$el);
},
hide() { // 隱藏方法
instance.show = false;
}
};
export default {
install() {
if (!Vue.$loading) {
Vue.$loading = loading;
}
Vue.mixin({
created() {
this.$loading = Vue.$loading;
}
});
}
};
然後在main.js中
import loading from '@/components/Loading/loading.js'; Vue.use(loading);
然後我們就可以愉快的調用瞭：
Vue.$loading.show();
打包優化
首先就是用官方快速上手中提供的按需加載，這裡不再贅述，使用之後還存在以下問題：
裡面的moment.js，還有lodash，還有icon的dist居然占用瞭我們500KB的空間，這不能忍，那怎麼辦呢？
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
我們首先忽略掉語言包,然後看看圖標怎麼優化：
config.resolve.alias
.set('@', resolve('src'))
.set('@ant-design/icons/lib/dist$',resolve('src/icon.js'))
我們還需要在src文件夾下面加一個文件 icons.js
//自己項目裡面用到的Icon
export {default as UserOutline} from '@ant-design/icons/lib/outline/UserOutline';
export {default as CloseCircleFill} from '@ant-design/icons/lib/fill/CloseCircleFill';
export {default as InfoCircleFill} from '@ant-design/icons/lib/fill/InfoCircleFill';
export {default as CheckCircleFill} from '@ant-design/icons/lib/fill/CheckCircleFill';
我們還可以開啟gzip壓縮等，使用DLL優化我們的打包速度，這些在這裡就不再贅述瞭，社區有很多類似的貼子。
結語
那麼對於ant-design-vue使用的前兩天感覺不怎麼順手，現在隻能說真香
其實這個UI庫用習慣之後會發現好像Form表單的設計其實比v-model更好用，以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。
推薦閱讀：
- 淺談Vue+Ant Design form表單的一些坑
- 列表頁常見hook封裝實例
- antd vue v-decorator的取值與賦值問題
- vue使用mixins優化組件
- Ant Design 組件庫之步驟條實現