返回 导航

其他

hangge.com

Vue.js - 修改ElementUI的select选择器组件高度的方法

作者:hangge | 2025-01-22 08:38
    我在之前文章中介绍了如何调整 Element UIInput 输入框的高度(点击查看)。本文介绍如何修改 Select 下拉选择框的高度尺寸。

1,使用内置的尺寸样式

(1)我们知道,el-select 组件可通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 mediumsmallmini 三种尺寸。
<el-select size="medium">
  <el-option label="1秒" value="1000"></el-option>
  <el-option label="2秒" value="2000"></el-option>
  <el-option label="3秒" value="3000"></el-option>
</el-select>

(2)各尺寸的对比如下:

2,通过覆盖样式调整高度

(1)如果需要对高度进行精确的设置,就需要使用深度选择器覆盖 Element UI 的默认样式。具体方法同之前修改 input 组件的高度类似,不过特别要注意右侧的箭头图标也要设置居中样式,否则会出现偏移现象。具体代码如下:
<template>
  <div>
    <el-select class="my-select">
      <el-option label="1秒" value="1000"></el-option>
      <el-option label="2秒" value="2000"></el-option>
      <el-option label="3秒" value="3000"></el-option>
    </el-select>
  </div>
</template>
<style scoped>
  /* selecte 框的高度设置*/
  /deep/ .my-select .el-input__inner {
    height: 20px;
  }

  /* 设置右侧箭头按钮位置 */
  /deep/ .my-select .el-input__suffix {
    top: calc(50% - 8px);
  }

  /deep/ .my-select .el-input__icon {
    line-height: inherit;
  }

  /deep/ .my-select .el-input__suffix-inner {
    display: inline-block;
  }
</style>

(2)运行效果如下:
评论

全部评论(0)

回到顶部