[t-button] button loading问题

[Axiano]

tdesign-miniprogram 版本

1.1.14

重现链接

确认

重现步骤

如果给button 添加一个 border-radius样式，并且处于loading状态，最后通过真机调试，是因为loading动画导致的

期望结果

给了border-radius 并且处于loading状态，不要边框

实际结果

给了border-radius 并且处于loading状态，有边框

基础库版本

2.32.3

补充说明

No response

[github-actions]

👋 @Axiano，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[anlyyao]

@Axiano 你是用什么方式修改的 border-radius 呢？ 辛苦提供一下完整的可复现代码～ (我这边初步用 --td-button-border-radius 方式修改，未见异常)

[Axiano]

直接 行内样式，抱歉没想到去用 --td-button-border-radius 修改

<t-button style="border-radius: 20px;" loading="{{true}}">确认</t-button>

[Axiano]

@anlyyao 但是这个可以去单独修改这个border-radius 的样式吗，如果使用 page { --td-button-border-radius: 12px; } 会全局的按钮样式都会改变

[anlyyao]

@anlyyao 但是这个可以去单独修改这个border-radius 的样式吗，如果使用 page { --td-button-border-radius: 12px; } 会全局的按钮样式都会改变

--td-button-border-radius 的影响范围取决于你所放位置的影响范围

• 仅修改 class 包含 test类名 的button

<t-button class="test" loading="{{true}}">确认</t-button>

.test {
  --td-button-border-radius: 16px;
}

[Axiano]

@anlyyao 太感谢了🥰

[anlyyao]

直接 行内样式，抱歉没想到去用 --td-button-border-radius 修改

<t-button style="border-radius: 20px;" loading="{{true}}">确认</t-button>

有点奇怪，我这边尝试用你的代码复现，但是结果和你的截图表现并不一致。代码片段：https://developers.weixin.qq.com/s/ksaRrim47fKg， 效果如下：

上方也非预期效果，原因是button的border是伪元素实现的，要用t-class的话，需要在额外加上 ::after{border-radius: calc(@border-radius * 2)}，效果如截图下半部分所示。（推荐使用css variable）

<t-button t-class="test" theme="primary" size="large" loading="{{true}}">填充按钮</t-button>

.test {
	border-radius: 16px !important;
}

.test::after {
	border-radius: 32px !important;
}

[Axiano]

我这个问题是 实机发现的，模拟器无法复现

[Axiano]

我这个问题是 实机发现的，模拟器无法复现

@anlyyao