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 較好。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM