vue3实现单选反选

<template>
    <div class="bigBox">
        <div class="heardBox">
            <el-input v-model="inputValue" style="width: 100%" placeholder="请输入您的任务名称" @keydown.enter="inputKeydown"/>
        </div>
        <div class="contentBox">
            <template  v-for="(item) in list" :key="item.id" >
                <el-collapse-transition>
                    <div class="contentItem" v-show="is_hidde(item.isSelect)" @mouseenter="item_btn_isShowId_fn(item)" @mouseleave="item_btn_isShowId=null">
                        <div style="display: flex;">
                            <el-checkbox v-model="item.isSelect" @change="checkItem()" style="margin: 0 10px;"</el-checkbox>
                            <el-input v-if="item.id == editId" v-model="editValue" style="width: 100%" placeholder="请输入您的任务名称" @keydown.enter="ItemInputKeydown" @blur="ItemInputKeydown"/>
                            <span v-else style="margin: 0 5px;">{{ item.title }}</span>
                        </div>
                        <!--  v-show="" -->
                        <transition name="el-zoom-in-bottom">
                        <div class="contentItemButton" v-show="item.id == item_btn_isShowId">
                            <el-button size="small" @click="EditItem(item)">编辑</el-button>
                            <el-button size="small" @click="deleteItem(item)">删除</el-button>
                        </div>
                        </transition>
                    </div>
                </el-collapse-transition>
            </template>
        </div>
        <div class="footerBox">
                <div>
                    <el-checkbox v-model="is_all" @change="checkAll()"></el-checkbox>
                    <span style="margin: 0 5px;">已完成{{checkNum}}/全部{{ allNum }}</span>
                </div>
               
                <div class="contentItemButton">
                    <el-button size="small" @click="clearFinish">清除已完成任务</el-button>
                    <el-button size="small" @click="hiddenFinsh">{{is_hidden_finish?"取消隐藏已完成":"隐藏已完成"}}</el-button>
                </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';

interface ListItem{
    title:string,
    id:number,
    isSelect:boolean
}
let inputValue = ref('')//输入框
// 列表
let list = reactive<Array<ListItem>>([
    {
      title: '睡觉',
      id: 2,
      isSelect: false  
    },
    {
      title: '洗脸',
      id: 1,
      isSelect: false  

    },
    {
      title: '起床',
      id: 0,
      isSelect: false
    }
])
//全选
let is_all = ref<boolean>(false)
// 编辑id
let editId = ref<number|null>(null)
let editValue = ref<string>('')
// 按钮显隐
let item_btn_isShowId = ref<number|null>(null)
// 是否隐藏已完成
let is_hidden_finish = ref<boolean>(false)
let is_hidde = (itemSelect: any)=>{
    if(is_hidden_finish.value){
        if(itemSelect) return false
        else return true
    }else return true 
}
// 已完成数据
let checkNum = computed<number>(()=>{
    return list.filter(item => item.isSelect).length
})
// 全部数据
let allNum = computed<number>(()=>{
    return list.length
})


const inputKeydown = ()=>{
   let includ = list.findIndex(item=>item.title==inputValue.value)==-1
   if(inputValue.value&&includ){
       let obj:ListItem={
           title:inputValue.value,
           isSelect:false,
           id:list.length==0?0:(list[0].id+1)
       }
       list.unshift( obj )
   }else if(!includ){
    ElMessage({
        message: '已有相关任务,轻忽重复添加',
        type: 'warning',
    })
   }
}
const checkItem = ()=>{
    is_all.value = checkNum.value==allNum.value&&allNum.value!==0
}
// 全选
const checkAll = ()=>{
    console.log(is_all,'is_allis_allis_all')
    list.forEach((item,index)=>{
        list[index].isSelect = is_all.value
    })
}
const clearFinish = ()=>{
   let newArr = list.filter(item=>!item.isSelect)
   list.splice(0,list.length,...newArr)
   checkItem()
}
const hiddenFinsh = ()=>{
    is_hidden_finish.value = !is_hidden_finish.value
}

const deleteItem = (data:ListItem)=>{
    list.splice(list.findIndex(item=>item.id==data.id),1)
    checkItem()
}
const EditItem = (data:ListItem)=>{
    editId.value = data.id
    editValue.value = data.title
}
const ItemInputKeydown = ()=>{
    if(editValue.value!==''){
        list[list.findIndex(item=>item.id==editId.value)].title=editValue.value
        editId.value = null
        editValue.value=''
    }else{
        ElMessage({
        message: '任务名不能为空',
        type: 'warning',
    })
    }
}
const item_btn_isShowId_fn = (data:ListItem)=>{
    item_btn_isShowId.value = data.id
}
/**
 * 生命周期
 */
onMounted(()=>{
    console.log(`%c ${JSON.stringify(list)}`,'color:red')
})

</script>
<style lang="scss">
.bigBox{
    width: 700px;
    height: 500px;
    padding: 10px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.1);
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.heardBox{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 35px;
}
.contentBox{
    width: 100%;
    height: 410px;
    .contentItem{
        width: 100%;
        height: 35px;
        display: flex;
        justify-content: space-between;
        line-height: 35px;
        color: #000;
        font-size: 15px;
        .contentItemButton{
            
        }
    }
}
.footerBox{
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: space-between;
    line-height: 35px;
    color: #000;
    font-size: 15px;
    .contentItemButton{
        padding: 0 10px;
    }
}
</style>