【问题标题】:How to style el-button that has slot 'append' attribute如何为具有插槽“附加”属性的 el 按钮设置样式
【发布时间】:2020-04-15 21:27:31
【问题描述】:

我正在使用 Nuxt 和 Element UI 构建 Web 应用程序。 现在,我正在创建如下搜索。

https://gyazo.com/644132bd6ab45714668281eed296940f

我想将按钮的背景颜色设为红色,但不知何故,样式不适用于搜索按钮。 (按钮里面有一个房间)

我该如何解决?

这是我的代码。

  • 搜索框

<template>
  <div>
    <el-input type="text">
      <el-button slot="append" style="background-color: red;">Search</el-button>
    </el-input>
  </div>
</template>

【问题讨论】:

    标签: vue.js nuxt.js element-ui


    【解决方案1】:

    元素 UI 按钮具有 el-button 类,如果您检查该元素,您可以看到。

    不建议更改附加/附加到el-input的元素的背景颜色,因为如果更改按钮的背景颜色,它会失去附加“效果”,所以它只会显示一个按钮和输入在一起。但是,如果您想这样做,尽管如此,请参阅el-button 类:

    .el-button {
        background: #f00;
    }
    

    P.S:您可能需要用任何 div 包裹该按钮,并在该 div 内引用按钮

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-03-23
      • 2011-07-08
      • 1970-01-01
      • 2010-11-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-11-22
      相关资源
      最近更新 更多