vue3.2图片上传Demo搭建 4 实现 删除 显示 选中单个多个 隐藏修改删除按钮

FileList

<template>
    <div class="row" @click="clearSelected">
   <FileItem 
   v-for="(file,index) in files" 
   :key="index" :file="file" 
   @click.exact.stop="selectOne(file)"
   @click.ctrl.exact.stop="selectMultiple(file)"
   :class="{'selected-file':isSelected(file)}"
   />

    </div>

</template>
 <script setup>
 import FileItem from './FileItem.vue'
 import { reactive } from 'vue';
 const  selectedItems=reactive(new Set());

 const emits=defineEmits(["select-change"])

 const selectOne=(item)=>{
     selectedItems.clear()
     selectedItems.add(item)
    emits("select-change",selectedItems);

 }

 const selectMultiple=(item)=>{
 if(selectedItems.has(item)){
     selectedItems.delete(item)
 }else{
     selectedItems.add(item)
          console.log(selectedItems)
 }

     emits("select-change",selectedItems);

 };

 const clearSelected=()=>{
     selectedItems.clear();
        emits("select-change",selectedItems);
 }

 const isSelected=(item)=>selectedItems.has(item);



//属性传值

defineProps({
    files: {
        type: Array,
        required: true,
    }
})


</script>
<style>
.selected-file{
    border-bottom: 2px solid red;
}
</style>

ActionsBar.vue

<template>

    <div class="d-flex
 justify-content-between 
 align-items-center 
 border-bottom 
 pt-2 
 pb-3">

        <button class="btn btn-outline-primary">
         <icon-upload />上传
        </button>
        <div class="action-buttons" v-show="selectedItems.length">
            <button type="button" class="rounded-button" title="Rename">
              <icon-pencil  v-show="selectedItems.length===1"/>

            </button>

            <button  @click="$emit('remove')" type="button" class="rounded-button" title="Remove selected">
             <icon-trash />
            </button>
        </div>

    </div>



</template>
<script setup>

const props=defineProps({

  selectedItems:{
      type:Array,
  }
})

</script>

ActionsBar.vue

<template>

    <div class="d-flex
 justify-content-between 
 align-items-center 
 border-bottom 
 pt-2 
 pb-3">

        <button class="btn btn-outline-primary">
            <icon-upload />上传
        </button>
        <div class="action-buttons" v-show="selectedItems.length">
            <button type="button" class="rounded-button" title="Rename">
                <icon-pencil v-show="selectedItems.length === 1" />

            </button>

            <button @click="$emit('remove')" type="button" class="rounded-button" title="Remove selected">
                <icon-trash />
            </button>
        </div>

    </div>



</template>
<script setup>

const props = defineProps({

    selectedItems: {
        type: Array,
    }
})

</script>

MyFiles.vue

<template>
    <div class="container py-3">
        <ActionsBar  :selectedItems="selectedItems" @remove="handleRemove"/>
        <div class="d-flex justify-content-between  align-items-center  py-2">
            <h6 class="text-muted mb-0">文件</h6>
           <SortToggler @sort-change="hanleSortChange($event)"/>
        </div>
        <teleport to="#search-form">
                <SearchForm v-model="query.q"/>
        </teleport>
        <FilesList :files="files" @select-change="handleSelectChange($event)"/>

    </div>

</template>
<script setup>
//http://localhost:3031/files?_sort=name&_order=desc 倒序
//http://localhost:3031/files?_sort=name&_order=asc 正序
import SearchForm from '../components/SearchForm.vue';
import ActionsBar from '../components/ActionsBar.vue';
import FilesList from '../components/files/FilesList.vue';
import SortToggler from '../components/SortToggler.vue';
import axios from 'axios'

import { ref,onMounted,reactive,watchEffect,watch} from 'vue';

const selectedItems=ref([]);
const files=ref([]);
//修改query值 实现倒序正序
const query =reactive({
    _sort:"name",
    _order:"asc",
     q:"",
})
//平常我们通过查询字符串的方式传参需要通过对字符串进行处理后才能使用。
//URLSearchParams()中有帮我们做处理的方法直接返回处理后的数据

watchEffect(
   async ()=>{
    //    query.q=props.q;
   const {data}=await axios.get(
`http://localhost:3031/files?${new URLSearchParams(query)} `);

   files.value=data;
}
);

// watch(()=>query._order,
//    async ()=>{
//        console.log(`http://localhost:3031/files?${new URLSearchParams(query)} `)
//    const {data}=await axios.get(`http://localhost:3031/files?${new URLSearchParams(query)} `);
//     console.log(data)
//    files.value=data;
// },{immediate:true}
// );



const hanleSortChange =(payload)=>{
    console.log(payload);
 
    query._sort=payload.column;
    query._order=payload.order;  
}
const  handleSelectChange=(items)=>{
     console.log(Array.from(items))
selectedItems.value=Array.from(items);

}

const handleRemove =()=>{
   if(confirm("确定删除嘛")){
       selectedItems.value.forEach((item)=>removeItem(item,files))
   }

};
//findIndex
const removeItem = async (item,files) =>{
           console.log(item)
    try{
        const response=await axios.delete(`http://localhost:3031/files/${item.id}`);
        if(response.status === 200){
            const index =files.value.findIndex((file)=>file.id=== item.id);
            files.value.splice(index,1)
        }
    }catch(error){
            console.log(error)
    }
}


</script>

<style>
</style>