调整html元素大小 resize

1、使用css属性：resize

div{ resize: both;}

resize 属性规定是否可由用户调整元素的尺寸。

取值：

none：默认，用户无法调整元素的尺寸。
Both：用户可调整元素的高度和宽度。
Horizontal：用户可调整元素的宽度。
Vertical：用户可调整元素的高度。

缺点：不支持ie！仅Firefox 4+、Chrome 以及 Safari 支持 resize。

2、自己造一个轮子

使用拖拽改变元素大小。
这里写图片描述
以上图为例，父层div包裹着内容区，在父层div里还有三个div，分别位于父层div的下方，右方及右下方。拖拽下方div可改变父层div的高度，拖拽右方div可改变父层div的宽度，拖拽右下方div可改变父层div的宽度及高度。

//代码实现
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>resize</title>
    <style>
        .myResize{
            width: 300px;
            height:300px;
            position: relative;
            border-top: 3px solid #00f;
            border-left: 3px solid #00f;
        }
        .myResize .bottom,
        .myResize .right,
        .myResize .bottom-right{
            position: absolute;
            background: #00f;
        }
        .myResize .bottom{
            width: calc(100% - 6px);
            height:3px;
            bottom:0;
            cursor: s-resize;
        }
        .myResize .right{
            width: 3px;
            height:calc(100% - 6px);
            right:0;
            cursor: e-resize;
        }
        .myResize .bottom-right{
            width: 6px;
            height:6px;
            right:0;
            bottom:0;
            cursor: se-resize;
        }
        .myResize .content{
            width: calc(100% - 3px);
            height: calc(100% - 3px);
            position: absolute;
            background: #efefef;
        }
    </style>
</head>
<body>
    <div class="myResize">
        <div class="bottom"></div>
        <div class="right"></div>
        <div class="bottom-right"></div>
        <div class="content"></div>
    </div>
    <script>
        function resize(option){
            option = option || {};
            var minWidth = parseInt(option.minWidth) || 5,//最小宽度，未设置则默认5
                minHeight = parseInt(option.minHeight) || 5,//最小高度，未设置则默认5
                el = document.querySelector(option.el),
                hasWidth,
                hasHeight;
            el.draggable = false;
            el.parentNode.draggable = false;
            switch(option.type){
                case 'bottom':hasHeight = true;break;
                case 'right':hasWidth = true;break;
                case 'bottom-right':hasWidth = true;hasHeight = true;break;
                default:return;
            }
            el.onmousedown = function (e) {
                //鼠标按下，计算当前元素距离可视区的距离
                if(hasWidth){
                    var disX = e.clientX;
                    var w = parseInt(window.getComputedStyle(el.parentNode).width);
                }
                if(hasHeight){
                    var disY = e.clientY;
                    var h = parseInt(window.getComputedStyle(el.parentNode).height);
                }
                document.onmousemove = function (e) {
                    var ew,eh;
                    //通过事件委托，计算移动的距离
                    if(hasWidth){
                        var tx = disX - e.clientX;
                        ew = w-tx;
                        el.parentNode.style.width = (ew<minWidth?minWidth:ew) + 'px';
                    }
                    if(hasHeight){
                        var ty = disY - e.clientY;
                        eh = h-ty;
                        el.parentNode.style.height = (eh<minHeight?minHeight:eh) + 'px';
                    }
                    //回调函数
                    option.callBack && option.callBack(ew?ew:eh,ew?eh:null);
                };
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        }
        function callBack(w,h){
            console.log(w,h)
        }
        ['bottom','right','bottom-right'].forEach(function(item,index){
            resize({
                el:'.'+item,
                type:item,
                callBack:callBack//回调函数
            })
        })
    </script>
</body>
</html>

vue自定义resize指令，拖拽改变父元素高度

Vue.directive('dragsize',//自定义指令
    {bind:function (el, binding, vnode) {
            el.draggable = false;
            el.onmousedown = function (e) {
                el.parentNode.draggable = false
                //鼠标按下，计算当前元素距离可视区的距离
                let disY = e.clientY;
                let h = parseInt(window.getComputedStyle(el.parentNode).height);
                document.onmousemove = function (e) {
                    //通过事件委托，计算移动的距离
                    let t = disY - e.clientY;
                    el.parentNode.style.height = ((h+t)<5?5:(h+t)) + 'px';//最小宽度，默认5
                    //回调函数
                    binding.value(h+t)
                };
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        }
    }
);

调整html元素大小 resize

猜你喜欢