# 支持一键放大组件

# 背景

由于页面结构的一些限制，某些表格、树会挤在较小的空间里，导致操作不方便。

所以这里通过点击按钮，弹窗放大该组件的方式，解决这类问题。

目前只支持ext组件放大。

使用很简单，调用useZoomInComponent，传入弹窗标题、宽高以及需要放大的组件即可。

const { getZoomInIcon } = useZoomInComponent({
	title : 'xxx',
	width : 850,
    height: 580,
    extComponent: this,
});

然后在需要添加放大按钮的工具栏中，使用返回的getZoomInIcon去生成按钮，按钮已集成了放大的逻辑。

tools:[
    getZoomInIcon()
],

通过以上几行代码即可实现完整放大功能，且无需关心数据同步的问题。

实现上，没有通过重新初始化去创建新组件，而是通过重新渲染的方式，只改变渲染位置，不改变数据，达到数据同步的效果。

通过查看ext源码，重新render需要现将rendered置为false

然后调用vue的弹窗，在弹窗容器mounted时，将ext组件render到该容器

在弹窗关闭时，将ext组件再render回之前记录下的原始容器中

表格组件在render后会监听点击、双击等事件，多次渲染就会被多次监听

所以在放大前，将该组件的mon函数置为空函数，渲染后再改回为原函数

行编辑组件，由于做了单例化，所以渲染时也许手动将其的rendered置为false

勾选框同样在渲染时会重复监听事件，我们采用同样的策略，将其的init函数置为空函数，放大后再还原

通过以上封装，几行代码即可实现指定组件的放大，且无需关心数据同步问题。