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

【问题标题】：Nativescript Button display on tap with text background color when I set :isEnabled:false on tap layout issue当我在点击布局问题上设置：isEnabled:false 时，Nativescript 按钮在点击时显示文本背景颜色
【发布时间】：2019-06-18 22:43:22
【问题描述】：

如果最初设置为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

【问题讨论】：

您可以创建游乐场吗？否则看起来还可以，你在哪个平台测试这个？
@NarendraMongiya：我添加了一个有问题的游乐场链接。你可以检查一下。我在模拟器和实际设备中都面临这个问题。

标签： android nativescript nativescript-vue

【解决方案1】：

我查看了你的 Playground，它看起来像格式化字符串中的 span 具有透明背景，并且仍然存在让他们继承父样式的问题。

但是根据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>

【讨论】：