图片上传组件新增disabled属性

This commit is contained in:
RuoYi
2025-05-06 19:14:23 +08:00
parent 060adcbdc1
commit 9ee89f7085
2 changed files with 13 additions and 3 deletions

View File

@@ -214,7 +214,7 @@ function listToString(list, separator) {
// 初始化拖拽排序
onMounted(() => {
if (props.drag) {
if (props.drag && !props.disabled) {
nextTick(() => {
const element = proxy.$refs.uploadFileList?.$el || proxy.$refs.uploadFileList
Sortable.create(element, {

View File

@@ -2,6 +2,7 @@
<div class="component-upload-image">
<el-upload
multiple
:disabled="disabled"
:action="uploadImgUrl"
list-type="picture-card"
:on-success="handleUploadSuccess"
@@ -21,7 +22,7 @@
<el-icon class="avatar-uploader-icon"><plus /></el-icon>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" v-if="showTip">
<div class="el-upload__tip" v-if="showTip && !disabled">
请上传
<template v-if="fileSize">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
@@ -82,6 +83,11 @@ const props = defineProps({
type: Boolean,
default: true
},
// 禁用组件(仅查看图片)
disabled: {
type: Boolean,
default: false
},
// 拖动排序
drag: {
type: Boolean,
@@ -225,7 +231,7 @@ function listToString(list, separator) {
// 初始化拖拽排序
onMounted(() => {
if (props.drag) {
if (props.drag && !props.disabled) {
nextTick(() => {
const element = proxy.$refs.imageUpload?.$el?.querySelector('.el-upload-list')
Sortable.create(element, {
@@ -245,4 +251,8 @@ onMounted(() => {
:deep(.hide .el-upload--picture-card) {
display: none;
}
:deep(.el-upload.el-upload--picture-card.is-disabled) {
display: none !important;
}
</style>