• vue 记录一个 自适应高度 ,可拖拽宽度的页面


    <!-- 扫码统计 -->
    <template>
      <div>
          <div id="box"  :style="{height:divHeight+'px'}">
            <div id="left">
                1111111111
            </div>
            <div id="resize"></div>
            <div id="right" >
                22222222222
            </div>
          </div>
      </div>
    </template>
    
    <script>
    export default {
        data(){
            return{
                screenWidth: window.innerWidth,
                screenHeight: window.innerHeight,
                divHeight: window.innerHeight - 110,
            }
        },
        created(){this.divHeight = window.innerHeight - 110;
        },
        mounted() {
            this.dragControllerDiv();
            this.screenWidth = document.body.clientWidth;
            this.screenHeight = document.body.clientHeight;
            window.onresize = () => {
                return (() => {
                    this.screenWidth = document.body.clientWidth;
                    this.screenHeight = document.body.clientHeight;
                })();
            };
        },
        methods:{
            dragControllerDiv() {
                let resize = document.getElementById("resize");
                let left = document.getElementById("left");
                let right = document.getElementById("right");
                let box = document.getElementById("box");
    
                resize.onmousedown = function (e) {
                    let startX = e.clientX;
                    resize.left = resize.offsetLeft;
                    document.onmousemove = function (e) {
                        let endX = e.clientX;
                        let moveLen = resize.left + (endX - startX);
                        let maxT = box.clientWidth - resize.offsetWidth;
                        if (moveLen < 100) moveLen = 100;
                        //   if (moveLen > maxT - 800) moveLen = maxT - 800
                        resize.style.left = moveLen;
                        left.style.width = moveLen + "px";
                        right.style.width = box.clientWidth - moveLen - 5 + "px";
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        resize.releaseCapture && resize.releaseCapture();
                    };
                    resize.setCapture && resize.setCapture();
                    return false;
                };
            },
        }
    }
    </script>
    
    <style scoped>
    .bigbox {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    #box {
        flex: 1;
        width: 100%;
        height: 500px;
        position: relative;
        display: flex;
    }
    
    #left {
        width: calc(20% - 5px);
        height: 100%;
        overflow: auto;
        border:1px solid red;
    }
    
    #resize {
        position: relative;
        width: 5px;
        height: 100%;
        cursor: w-resize;
    }
    
    #right {
        width: 80%;
        height: 100%;
        overflow: hidden;
    }
    .flex {
        display: flex;
        margin-bottom: 10px;
        align-items: center;
    }
    
    </style>
    
    
    <style lang='scss' scoped></style>
  • 相关阅读:
    Maven配置及本地仓库设置
    【转载】精神目标
    Maven构建项目后项目报Error错误Java compiler level does not match the version of the installed Java project fac
    MYSQL数据库无法使用IP地址访问的解决办法
    Unity3D基础--动态创建和设置游戏对象
    把解压缩版的tomcat6注册成服务并设置自启动
    ARToolKit for Unity环境搭建(初步搭建成功)
    问题
    关于SSH
    论文随笔
  • 原文地址:https://www.cnblogs.com/fuyuanling/p/13700760.html
Copyright © 2020-2023  润新知