Iframe Fit to Content
根据iframe的内容调整其大小
在做邮件预览的功能时,需要将邮件的HTML内容显示出来。一开始的做法是sanitized之后直接渲染出来。但是CSS样式要尽量保留,结果就是这些样式连外面不属于邮件的部分也影响了。
于是把邮件的内容放到一个iframe里面去,隔离它的样式。而iframe一般要写死高度和宽度,这样如果邮件内容过长过宽,就会出现滚动条。理想的情况是根据iframe的内容调整其大小。
这里记录一下我是怎么做的,直接上代码:
在做邮件预览的功能时,需要将邮件的HTML内容显示出来。一开始的做法是sanitized之后直接渲染出来。但是CSS样式要尽量保留,结果就是这些样式连外面不属于邮件的部分也影响了。
于是把邮件的内容放到一个iframe里面去,隔离它的样式。而iframe一般要写死高度和宽度,这样如果邮件内容过长过宽,就会出现滚动条。理想的情况是根据iframe的内容调整其大小。
这里记录一下我是怎么做的,直接上代码:
在开发后台管理系统时,一个常见的页面布局是:上面一堆过滤搜索条件,下面一个表格显示搜索结果。
而这个表格通常要满足几点需求:
在之前的项目里,我直接用Element-UI提供的组件,开发起来比较繁琐。尤其是团队其他人参与进来,每个人实现的风格可能不大一致,后期维护起来也比较痛苦。
而且新的项目里多了这样一个需求:用户可以配置显示哪些列。也就是说列不是写死的,是动态的。原来的模式不能满足。
因此在新的项目里我对表格功能进行了封装,这样在使用表格时配置一下Column和数据来源就可以了。而且团队其他人用的风格也一致了。
下面记录一下我是如何封装的。