ant-design-vue icon indicating copy to clipboard operation
ant-design-vue copied to clipboard

InputGroup中使用 tooltip 包裹的 button[disabled] 样式不正确

Open ydq opened this issue 1 year ago • 3 comments
trafficstars

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.0.7

Environment

MacOS14.2 Chrome 120 / safari vue3

Steps to reproduce

如下结构:

<a-input-group compact>

    <a-tooltip placement="bottom" title="输入消费组后回车或点击获取Offset按钮">
        <a-input disabled/> <!-- 这个 disable 渲染也正常 -->
    </a-tooltip>

    <a-button disabled>这个按钮渲染正常</a-button>

    <a-tooltip placement="bottom" title="移除disabled恢复正常,有disabled边角样式错误">
        <a-button disabled>被包裹的按钮</a-button>
    </a-tooltip>

    <a-button disabled>这个按钮渲染正常</a-button>
</a-input-group>

bug

What is expected?

在中间的按钮应该都是直角 在边侧的按钮靠近其他元素的一边应该为直角

What is actually happening?

被 tooltip 包裹的 button[disabled] 出现了圆角

ydq avatar Dec 14 '23 06:12 ydq

应该是受到透传的样式影响,最直接的解法就是button上style给一个border-radius: 0

selicens avatar Dec 14 '23 10:12 selicens

应该是受到透传的样式影响,最直接的解法就是button上style给一个border-radius: 0

我临时解决方案 是直接改了下结构,将 tooltips 包裹在 button 里面去了,这样做唯一的影响是鼠标必需浮在文字上才会触发 tooltip

ydq avatar Dec 15 '23 01:12 ydq

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

github-actions[bot] avatar Feb 13 '24 02:02 github-actions[bot]