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