【问题标题】:Change icon in of element-ui Select更改 element-ui Select 中的图标
【发布时间】:2020-09-30 18:21:04
【问题描述】:

我们在项目中的图标字体与 element-ui 不同。是否可以将默认箭头图标更改为自定义?我在文档中找不到任何关于它的信息。如有任何建议,我将不胜感激。

我已经创建了这样的组件:

<el-select v-model="value" placeholder="Select">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

【问题讨论】:

  • 如果做一个默认的选择框和element-ui选择框,在不同的条件下渲染呢?使用v-ifv-show
  • 你想使用什么图标字体?
  • @tony19 材料设计图标

标签: vue.js element-ui


【解决方案1】:

没有选项可以通过使用 el-select 组件上可用的某些属性来覆盖图标。但是您可以使用 css 覆盖图标

.el-select .el-input .el-select__caret::before {
  content: '\e78e' // calendar icon of element-ui
}

【讨论】:

    【解决方案2】:

    您需要更改 CSS 上的图标内容。

    .el-icon-arrow-up:before { content: "\e600"; }
    .el-icon-arrow-down:before { content: "\e603"; }
    

    为:

    .el-icon-arrow-up:before { content: url(custom.svg); }
    .el-icon-arrow-down:before { content: url(custom.svg); }
    

    问候

    【讨论】:

      猜你喜欢
      • 2021-03-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-04-24
      • 2018-06-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多