javascript - Quasar 按钮组件中的图标不会改变大小

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 与第 3 方 UI 框架/组件一起使用时，Deep Selector 可以非常轻松地快速更改组件样式。如果您放置 scoped 关键字，更改也可以限定范围(仅在本地更改样式)。