Vue.js Vuetify v-btn组件与nuxt属性不同

如果v-btn（vuetify）组件具有“nuxt”属性（在nuxt.js框架中用作默认值），则其显示方式会有所不同

如何修复它

第一个图像是不带“nuxt”（正常显示）的v-btn组件，第二个图像具有该属性

接受并进入

接受并进入

添加

numxt

和

to

属性时，元素将从

更改为

不幸的是，将这两个代码示例添加到一个新项目中并没有显示出您的视觉差异。

有一个附加类

v-btn--router

，但它不会导致宽度差异或文本对齐问题

您可以通过检查控制台中的每个元素、查看样式窗格并检查Vuetify以外的任何样式源（在RHS上）来进行一些调试，Vuetify是

VBtn.sass

&

VApp.sass

由于宽度是问题属性之一，因此在“计算”选项卡中检查

width

值时也值得一试。

---

如果它是由某个对象直接设置的，您可以单击“打开”以查看其值的来源（例如，高度由类

设置为44px。v-btn:not（.v-btn--round）。v-size--large

在文件

VBtn.sass

中）。是否在nuxt项目中使用另一个CSS库？是的，bootstrap-vue.so，vuetify css和bootstrap CSW之间存在冲突您有什么迹象表明可能会出现这种情况？请尝试使用一个库，因为这会扰乱您的项目，并会给您带来多个问题，如显示不足

<v-btn
    class="enter-btn"
    large
    color="error"
    :disabled="!agreed"
>
    Accept and Enter
</v-btn>

<v-btn
    class="enter-btn"
    large
    color="error"
    :disabled="!agreed"
    nuxt
    to="/to/url"
>
    Accept and Enter
</v-btn>