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