elementadmin使用记录
关于使用scoped scss 控制子组件样式无效的解决方案
/deep/或者>>>，如果无效可以使用::v-deep替换
.charts {
::v-deep .el-tabs__item {
height: 55px;
line-height: 55px;
}
margin-top: 10px;
padding: 0px 15px;
background: white;
} |
注意：::v-deep后边必须有空格
子组件根节点样式会受到父组件样式影响，这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。所以子组件根节点的class不能与父组件相同。
参考 https://vue-loader.vuejs.org/zh/guide/scoped-css.html#子组件的根元素
css定义全局css变量 \src\styles\variables.scss
$monitorColor:#79c882; $monitorHighColor:#ff6d6d; $monitorLowColor:#d986f4; |
引用
@import "~@/styles/variables.scss";
.list_ul ul li span.low {
background-color: $monitorLowColor;
} |
本地调试跨域问题解决
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: 'http://xxxx.com', // api接口地址
}, |
本地多个地址配置代理
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/dev-api': {
target: `http://${baseHost}:20015`,
changeOrigin: true,
pathRewrite: {
'^/dev-api': '/'
}
},
'/socketapi': {
target: `ws://${baseHost}:20017`,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/socketapi': '/'
}
},
'/amapapi': {
target: 'https://restapi.amap.com',
changeOrigin: true,
pathRewrite: {
'^/amapapi': '/'
}
},
}
}, |
打包后nginx代理解决跨域问题
# 配置代理转发（/prod-api 是.env.production 内定义的）
location /prod-api {
rewrite ^.+prod-api/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://110.124.10.133:20015; #api地址
}
location /amapapi {
rewrite ^.+amapapi/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass https://restapi.amap.com; #api地址
}
location /socketapi {
proxy_pass http://110.124.10.133:20017/; #websocket地址
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_read_timeout 120s;
proxy_set_header Upgrade websocket;
proxy_set_header Connection Upgrade;
} |
el-radio-group渲染不选中问题
在el-radio-group中绑定v-model绑定的类型和label必须一个类型，否则可能渲染不选中
this.$set的使用
官方文档说明 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。这个时候就需要使用
this.$set(ele,'checked',true) |
在vue里声明过的对象，添加新属性值，有一种写法是会更新此属性的值,但是不能检测到对象属性的添加或删除不会更新视图。
打包时提示Using / for division is deprecated
Building for production…DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spacer, 2)
style添加
<style lang="scss" scoped> @use "sass:math"; 并且将$spacer/2 修改为 math.div($spacer, 2) |