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