前言
宝贝第一次做美食，脆脆哒~
目前存在的问题？
页面中“SVG加载不出来"
下面我们分析为什么会存在该问题。
为什么会出现此问题？
有一个需求，有一个弹框A是用v-show，按钮A点击来决定弹框A是否显示，系统一进入就要模拟点击弹框A里面的列表A，这个列表A点击会出现一个svg，而模拟点击列表A，svg并不会加载出来。
即：模拟点击左侧菜单树（列表A），显示右侧概化图（SVG）
结果：并不会加载出来。
PS：右侧概化图则是SVG画出来的。
对此进行分析：
因为弹框A作为外层容器，这个时候弹框A还没有显示，你模拟点击列表A，svg是不能计算比例的（因为v-show的原因，你可以获取到列表A元素）
解决方案
既然一定要让外层容器弹框A显示，svg才可以计算比例。那我就不进入系统的时候马上模拟点击，而是在点击按钮A的时候，先让弹框A显示后，再模拟点击列表A。（最后的效果其实都是点击弹框A能马上看到svg，在哪里执行效果都是一样的）
代码如下
// custom-tree-node就是列表A，被点击
showPopup(data) {
this.show = true // 让弹框A显示
// 首加载珠江片下的第一个流域的概化图（模拟点击）
document.querySelectorAll('.custom-tree-node')[1].click()
}
SVG的优势
-
SVG 图像可通过文本编辑器来创建和修改；
-
SVG 图像可被搜索、索引、脚本化或压缩；
-
SVG 是可伸缩的；
-
SVG 图像可在任何的分辨率下被高质量地打印；
-
SVG 可在图像质量不下降的情况下被放大。（important）
知识点
SVG、 click()、v-show、执行顺序、模拟点击
以往推荐
vue-typescript-admin-template后台管理系统
