Vue.js - 修改ElementUI的input输入框组件高度的方法
作者:hangge | 2025-01-21 08:30
在使用 Vue.js 和 Element UI 构建用户界面时,我们常常需要根据设计需求调整 Input 输入框的高度。本文介绍两种修改 Input 输入框的高度尺寸。
1,使用内置的尺寸样式
(1)我们知道,el-input 组件可通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 medium、small 和 mini 三种尺寸。
<el-input size="medium" v-model="input2"> </el-input>
(2)各尺寸的对比如下:

2,通过覆盖样式调整高度
(1)如果需要对高度进行精确的设置,就需要使用深度选择器覆盖 Element UI 的默认样式,具体代码如下:
<template> <div> <el-input class="my-input" width="100" v-model="input1"> </el-input> </div> </template> <script> export default { data() { return { input1: '自定义高度' } } } </script> <style scoped> /deep/ .my-input .el-input__inner { height: 20px; } </style>
(2)运行效果如下:

全部评论(0)