最近在做vue-element-admin项目的时候遇到了很多问题,
首先是跨域问题:
在 vue.config.js 文件里面,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api/sys': {
target: 'http://182.16.40.112:18010', // 田
// target: 'http://182.16.40.233:18010', // 门
// target: 'http://dev.yun.com',
changeOrigin: true, // 是否支持跨域
ws: true,
pathRewrite: {
'^/api/sys': ''
}
},
···
自定义button 颜色
.el-button--addbtn.is-active,
.el-button--addbtn:active {
background: #873df2;
border-color: #873df2;
color: #ffffff;
}
.el-button--addbtn.is-disabled{
background: #9674c7;
border-color: #9674c7;
color: #ffffff;
}
.el-button--addbtn:focus,
.el-button--addbtn:hover {
background: #9674c7 !important;
border-color: #9674c7 !important;
color: #ffffff !important;
}
.el-button--addbtn {
background: #873df2;
border-color: #873df2;
color: #ffffff;
}
// 用法
<el-button type="addbtn" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
// 自定义弹窗动画 放在公共样式文件中就可以了,他会覆盖 的默认动画
.el-dialog__wrapper {
transition-duration: 0.8s;
}
.dialog-fade-enter-active{
animation: none !important;
}
.dialog-fade-leave-active {
transition-duration: 0.5s !important;
animation: none !important;
}
.dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog{
animation-fill-mode: forwards;
}
.dialog-fade-enter-active .el-dialog{
animation-duration: 0.5s;
animation-name: anim-open;
animation-timing-function: cubic-bezier(0.6,0,0.4,1);
}
.dialog-fade-leave-active .el-dialog{
animation-duration: 0.5s;
animation-name: anim-close;
}
@keyframes anim-open {
0% { opacity: 0; transform: scale3d(0, 0, 1); }
100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes anim-close {
0% { opacity: 1; }
100% { opacity: 0; transform: scale3d(0.5, 0.5, 1); }
}