el-upload组件提供了多个事件钩子,其中on-success是在文件上传成功时触发的。你可以在这个事件处理函数中执行隐藏上传按钮的逻辑。 2. 修改数据属性或类名 你需要一个变量来控制上传按钮的显示状态。在上传成功的事件处理函数中,将这个变量设置为false,以隐藏上传按钮。 3. 使用条件渲染指令 你可以使用Vue的条件渲染指...
ref="uploadFile":class="[showUploadBtn ? '' : 'hidden-Btn']" //是否隐藏点击上传的按钮:disabled="!showUploadBtn" //是否隐藏文件删除标记action="#none":http-request="uploadSectionFile":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove":on-change="fileChange":au...
el-upload里面绑定一个占位class: :class="{hide:hideUpload}" data里面初始值: hideUpload:false, limitCount:1 onChange里面(添加文件、上传成功和上传失败时都会被调用的那个): this.hideUpload = fileList.length >=this.limitCount; handleRemove里面(删除文件被调用的那个): this.hideUpload = fileList.length...
const upload_btn = ref(false)// 上传成功const handleSuccess = () => {// 上传成功后,隐藏上传按钮upload_btn.value = true} CSS 部分 .hide_box /deep/ .el-upload--picture-card {display: none;} 说明::on-success="handleSuccess"这个是上传成功后触发,没成功不触发,如果没后台,只是想测试,可以...
data(){return{photoHide:true,//用来控制图片上传成功后隐藏上传按钮limit:1,//可以上传的图片数量uploadDisabled:false,//控制上传按钮isUploadShow:true,photoList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format...
简介:element el-upload上传图片完成后隐藏上传 这里就直接上代码了,亲测可以。 这里只弄了上传一张照片后隐藏上传按钮,如需上传多张,自行修改limit属性即可。 <template><el-card class="card"><el-upload:class="{hide:hideUploadEdit}":headers="this.headers":action="this.url.fileUpload":on-preview="ha...
51CTO博客已为您找到关于vue el-upload隐藏上传按钮的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及vue el-upload隐藏上传按钮问答内容。更多vue el-upload隐藏上传按钮相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。
首先，添加确认按钮，并隐藏el-upload的默认按钮。在JavaScript中，定义beforeUploadAction方法。当触发上传时，调用beforeUploadAction方法。利用ElMessageBox轻易实现确认机制，点击确定后，通过fileUploadRef值触发点击事件。确保点击操作针对的是el-upload内部按钮，而非el-button，且注意按钮默认隐藏状态。
element-ui上传一张图片后隐藏上传按钮(.el-upload--picture-card) 2020-05-07 11:03 −... 吴小明- 1 4909 element-ui-——el-uploadexcel导入 2019-12-13 16:44 −布局文件:(选择文件放在了弹框内部——即点击导入按钮后弹框显示,先下载模板再选择文件点击提交按钮才上传) <el-dialog :title="meta...
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮 思路: 上传成功以后,隐藏 .el-upload--picture-card 。HTML部分<el-upload :class="{hide_box: upload_btn}" :action="`#" list-type="picture-card" :on-success="handleSuccess" </el-u... ...