Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮

简介: 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-upload>

script部分

<script setup lang="ts">
const upload_btn = ref(false)
// 上传成功
const handleSuccess = () => {
  // 上传成功后,隐藏上传按钮
  upload_btn.value = true
}
</script>

CSS 部分

.hide_box /deep/ .el-upload--picture-card {
    display: none;
}

说明::on-success="handleSuccess" 这个是上传成功后触发,没成功不触发,如果没后台,只是想测试,可以换成 :on-change="handleSuccess",这个是状态修改后就触发


相关文章
|
1月前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
29 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
1月前
|
JavaScript 前端开发 小程序
Vue 3的高颜值UI组件库
Vue 3的高颜值UI组件库
108 1
|
1月前
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
100 0
|
1月前
|
JavaScript
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
56 1
|
1月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
1月前
|
JavaScript
vue中有关表格中的表格头中添加悬浮提示的ui问题
vue中有关表格中的表格头中添加悬浮提示的ui问题
35 1
|
1月前
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
|
15天前
|
缓存 JavaScript 测试技术
如何创建一个VUE3项目并使用Element UI插件
如何创建一个VUE3项目并使用Element UI插件
|
1月前
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
42 1
|
1月前
|
JavaScript
VUE里修改element-ui的显示层次与上下间隔
VUE里修改element-ui的显示层次与上下间隔
27 1

热门文章

最新文章