Vue ElementUI中如何自定义输入框选择器样式并添加图标？-css教程-PHP中文网

Vue ElementUI中如何自定义输入框选择器样式并添加图标？

花韻仙語

发布： 2025-02-21 08:54:01

原创

566人浏览过

vue elementui中如何自定义输入框选择器样式并添加图标？

本文介绍如何自定义Vue框架中基于Element UI库的输入框选择器样式，并添加图标。原始选择器位置靠左且无法调整，本文将指导您如何使其在选择器处显示图标并允许下拉展开列表。

为了达到类似下图所示的效果，我们需要对<el-select></el-select>和<el-option></el-option>组件进行样式调整。

首先，使用slot="prepend"将选择器元素放置在输入框前面：

<code class="html"><el-select slot="prepend" v-model="select"></el-select></code>

登录后复制

接下来，调整<el-option></el-option>组件的样式，使其能够容纳图标并控制高度：

立即学习“前端免费学习笔记（深入）”；

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

<code class="html"><el-option :style="{ display: 'inline-block', height: '70px' }" value="1">
  <slot>
    @@##@@
  </slot>
</el-option></code>

登录后复制

我们使用:style属性设置选项的高度和显示方式为块级元素(inline-block)，确保图标能够占据整个高度。图标则放置在<el-option></el-option>组件的<slot></slot>内。

完整的代码示例如下：

<code class="html"><el-input :style="{ height: '100%' }" class="input-with-select" placeholder="请输入内容" v-model="input3">
  <el-select slot="prepend" v-model="select">
    <el-option :style="{ display: 'inline-block', height: '70px' }" value="1">
      <slot>
        @@##@@
      </slot>
    </el-option>
    <el-option :style="{ display: 'inline-block', height: '70px' }" value="2">
      <slot>
        @@##@@
      </slot>
    </el-option>
    <el-option :style="{ display: 'inline-block', height: '70px' }" value="3">
      <slot>
        @@##@@
      </slot>
    </el-option>
  </el-select>
</el-input></code>

登录后复制

通过以上步骤，您可以成功地自定义Element UI输入框选择器的样式，并在选择器中添加图标，从而提升用户体验。请确保替换../assets/baidu.png、../assets/google.png和../assets/juejin.png为您的实际图标路径。