Quasar Button Component中的图标不会改变大小

Question

可以调整大小的Quasar Button组件，并且从docs开始，按钮中的图标似乎应该相应地改变大小。例如，从文档中查看此图片：

当我尝试图标保持相同的大小（按钮更改）。我的代码：

    <q-btn
      v-if="$route.name === 'resetpassword'"
      class="absolute-top-right"
      flat
      round
      wait-for-ripple
      dense
      size="15px"
      color="primary"
      icon="mdi-window-close"
      @click.native="goToSignIn"
    />

怎么了？

Answer 1

1。问题

我今天遇到了同样的问题。但是，如果您将按钮大小更改为极端数字（例如200像素），您会看到图标 DID 会使用按钮更改大小。

问题是图标和按钮之间的默认填充区域太大，使图标看起来比按钮本身小。

2。解决方案

以下是我使用Deep Selectors解决问题的方法。您可以在按钮代码周围创建自定义按钮组件。然后给它以下样式：

<style scoped>
.q-btn>>>.q-icon {
  font-size: 40px;
}
</style>

并且还会在模板中为size属性指定相同的大小，因此size="40px"。然后按钮的所有方面都有相同的大小。

将Vue与第三方UI框架/组件结合使用时，Deep Selector使得快速更改组件样式变得非常容易。如果您放置scoped关键字，则更改也可以作用域（仅在本地更改样式）。