1 在浮动中左右元素高度自适应且有背景颜色
方案1:
设置要根据自适应元素的样式为:
.left{
width: 100px;
float: left;
height: 50px;
background-color: red;
padding-bottom: 999px;
margin-bottom: -999px;
}
<!DOCTYPE html>
<html>
<meta>
<meta charset="UTF-8">
<title>float-auto-height</title>
</head>
<style>
.box{
width: 400px;
margin: 50px auto;
}
.content{
width: 400px;
height: 50px;
overflow: hidden;
}
.left{
width: 100px;
float: left;
height: 50px;
background-color: red;
padding-bottom: 999px;
margin-bottom: -999px;
}
.right{
width: 200px;
float: left;
height: 100px;
background-color: yellow;
}
#more{
width: 100px;
float: right;
background-color: blue;
}
</style>
<body>
<div class="box">
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div id="more">loadMore</div>
</div>
</div>
</body>
<script>
var dom = document.getElementById('more');
dom.addEventListener('click',function(){
let heightStatus = document.getElementsByClassName('content')[0].style.height;
if(heightStatus == 'auto'){
document.getElementsByClassName('content')[0].style.height = '50px';
}else{
document.getElementsByClassName('content')[0].style.height = 'auto';
}
})
</script>
</html>
方案2:
使用弹性布局
2 vue项目中 搜索列表多个类别,一开始显示一行,每个类别中有多个选择项,但是UI给出的设计是每个列表项的宽度不固定,自适应,初始化时超过一行显示更多按钮。
难点: 如何判断何时需要显示更多按钮
解决方案:
使用ref + $nextTick
在页面初始化请求数据之后,使用$nextTick,通过window.getComputedStyle(this.$refs.list).height.replace('px',' ');计算元素的高度,如果元素的高度大于我们给定的高度,我们更改控制更多显示字段的值为true;
3 vue element-ui table CheckBox复选,选中的数据必须和展示数据是同一个。
4.el-upload默认是500kb,重写before-upload无效,ip访问可以,但是域名不行,排查出ngnix默认上传文件大小是1M,修改配置 :
location / {
root html;
index index.html index.htm;
client_max_body_size 1000m;
}