ADD: 轮播图添加限制

src/components/ChooseImage.vue

@@ -31,7 +31,7 @@
             </el-header>
             <el-container>
                 <ImageAside ref="ImageAsideRef" @change="handleAsideChange" />
-                <ImageMain openChoose ref="ImageMainRef" @choose="handleChoose" />
+                <ImageMain :limit="limit" openChoose ref="ImageMainRef" @choose="handleChoose" />
             </el-container>
         </el-container>
 
@@ -49,6 +49,7 @@
 import { ref } from "vue"
 import ImageAside from '@/components/ImageAside.vue'
 import ImageMain from '@/components/ImageMain.vue'
+import { toast } from '@/composables/util'
 
 
 const dialogVisible = ref(false)
@@ -68,7 +69,12 @@ const handleOpenUpdate = () => ImageMainRef.value.openUpdateFile()
 
 
 const props = defineProps({
-    modelValue: [String, Array]
+    modelValue: [String, Array],
+    limit:{
+        type:Number,
+        default:1
+    }
+
 })
 
 const emit = defineEmits(["update:modelValue"])
@@ -81,8 +87,17 @@ const handleChoose = (e) => {
 
 
 const submit = () => {
-    if (urls.length) {
-        emit("update:modelValue", urls[0])
+    let value = []
+    if(props.limit == 1){
+        value = urls[0]
+    } else{
+        value = [...props.modelValue, ...urls]
+        if(value.length > props.limit){
+            return toast("最多还能选择" + (props.limit - props.modelValue.length) + "张")
+        }
+    }
+    if (value.length) {
+        emit("update:modelValue", value)
     }
     close()
 }

src/components/ImageMain.vue

@@ -22,7 +22,6 @@
                                     <el-button class="!m-0" type="primary" size="small" text>删除</el-button>
                                 </template>
                             </el-popconfirm>
-
                         </div>
                     </el-card>
                 </el-col>
@@ -142,10 +141,14 @@ const handleDelete = (id) => {
 const handleUploadSuccess = ()=>getData(1)
 
 
-defineProps({
+const props = defineProps({
     openChoose:{
         type:Boolean,
         default:false
+    },
+    limit:{
+        type:Number,
+        default:1
     }
 })
 
@@ -155,9 +158,9 @@ const emit = defineEmits(["choose"])
 const checkedImage = computed(()=>list.value.filter(o=>o.checked))
 
 const handleChooseChange = (item) =>{
-    if(item.checked && checkedImage.value.length > 1){
+    if(item.checked && checkedImage.value.length > props.limit){
         item.checked = false
-        return toast('最多只能选中一张', 'error')
+        return toast(`最多只能选中${props.limit}张`, 'error')
 
     }
     emit("choose",checkedImage.value)

src/pages/goods/banners.vue

@@ -4,7 +4,7 @@
 
     <el-form :model="form" label-width="80px">
         <el-form-item label="轮播图">
-            <ChooseImage v-model="form.banners" />
+            <ChooseImage :limit="9" v-model="form.banners" />
         </el-form-item>
         <el-form-item>
             <el-button type="primary" @click="submit">提交</el-button>