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 进行重定向(就是改请求路径),把后面的参数去掉就不会报错了
当然这种方式有点投机取巧,可能后期不好维护。