feat(Image): Update preview toolbar

[selicens]

#7068

[wsxe9988]

@selicens 好久没动静，没人review和merge

[selicens]

@selicens 好久没动静，没人review和merge

可能唐老师最近在忙其他的吧，除了button的那个pr比较紧急，其他的pr都还好不是太有关紧要

[wsxe9988]

@selicens 好久没动静，没人review和merge

可能唐老师最近在忙其他的吧，除了button的那个pr比较紧急，其他的pr都还好不是太有关紧要

积累了不少pr了，一个月多没动静了。给人有一种会不会不维护了的错觉。落后ant-design5.x最新的越来越多了。可以问下唐老师，啥时候review

[github-actions]

This PR 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

[fabienmoyon]

Hello,
I'm very interesting to have this feature.

Can we merge it ? What is the problem ?

Regards,
Fabien

[wsxe9988]

@selicens 这个其实可以考虑下次发版合并进去哦

[Deuscx]

可以将image 也加到 toolbarRender的参数中吗？因为image-preview-group在下载图片的时候也需要

[selicens]

可以将image 也加到 toolbarRender的参数中吗？因为image-preview-group在下载图片的时候也需要

我看下，感觉插槽应该能满足不用单独添加

[Limoer96]

还是没有动静吗？非常需要自定义Toolbar

[selicens]

还是没有动静吗？非常需要自定义Toolbar

可以先通过打补丁的形式来使用

[Roywhite]

如何打补丁呢，按照教程打的补丁pnpm i时报错 ERR_PNPM_INVALID_PATCH： hunk header integrity check failed

[Roywhite]

已解决

[zhangchenna]

什么时候合并呢，已经半年了

[Roywhite]

预览界面和antd相比，滚轮放大有点不一样。antd会放大鼠标所在位置，目前pr是放大图片中心区域

[github-actions]

This PR 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

[M69W]

这里有计划合并吗？

[selicens]

这里有计划合并吗？

可以自行patch

[karachungen]

@selicens can you please share example how we can patch vue-ant-desig ourselves?

[M69W]

这里有计划合并吗？

可以自行patch

目前的显示是右上角，从设计的出发点，无论是鼠标还是平板，都是比较友好的。
底部显示，只是显示的平衡的一种妥协。
如果能提供一个插槽，允许用户根据自行设计，例如 居左、居右、头部、底部居中。

[qlypupil]

在feat-image-preview-toolbar分支，compile 一直报ts错，能把compile之后的image组件发一下吗

[Roywhite]

在feat-image-preview-toolbar分支，compile 一直报ts错，能把compile之后的image组件发一下吗

什么版本的，我仓库里合了一版4.2.3，没报错

[qlypupil]

在feat-image-preview-toolbar分支，compile 一直报ts错，能把compile之后的image组件发一下吗

什么版本的，我仓库里合了一版4.2.3，没报错

感谢回复，我使用最新的4.2.6没报错了，但是patch的话要替换掉哪些文件呢，只需要Image组件就可以吗

[Roywhite]

在feat-image-preview-toolbar分支，compile 一直报ts错，能把compile之后的image组件发一下吗

什么版本的，我仓库里合了一版4.2.3，没报错

感谢回复，我使用最新的4.2.6没报错了，但是patch的话要替换掉哪些文件呢，只需要Image组件就可以吗

我是原项目里使用pnpm patch ant-design-vue@4.2.6，会生成一个文件夹，

然后你把你自己合的antdv项目打包（npm run pub），执行到最后会提示登录（关掉即可）

然后把这几个文件直接覆盖到上面生成的文件夹里，然后在原项目控制台执行pnpn patch-commit文件夹即可

[qlypupil]

在feat-image-preview-toolbar分支，compile 一直报ts错，能把compile之后的image组件发一下吗

什么版本的，我仓库里合了一版4.2.3，没报错

感谢回复，我使用最新的4.2.6没报错了，但是patch的话要替换掉哪些文件呢，只需要Image组件就可以吗

我是原项目里使用pnpm patch ant-design-vue@4.2.6，会生成一个文件夹，

然后你把你自己合的antdv项目打包（npm run pub），执行到最后会提示登录（关掉即可） 然后把这几个文件直接覆盖到上面生成的文件夹里，然后在原项目控制台执行pnpn patch-commit文件夹即可

好的，非常感谢，我去试试

[qlypupil]

#自定义工具栏在a-modal中使用时，会有层级的错误。

[qlypupil]

#自定义工具栏在a-modal中使用时，会有层级的错误。

所有操作按钮都在预览弹窗层级下面，不管是selicens:feat-image-preview-toolbar的4.1.1版本还是运行到最新的4.2.6版本，都有同样的问题

[Roywhite]

#自定义工具栏在a-modal中使用时，会有层级的错误。

可以试试从css控制toolbar-wrapper样式

[qlypupil]

#自定义工具栏在a-modal中使用时，会有层级的错误。

可以试试从css控制toolbar-wrapper样式

应该是因为 自定义的工具栏 和 Image 在渲染一个组件中，采用的是 position:fixed，通过z-index控制层级。但是在 a-modal中，工具栏在a-modal中，a-modal本身就是 fixed，有 z-index。在点击预览之后，相当于新增了一个modal，也是fixed，层级必然高于a-model。所以，感觉基于目前自定义工具栏的渲染位置，在a-modal中使用好像无解。

[qlypupil]

#自定义工具栏在a-modal中使用时，会有层级的错误。

可以试试从css控制toolbar-wrapper样式

应该是因为 自定义的工具栏 和 Image 在渲染一个组件中，采用的是 position:fixed，通过z-index控制层级。但是在 a-modal中，工具栏在a-modal中，a-modal本身就是 fixed，有 z-index。在点击预览之后，相当于新增了一个modal，也是fixed，层级必然高于a-model。所以，感觉基于目前自定义工具栏的渲染位置，在a-modal中使用好像无解。

[Roywhite]

#自定义工具栏在a-modal中使用时，会有层级的错误。

可以试试从css控制toolbar-wrapper样式

应该是因为 自定义的工具栏 和 Image 在渲染一个组件中，采用的是 position:fixed，通过z-index控制层级。但是在 a-modal中，工具栏在a-modal中，a-modal本身就是 fixed，有 z-index。在点击预览之后，相当于新增了一个modal，也是fixed，层级必然高于a-model。所以，感觉基于目前自定义工具栏的渲染位置，在a-modal中使用好像无解。

合了最新的版本，然后给图片预览加了基于鼠标位置的缩放：selicens#2

[Roywhite]

预览界面和antd相比，滚轮放大有点不一样。antd会放大鼠标所在位置，目前pr是放大图片中心区域

selicens#2

[github-actions]

This PR 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