RuoYi/RuoYi-Cloud
1
0
Fork 0
mirror of https://github.com/yangzongzhuan/RuoYi-Cloud.git synced 2025-09-02 02:44:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

图片上传组件新增disabled属性

Browse Source
This commit is contained in:
RuoYi
2025-05-06 19:14:54 +08:00
parent 0dcd3e6183
commit 056cf94082
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ruoyi-ui/src/components/FileUpload/index.vue
View File

@@ -84,7 +84,7 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 拖动排序 // 拖动排序
drag: { drag: {
type: Boolean, type: Boolean,
default: true default: true
@@ -102,7 +102,7 @@ export default {
} }
}, },
mounted() { mounted() {
if (this.drag) { if (this.drag && !this.disabled) {
this.$nextTick(() => { this.$nextTick(() => {
const element = this.$refs.uploadFileList?.$el || this.$refs.uploadFileList const element = this.$refs.uploadFileList?.$el || this.$refs.uploadFileList
Sortable.create(element, { Sortable.create(element, {

21
ruoyi-ui/src/components/ImageUpload/index.vue
View File

@@ -2,6 +2,7 @@
<div class="component-upload-image"> <div class="component-upload-image">
<el-upload <el-upload
multiple multiple
:disabled="disabled"
:action="uploadImgUrl" :action="uploadImgUrl"
list-type="picture-card" list-type="picture-card"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
@@ -22,7 +23,7 @@
</el-upload> </el-upload>
<!-- 上传提示 --> <!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip"> <div class="el-upload__tip" slot="tip" v-if="showTip && !disabled">
请上传 请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
@@ -79,7 +80,12 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 拖动排序 // 禁用组件（仅查看图片）
disabled: {
type: Boolean,
default: false
},
// 拖动排序
drag: { drag: {
type: Boolean, type: Boolean,
default: true default: true
@@ -100,7 +106,7 @@ export default {
} }
}, },
mounted() { mounted() {
if (this.drag) { if (this.drag && !this.disabled) {
this.$nextTick(() => { this.$nextTick(() => {
const element = this.$refs.imageUpload?.$el?.querySelector('.el-upload-list') const element = this.$refs.imageUpload?.$el?.querySelector('.el-upload-list')
Sortable.create(element, { Sortable.create(element, {
@@ -239,12 +245,17 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
// .el-upload--picture-card 控制加号部分 // .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card { ::v-deep.hide .el-upload--picture-card {
display: none; display: none;
} }
::v-deep .el-upload-list--picture-card.is-disabled + .el-upload--picture-card {
display: none !important;
}
// 去掉动画效果 // 去掉动画效果
::v-deep .el-list-enter-active, ::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active { ::v-deep .el-list-leave-active {
transition: all 0s; transition: all 0s;
} }
::v-deep .el-list-enter, .el-list-leave-active { ::v-deep .el-list-enter, .el-list-leave-active {