在使用vue-cropper工具過程當(dāng)中遇到這樣一個(gè)問題，開發(fā)環(huán)境啟動(dòng)運(yùn)行之后，截圖功能可以正常使用，但是重新打包部署至服務(wù)器以后，報(bào)錯(cuò)：cropper未定義。
TypeError: Cannot read properties of undefined (reading 'cropper')
? ? at C (StepUpdate.9f3efc2b.js:1:29993)
? ? at gr (@vue.1c4bc3aa.js:1:47798)
? ? at vr (@vue.1c4bc3aa.js:1:47876)
? ? at HTMLDivElement.n (@vue.1c4bc3aa.js:1:53453)
看到這個(gè)報(bào)錯(cuò)一開始的想法是 在代碼
<vueCropper?
ref="cropper"
></vueCropper>這塊的cropper未定義，所以去定義并給他賦值
const cropper = ref({})
cropper.value = currentInstance.value.ctx.$refs.cropper然并卵。
之后想著在前端界面打個(gè)斷點(diǎn)看看，結(jié)果就發(fā)現(xiàn)以下情況
結(jié)論：
報(bào)錯(cuò)原因并非因?yàn)樯鲜?原因，歸根結(jié)底是在Vue3中不能使用this后，我們使用了單獨(dú)的一個(gè)變量通過getCurrentInstance()方法返回當(dāng)前實(shí)例的對象，這會(huì)導(dǎo)致在開發(fā)環(huán)境執(zhí)行的時(shí)候，使用
currentInstance.value.ctx.$refs.cropper.stopCrop();可以正常執(zhí)行，但是到了部署的環(huán)境，是未定義。使用以下方法去完成截圖功能文章來源：http://www.zghlxwxcb.cn/news/detail-403347.html
//開始裁剪
currentInstance.value.refs.cropper.startCrop();
//停止裁剪
currentInstance.value.refs.cropper.stopCrop();所以關(guān)于Vue-cropper中提供的方法，都不能使用原先的那種格式，均需要使用文章來源地址http://www.zghlxwxcb.cn/news/detail-403347.html
currentInstance.value.refs.cropper 替換 this.$refs.cropper
到了這里，關(guān)于Vue3.0使用vue-cropper遇到的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
