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

feat(ImagePreview): add close-on-click-image prop #12566

Merged
merged 1 commit into from Jan 13, 2024

Conversation

inottn
Copy link
Collaborator

@inottn inottn commented Jan 13, 2024

resolve #12448

When the elements in the slot have their own click interaction logic, such as video elements, the click should not close the preview.

@codecov-commenter
Copy link

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (e6dd92e) 89.91% compared to head (6d3d042) 89.92%.

Additional details and impacted files
@@           Coverage Diff           @@
##             main   #12566   +/-   ##
=======================================
  Coverage   89.91%   89.92%           
=======================================
  Files         257      257           
  Lines        6823     6827    +4     
  Branches     1654     1655    +1     
=======================================
+ Hits         6135     6139    +4     
  Misses        365      365           
  Partials      323      323           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@@ -251,8 +252,12 @@ export default defineComponent({
};

const checkClose = (event: TouchEvent) => {
const isClickOverlay = event.target === swipeItem.value?.$el;
const swipeItemEl: HTMLElement = swipeItem.value?.$el;
const imageEl = swipeItemEl.firstElementChild;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When using slots, it's also possible that the image element is not the first element, should we consider that case

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fortunately, the parent element of the image slot is always fixed, so we don't have to consider this situation.

<div class={bem('image-wrap')}>
  {slots.image({ src: props.src })}
</div>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice 😄

@chenjiahan chenjiahan merged commit 5603aa2 into youzan:main Jan 13, 2024
4 checks passed
@simon-woo
Copy link

看文档是v4.83发布,看最新版本只到了v4.82,v4.83预计什么时候发布呀?急需要此属性~~~谢谢谢谢 @chenjiahan

@chenjiahan
Copy link
Member

今天或明天发布哈

CatsAndMice pushed a commit to CatsAndMice/vant that referenced this pull request Apr 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report] showImagePreview 点击视频自动退出
4 participants