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）