返回 导航

其他

hangge.com

Vue.js - 修改ElementUI的input输入框组件高度的方法

作者:hangge | 2025-01-21 08:30
    在使用 Vue.jsElement UI 构建用户界面时,我们常常需要根据设计需求调整 Input 输入框的高度。本文介绍两种修改 Input 输入框的高度尺寸。

1,使用内置的尺寸样式

(1)我们知道,el-input 组件可通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 mediumsmallmini 三种尺寸。
<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)

回到顶部