1

Quasar Button 组件的大小可以调整，从文档看来，按钮中的图标应该相应地改变大小。例如，从文档中查看这张图片： 在此处输入图像描述

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

    <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"
    />

怎么了？

4

2 回答 2

3

1.问题

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

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

2. 解决方案

这是我使用Deep Selectors解决它的方法。您围绕您的按钮代码制作了一个自定义按钮组件。然后给它以下样式：

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

并且还给模板中的 size 属性赋予相同的大小，所以size="40px". 然后按钮的所有方面都具有相同的大小。

将 Vue 与 3rd 方 UI 框架/组件一起使用时，Deep Selector可以非常轻松地快速更改组件样式。如果您放置scoped关键字，更改也可以限定范围（仅在本地更改样式）。

于 2018-05-12T16:33:40.143 回答
0

我用过Quasar v2.0.4。使用Quasar v2.0.4，您可以使用 更改图标（或按钮）的大小size attribute。

例如：

<q-btn size="xl" icon="close" />

<q-btn size="100px" icon="close" />

但是，如果您使用size attributewith fabor fab-mini attribute，size attribute则不起作用，那么，只有faborfab-mini attribute可以代替size attribute.

例如：

<q-btn size="xl" fab icon="close" />
    
<q-btn size="100px" fab-mini icon="close" />
于 2021-08-19T05:32:10.373 回答