核心提示：1、使用css属性：resizep{ resize: both;}resize 属性规定是否可由用户调整元素的尺寸。取值：none：默认，用户无法调整元素的尺寸。Both：用户可调整元素的高度和宽度。...
1、使用css属性：resize
p{ resize: both;}
resize 属性规定是否可由用户调整元素的尺寸。
取值：
none：默认，用户无法调整元素的尺寸。 Both：用户可调整元素的高度和宽度。 Horizontal：用户可调整元素的宽度。 Vertical：用户可调整元素的高度。
缺点：不支持ie！仅Firefox 4+、Chrome 以及 Safari 支持 resize。
2、自己造一个轮子
使用拖拽改变元素大小。
以上图为例，父层p包裹着内容区，在父层p里还有三个p，分别位于父层p的下方，右方及右下方。拖拽下方p可改变父层p的高度，拖拽右方p可改变父层p的宽度，拖拽右下方p可改变父层p的宽度及高度。
//代码实现
<!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>
<p class="myResize">
<p class="bottom"></p>
<p class="right"></p>
<p class="bottom-right"></p>
<p class="content"></p>
</p>
<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;
};
};
}
}
);
