css 拉伸 resize —— 实现可拉伸的div（含限制拉伸的尺寸）

实现原理

添加resize 属性即可实现：

• ​​none​​​：初始值，表示没有拉伸效果，常用来重置​​<textarea>​​元素内置的拉伸行为，代码如下：

textarea {
    resize: none;
}

• ​​both​​：既可以水平方向拉伸，也可以垂直方向拉伸。
• ​​horizontal​​：仅可以水平方向拉伸，此时鼠标的指针也会变成水平方向的拉伸样式。
• ​​vertical​​：仅可以垂直方向拉伸，此时鼠标的指针也会变成垂直方向的拉伸样式。
• ​​block​​​：后期新增的属性值，目前现代浏览器都提供支持。其表示沿着块级元素的排列方向拉伸，默认是垂直方向，也可能是水平方向，这取决于​​writing-mode​​的值。
• ​​inline​​​：和​​block​​​属性值类似，只是​​inline​​​表示内联元素的排列方向。默认是水平方向，如果使用​​writing-mode​​​属性改成垂直排版，则​​inline​​的拉伸方向就会变成垂直方向。

resize 生效的条件

• 不支持内联元素。
• 如果是块级元素，需要​​overflow​​​属性的计算值不是​​visible​​。

即div需要同时设置​​overflow​​属性才能拉伸，例如：

div {
    overflow: hidden;
    resize: both;
}

通过设置min-width、min-height、max-width和max-height可以限制拉伸尺寸。

完整代码范例

<template>
  <div style="padding:">
    <div class="box"></div>
  </div>
</template>

<style scoped>.box {
  overflow: hidden;
  resize: both;
  border: 1px solid red;
  width: 300px;
  height: 100px;
  min-width: 200px;
  max-width: 600px;
}</style>