遇到的问题:
在vue中照片墙的照片数量超过限制数量后,要隐藏图片上传按钮,如何解决?
解决方法:
<el-uploadaction="/posts/"list-type="picture-card":limit="2":on-preview="handlePictureCardPreview":on-remove="handleRemove":on-change="handleChange":class="{hide:hideUploadCard}" //绑定css样式><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog><script>export default {data() {return {dialogImageUrl: '',dialogVisible: false,hideUploadCard: false};},methods: {handleRemove(file, fileList) {console.log(file, fileList);this.hideUploadCard = fileList.length >= 2},handleChange(file, fileList) {this.hideUploadCard = fileList.length >= 2 //通过change方法来改变hideUploadCard值},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;}}}</script><style>.hide .el-upload--picture-card {display: none;}</style>
注意:在vue中的话,需要将style中的scope去掉!