vue preview图片预览中的坑

vue preview图片预览中的坑

为了修改样式方便，先给vue-preview组件添加一个类pc_thumb

发现图片太大了

接下来修改样式让图片变小

后面发现样式并没有变化，经过一番检查发现是样式表scoped属性的问题，大概就是使样式私有化，避免污染全局，这也是组件的思想，互不影响，但是有时父组件需要影响子组件，这时有2种方法
1：再加一个不含scoped属性的style标签，vue组件允许多个style标签

但是尽量避免太多样式，防止污染
2：深度作用选择器，‘>>>’ 或 ’/deep/‘
在style设置为scoped的时候，样式对子组件不生效，如果想让某些样式对子组件生效，可以使用深度作用选择器
如果样式语言为less或sass, ‘>>>’ 这种方式不生效，要使用 ’/deep/‘

如果样式语言为css，可直接使用’>>>’方式

a >>> b{
        color: red;
}

成功解决样式问题。

接下来下一个问题

[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘el’ of undefined” found in VuePreview

这是我点了图片放大了之后，然后点了浏览器的刷新按钮，就报了这个错，如果正常点击vue-preview自带的关闭按钮关闭图片是不会报错的

在地址栏可以看到后面多了2个参数 &gid=1&pid=1 当我们点关闭按钮关闭之后这个参数是会消失的，这个时候刷新浏览器没有问题，不报错，那么问题肯定是因为上面的参数导致的，因为这个参数只有在图片放大之后才会存在，而刷新浏览器之后参数任然存在，但是图片已经恢复到缩略图的模式，也就是说，2者不匹配，导致的错误，

简单来说，要发现这个bug很简单，只需要在图片放大的时候点击刷新浏览器，就会报错

之后我一番百度，谷歌，就是找不到相关资料，可能是我自己的问题，有可能是bug本来存在，但是总要修复。
思路是当浏览器刷新的时候判断有没有带参数（因为我自己的所有资源请求是不带参数的），如果有，那么用location.href 进行重定向（就是改请求路径），把后面的参数去掉就不会报错了

当然这种方式有点投机取巧，可能后期不好维护。