Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛图标设置悬浮显示, 在选中单元格后,再悬浮上去,图标不显示 #2929

Open
1 of 5 tasks
misswangkang opened this issue Oct 18, 2024 · 4 comments
Open
1 of 5 tasks
Assignees
Labels
⚡ enhancement 功能增强

Comments

@misswangkang
Copy link

🏷 Version

Package Version
@antv/s2 1.54.4
@antv/s2-react
@antv/s2-vue

Sheet Type

  • PivotSheet
  • TableSheet
  • GridAnalysisSheet
  • StrategySheet
  • EditableSheet

🖋 Description

headerActionIcons 设置 defaultHide =true ,如果点击单元格选中后,再悬浮到单元格上,图标不显示

⌨️ Code Snapshots

官网案例,修改了defaultHide =true

import { PivotSheet, S2Options } from '@antv/s2';
import '@antv/s2/dist/style.min.css';

fetch(
'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
)
.then((res) => res.json())
.then(async (dataCfg) => {
const container = document.getElementById('container');

const s2Options: S2Options = {
  width: 600,
  height: 480,
  customSVGIcons: [
    {
      name: 'Filter',
      src: 'https://gw.alipayobjects.com/zos/antfincdn/gu1Fsz3fw0/filter%26sort_filter.svg',
    },
  ],
  showDefaultHeaderActionIcon: false,
  headerActionIcons: [
    {
      icons: ['Filter'],
      belongsCell: 'colCell',
      defaultHide: true,
     
      onClick: (options) => {
       
      },
    },
  
  ],
  style: {
    colCell: {
      hideValue: true,
    },
  },
};

const s2 = new PivotSheet(container, dataCfg, s2Options);

await s2.render();

});

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment Info
System
Browser
@misswangkang
Copy link
Author

图标如果被点击过,重新悬浮也不显示

@lijinke666 lijinke666 self-assigned this Oct 23, 2024
@lijinke666 lijinke666 added the ⚡ enhancement 功能增强 label Oct 23, 2024
Copy link
Contributor

你好 @misswangkang,感谢你的建议, 我们会及时评估和排期, 谢谢!
当然, 如果能贡献 PR 帮助我们改进, 不胜感激!

Hello, @misswangkang, thanks for your advice. We will evaluate and schedule in time. Thank you!
you could implement it by yourself through the customization capabilities provided by S2. Thanks so much for your understanding.

@lijinke666
Copy link
Member

如果点击单元格选中后,再悬浮到单元格上,图标不显示

变为单元格选中状态后, 默认会屏蔽表格的 hover 事件, 防止和其他交互冲突, 所以这个时候你再 hover, 由于单元格 hover 未被响应, 所以对应的 icon 也不会展示

图标如果被点击过,重新悬浮也不显示

和上面同理, 不过这里需要优化, 对于自定义的 icon 点击不应该屏蔽 hover

对于第二点的一个临时解决方案:

  onClick: (options) => {
    // 点击的时候取消屏蔽
    options.meta.spreadsheet.interaction.removeIntercepts(['hover']);
  },

@misswangkang
Copy link
Author

第一点有临时解决方案吗,这种效果用户无法接受 @lijinke666

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
⚡ enhancement 功能增强
Projects
None yet
Development

No branches or pull requests

2 participants