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

Posted 2023-04-14

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

【英文标题】：Nativescript Button display on tap with text background color when I set :isEnabled:false on tap layout issue

【发布时间】：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：我添加了一个有问题的游乐场链接。你可以检查一下。我在模拟器和实际设备中都面临这个问题。

【参考方案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>