1. 现象:
子组件中有一个 <vue-cropper> 图像裁剪插件:
<vue-cropper autoCrop :img="avatarSrc" ref="cropper" centerBox/>
通过变量avatarSrc来决定它的img属性,第一次加载的时候是OK的,每当avatarSrc改变的时候,图片都会更新。但是,当关闭这个dialog第二次加载后,更新就失灵了,不管你怎样改变avatarSrc的值,图片都不会变。
2. 解决:
方法1:
问题出在每次当我们隐藏这个dialog的时候,就真的只是隐藏,而不是销毁。elment UI的说明文档里有一个【destroy-on-close : 关闭时销毁 Dialog 中的元素】类似的属性,但是试了半天好像没什么用。于是又搜了半天,发现要给 dialog 加 v-if,当 v-if 为 false 的时候可以做到真正将之销毁而不是隐藏。这样一来,问题就很简单了,因为本来我们就有一个控制dialog隐藏与否的变量 dialogVisible,直接将他绑定给 v-if 即可:
<el-dialog
title='我的资料'
:modal="false"
:visible.sync="dialogVisible"
v-if="dialogVisible" //关键是这个
width="500px"
:close-on-click-modal="false"
:destroy-on-close="true" //这个貌似没用
:before-close="handleClose"
>
方法2:
此外,也可以通过动态创建input 的方法来解决这个问题,在这个方案中,文件选择框,即:<imput type="file">,不会出现在HTML模板中,而是通过代码实时创建:
methods: {
clickFile: function () {
let e = document.createElement("input") //用代码创建文件选择框
let vm = this
e.type = "file"
e.accept = "image/png, image/jpeg"
// 为他创建一个事件监听回调,当选择了一个文件后执行
e.addEventListener('change', function () {
vm.loadImg(this.files[0])
})
e.click()
},
loadImg: function (file) { // 文件传入loadImg进行处理
let vm = this
if (window.FileReader) {
let fr = new FileReader()
fr.readAsDataURL(file) //开始加载文件
fr.onload = function (e) {
vm.avatarSrc = e.target.result
}
}
},
实测,这样即使不使用 v-if ,也能实时更新,因为这个<input type="file">并不是HTML文档的一部分,也不是DOM的成员,它完全由代码创建,当退出函数的时候即已经被自动销毁了。
网友评论