实现原理
添加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;
}
完整代码范例
<template>
<div style="padding: 30px">
<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>