el‐input - daniel-qa/Vue GitHub Wiki
- input-style 参数动态设置样式（行高）。
如果你使用的是较新的 Element Plus 版本，可以通过 input-style 参数动态设置样式（行高）。
<template>
<el-input
v-model="inputValue"
placeholder="请输入内容"
:input-style="{ lineHeight: '2', fontSize: '16px' }"
></el-input>
</template>
<script>
export default {
data() {
return {
inputValue: "",
};
},
};
</script>
-
行高调整本质上是 CSS 的 line-height 属性，通过自定义样式或 input-style 参数实现。
-
如果调整后出现高度不对齐，可以同时调整 height 和 padding，以确保整体样式一致。
-
el-input 不直接提供行高参数，但开放了样式覆盖的灵活性。
el-input__inner 是一个内部类名，默认由 Element Plus 定义。通过自定义 CSS，可以覆盖其默认样式：
- 示例：调整行高
<template>
<el-input
v-model="inputValue"
placeholder="请输入内容"
class="custom-input"
></el-input>
</template>
<style>
.custom-input .el-input__inner {
line-height: 2; /* 设置行高为2 */
}
</style>
<script setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>