项目中遇到的难点

最新推荐文章于 2024-07-15 10:32:40 发布

means-go

最新推荐文章于 2024-07-15 10:32:40 发布

阅读量3.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37815292/article/details/87971964

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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;
 }

means-go

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
项目中遇到的难点

1 在浮动中左右元素高度自适应且有背景颜色方案1:设置要根据自适应元素的样式为：.left{width: 100px;float: left;height: 50px;background-color: red;padding-bottom: 999px;margin-bottom: -999px;}&lt;!DOCTYPE html&gt;&lt;html&gt;&lt...
复制链接

扫一扫

专栏目录