Vue+ElementUI項目代碼細節總結

1.頁面高度=總高度-上方導航欄等高度：height:calc(100vh - 150px) 注意！！！！等號兩邊必須有空格！！！

2.給div設置滾動條，兩欄布局左側固定，右側滾動：將父元素設置固定高度，左側子元素同樣固定高度，右側設置height：100%。此時長度超過父元素將會出現滾動條，可以設置overflow：auto。隱藏橫向滾動條overflow-x:hidden

3.elementUI表格設置height屬性可以根據高度調整滾動條，非常方便。注意：在標簽里設置height屬性，而不是在css中設置。

4.定時器需要及時清除

5.封裝好的組件，回車鍵操作需要加上native：@keyup.enter.native="handleSubmitLogin"

6.封裝好的組件阻止默認行為：@click.native.prevent="handleSubmitLogin"

7.登錄時使用回車鍵，需要加上自動獲取焦點這一步，因為點擊的時候焦點可能並不在輸入框input。在input標簽內加入屬性：ref="account"。設置好后自動獲取焦點：this.$refs.account.$el.querySelector('input').focus();

8.https.js的設定：

import axios from 'axios'
import apiConfig from '../../config/apiConfig'
import store from '../store/store'
import * as types from '../store/types'
import router from '../router/index'
import { Message } from 'element-ui'

axios.defaults.withCredentials = true
axios.defaults.baseURL = apiConfig.baseUrl

/**
 * @description 設定http 的request 請求攔截器  可用於設定cookie或token等附加信息
 */

axios.interceptors.request.use(
    config => {
        if (store.state.token) {
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

/**
 * @description 設定http 的response 請求攔截器 用於處理登錄超時等邏輯業務
 */
axios.interceptors.response.use(
    response => {
        // API使用內容判定未登錄或登錄超時 進入
        // 根據返回請求判斷是否重新路由
        if (!response.data.success) {
            if (response.data.code === 401) {
                store.commit(types.LOGOUT);
                router.replace({
                    path: '/login'
                })
                Message({
                    type: 'warning',
                    message: '提示：登入超時, 請重新登入'
                })
            } else if (response.data.code === 402) {
                store.commit(types.LOGOUT);
                router.replace({
                    path: '/login'
                })
                Message({
                    type: 'warning',
                    message: '提示：沒有相關權限, 請重新選擇賬號登入'
                })
            }
        }
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // API 使用http 狀態碼401 判定未登錄或超時 進入
                    // 401 清除token信息並跳轉到登錄頁面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: '/login'
                    })
            }

            return Promise.reject(error.response.data)
        }
    });


export function fetch(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
                params: params
            })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}


export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}


export function put(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, params)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}


export function del(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.delete(url, params)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

export default axios;

 

9.elementUI表單判斷rules，prop與data中rule的名字一定要相同。規則名：validator

10.當在dialog中加載圖表或者地圖等，由於dom樹是動態加載的，很可能當你getElementById()時，dom還沒有渲染完成，找不到此id，自然就加載不出來。所以遇到此情況，vue中的nextTick就派上了用場。同樣也可以使用setTimeOut，當dom樹加載完成后再加載圖表。

11.表格搜索功能，搜索后執行的函數，記得把page改成1.因為當你搜索的時候停在第3頁，出來的結果也是第3頁就很尷尬。

12.當需要請求執行完並且成功時再進行下一步，promise就派上了用場。

13.有些在頁面中的css設定，調試的時候是好的，打包上傳后就被引用的css覆蓋。這種情況可以直接將css寫進標簽中，或者定義父類將其包裹。

14.v-if與v-show的區別：v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是通過設置DOM元素的display樣式屬性控制顯隱； 因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。