Vue+ElementUI项⽬代码细节总结
1.页⾯⾼度=总⾼度-上⽅导航栏等⾼度：height:calc(100vh - 150px) 注意等号两边必须有空格！！！
2.给div设置滚动条，两栏布局左侧固定，右侧滚动：将⽗元素设置固定⾼度，左侧⼦元素同样固定⾼度，右侧设置height：100%。此时长度超过⽗元素将会出现滚动条，可以设置overflow：auto。隐藏横向滚动条overflow-x:hidden
3.elementUI表格设置height属性可以根据⾼度调整滚动条，⾮常⽅便。注意：在标签⾥设置height属性，⽽不是在css中设置。
4.定时器需要及时清除
5.封装好的组件，回车键操作需要加上native：@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等附加信息
*/
quest.use(
config => {
if (ken) {
config.headers.Authorization = `token ${ken}`;
}
return config;
},
err => {
ject(err);
});
/
**
* @description 设定http 的response 请求⽤于处理登录超时等逻辑业务
*/
sponse.use(
response => {
// API使⽤内容判定未登录或登录超时进⼊
// 根据返回请求判断是否重新路由
if (!response.data.success) {
if (de === 401) {
storemit(types.LOGOUT);
path: '/login'
})
Message({
type: 'warning',
message: '提⽰：登⼊超时, 请重新登⼊'
})
} else if (de === 402) {
storemit(types.LOGOUT);
path: '/login'
})
Message({
type: 'warning',
message: '提⽰：没有相关权限, 请重新选择账号登⼊'
})
}
}
return response;
},
error => {
if (sponse) {
switch (sponse.status) {
case 401:
// API 使⽤http 状态码401 判定未登录或超时进⼊
// 401 清除token信息并跳转到登录页⾯
storemit(types.LOGOUT);
path: '/login'
})
}
sponse.data)
}
});
element表格横向滚动条export function fetch(url, params = {}) {
return new Promise((resolve, reject) => {
<(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 较好。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论