动态控制ui框架的class类名
给需要控制的类名嵌套类名
elementUI 上传组件示例代码
<el-upload
:class="{uploadDemo:isHide}"
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
:on-remove="handleRemove"
:on-change="handleChange"
:limit="3"
>
<template v-slot:tip>
<div class="el-upload__tip">文件不超过3个</div>
</template>
</el-upload>
<script>
import { reactive, toRefs, getCurrentInstance } from 'vue'
export default {
data() {
return {
isHide: false,
fileList: []
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
if(fileList.length < 3) {
this.isHide = false
} else {
this.isHide = true
}
},
handleChange(file, fileList) {
console.log(file, fileList);
if(fileList.length < 3) {
this.isHide = false
} else {
this.isHide = true
}
},
}
}
</script>
<style>
.uploadDemo .el-upload--picture-card {
display: none;
}
</style>