element文本域禁止手动拉伸、两种方式、textarea

文章目录

  • style方式
  • element自带的禁止拉伸方法
  • 建议


style方式

html

<el-input
	v-model="content"
	:rows="3"
	class="r_n"
	type="textarea"
	maxlength="40"
	placeholder=""
	style="height: 100%;"
/>

css

style标签定义lang="scss" scoped

::v-deep .r_n {
    .el-textarea__inner {
        resize: none;
    }
}

element自带的禁止拉伸方法

none: 紧致拉伸
both: 两者(纵向横向都可以拉伸)
horizontal: 水平的(横向拉伸)
vertica: 垂直(纵向拉伸)

<el-input
	v-model="content"
	:rows="3"
	resize="none"
	type="textarea"
	maxlength="40"
	placeholder=""
	style="height: 100%;"
/>

建议

建议使用样式实现禁止拉伸,当文本域处于禁止输入状态时,使用element自带的禁止拉伸方式会影响resize的显示。resize在文本域禁止输入状态使用自带的禁止拉伸功能只显示一行,而样式禁止拉伸则能按照resize设置的值显示。

你可能感兴趣的:(web前端,HTML,CSS,前端,web,elementui,html)