image: fix keyboard events handling logic

[Mookiepiece]

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow Element's contributing guide (中文 | English | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer relative issues for you PR.

close #18393

1. main.vue line 221, manipulating document.body.style directly is not good, and events may propagate to a parent which are not body element, and still cause scrolling, so I use e.stopPropagation() on key events to stop scrolling instead of Image: Fix shield the page when preview big image (#16796) #16997.

2. image-viewer.vue line 295:

mounted() {	
  this.deviceSupportInstall();	
  this.$refs['el-image-viewer__wrapper'].focus();	
}

the mounted function only called once, cause reopen the image-viewer, all keyboard events and mouse scale events are not allowed. so add an prop 'visible' to solve this case.

[element-bot]

Deploy preview for element ready!

Built with commit a5fb703

https://deploy-preview-18416--element.netlify.com

[Mookiepiece]

@luckyCao

[DevBrent]

@luckyCao This resolves #18234

@Mookiepiece Thank you for not only finding this but correcting the original issue while rectifying such a major regression!

[luckyCao]

#19075

[luckyCao]

@Mookiepiece this pr can't prevent body scroll

[Mookiepiece]

@luckyCao oh sorry, I should use preventDeafult instead

[Mookiepiece]

whatever, welcome back~❤

[Mookiepiece]

already fixed by others. 2.13.1