Vue+ElementUI项目代码细节总结
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue+ElementUI项目代码细节总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3281字，纯文字阅读大概需要5分钟。
内容图文
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 较好。
原文：https://www.cnblogs.com/sylys/p/13626366.html
内容总结
以上是互联网集市为您收集整理的Vue+ElementUI项目代码细节总结全部内容，希望文章能够帮你解决Vue+ElementUI项目代码细节总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。