当我在点击布局问题上设置 :isEnabled:false 时，Nativescript 按钮在点击时显示文本背景颜色

Question

最初如果设置 isEnabled="false" 那么按钮布局没有问题。按钮在没有标签背景的情况下正确显示。但是当我在按钮 tap 上设置 isEnabled=true 或 isEnabled=false 时，按钮显示如下图，标签背景色。我该如何解决这个问题？

初始视图

点击后查看

HTML

<Button @tap="googlelogin()" class="btn btn-primary" :isEnabled="!processing">
    <formattedString>
        <Span class="fa btn-icon" :text="'fa-google' | fonticon" />
        <Span class="btn-text" text="    using Google" />
    </formattedString>
</Button>

CSS

.btn-primary {
    padding: 20;
    margin: 0;
    text-align: left;
    text-transform: capitalize;
    vertical-align: center;
    width: 97%;
}

JS方法

googlelogin() {
    this.processing = true;
}

游乐场

游乐场Click here

Answer 1

我查看了您的 playground，看起来 span 中的 formattedstring 具有透明背景，问题仍然存在，以便他们继承父级样式。

但根据建议here，现在您也可以设置跨度的样式。因此，在您的情况下，您需要在禁用按钮时设置跨度的样式。

我已经更新了游乐场here。

<Button @tap="googlelogin()" class="btn btn-primary" :isEnabled="!processing"> <formattedString> <Span v-bind:class=" { disabled: processing }" :text="'fa-google' | fonticon" /> <Span v-bind:class=" { disabled: processing }" class="btn-text" text=" using Google" /> </formattedString> </Button>

当我在点击布局问题上设置 :isEnabled:false 时，Nativescript 按钮在点击时显示文本背景颜色

Nativescript Button display on tap with text background color when I set :isEnabled:false on tap layout issue

android

nativescript

nativescript-vue