Vue.use(VueCropper)
开始使用。当我从0开始百度vue-cropper的相关文章的时候发现个问题,就是他们的代码总是会缺个函数或者自己写了个接口文件导致我在百度看了几个小时连个demo都弄不出来,无奈之下只好去官网github里面的在线例子里拿demo,这里我这边就不介绍vue-cropper的基本介绍什么的了,有兴趣的朋友可以去github上测试demo和查看基本文档。
开始探坑:
当我把demo放在本地的时候发现裁剪框样式丢失,找了很长时间问题原因,只能归结于element-admin底层代码样式和vue-cropper的css代码冲突了。
上面是官网的正常显示
下面是我的BUG显示,查看了下元素,发现这几个span样式加不上
const spanNode = document.getElementsByClassName("line-w")[0].parentNode.classList.add("spanstr");
我用原生js的方法给父元素加上class
.spanstr {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
z-index: -200;
当当当当,样式出来了,但是又个小问题,官网上这个父级span是没有宽高的,我给它加上宽高后这个截图框不能移动了,解决办法改变层级z-index 把层级调低,就不影响截图框移动了。