时间戳

首页 > 解决方案 > Quasar Button 组件中的图标不会改变大小

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

问题描述

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

怎么了？

标签： javascriptvue.jsvuejs2iconsquasar-framework

解决方案

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关键字，更改也可以限定范围（仅在本地更改样式）。

推荐阅读