vue实现todolist的增删改查

vue实现todolist的目录和效果图

app.vue

<template>
  <div id="app">
    <div className='container'>
      <Inputs @addItem="addItem" @search="search"></Inputs>
      <List :list="list"></List>
      <Total @sendCheckAll="checkAllHandler" :isCheckAll="isCheckAll" ：list="list"></Total>
      <Masks :isOpen="isOpen" @sendIsOpen="isOpen = false" :content="edit.content" @getContent="getContent" @updateHandler="updateHandler"></Masks>
    </div>
  </div>
</template>
<script>
import List from "./components/List.vue";
import Item from "./components/Item.vue";
import Masks from "./components/Mask.vue";
import Total from "./components/Total.vue";
import Inputs from "./components/Input.vue";
export default {
  props: {},
  components: { List, Item, Masks, Total, Inputs },
  data() {
    return {
      flag: false,
      list: [
        {
          id: 1,
          content: "哈哈哈",
          checked: false,
        },
        {
          id: 7,
          content: "1212",
          checked: false,
        },
        {
          id: 5,
          content: "33",
          checked: false,
        },
      ],
      selectLength: 0,
      item: {},
      isCheckAll: false,
      isOpen: false,
      edit: {
        content:""
      }
    };
  },
  computed: {},
  methods: {
    // 全选全不选
    checkAllHandler(checked) {
      this.list = this.list.map(item => ({...item,checked}))
    },
    // 单选单不选
    checkHandler(id,checked) {
      this.list = this.list.map(item => {
        if(item.id === id) {
          item.checked = checked;
        }
        return item
      })
      let length = this.list.filter(item => item.checked).length;
      if(length === this.list.length) {
        this.isCheckAll = true
      } else {
        this.isCheckAll = false
      }
    },
    // 添加
    addItem(v) {
      this.list = [...this.list,v]
    },
    // 搜索
    search(e) {
      console.log("e",e)
      this.list = this.list.filter(item => {
        console.log("item",item)
        return item.content.includes(e)
      })
    },
    // 删除
    deleteHandler(id) {
      this.list = this.list.filter(item => {
        return item.id !==id;
      })
    },
    // 编辑回显
    getContent(content) {
      this.edit = Object.assign(this.edit,{content})
    },
    // 编辑更新
    updateHandler({content,flag}) {
      this.isOpen = flag;
      // this.getContent(content)
      this.list = this.list.map(item =>{
        if(item.id=== this.edit.id) {
          item = {...this.edit}
        }
        return item
      })
    }
  },
  mounted() {
    this.$bus.$on("getCheckHandler",({id,checked})=>{
      this.checkHandler(id,checked)
    })
    this.$bus.$on("getDelete",id=>{
      this.deleteHandler(id)
    })
    this.$bus.$on("getOpen",({item,flag})=>{
      console.log("flag",flag)
      this.isOpen = flag;
      this.edit = {...item};
    })
  },
  destroyed() {
    this.$bus.$off("getCheckHandler");
    this.$bus.$off("getDelete");
    this.$bus.$off("getOpen");
  }
};
</script>
<style scoped>
@import url("./assets/common.css");
</style>

Input.vue

<template>
  <div>
    <div class="input">
        <input type="text" placeholder='请输入你的任务名称，按回车键确认' v-model="content"/>
        <button class="btn btn-success" @click="addHandler">添加</button>
        <button class="btn btn-primary" @click="searchHandler">搜索</button>
    </div>
  </div>
</template>
<script>
export default {
  props:{},
  components:{},
  data() {
    return {
      content: ''
    }
  },
  methods: {
    addHandler() {
      let v = {
        id: Date.now(),
        content: this.content,
        checked: false
      }
      this.$emit("addItem",v)
    },
    searchHandler() {
      console.log("搜索")
      if(!this.content) return console.log("请输入")
      this.$emit("search",this.content)
    }
  },
  mounted() {}
}
</script>
<style scoped>

</style>

List.vue

<template>
    <ul class="task-list">
      <Item v-for="(item,index) in list" :key="index" :item="item">
      </Item>
    </ul>
</template>
<script>
import Item from './Item'
export default {
  props:{
    list: {
      type: Array,
      default: ()=>{
        return []
      }
    }
  },
  components:{Item},
  data() {
    return {}
  },
  methods: {},
  mounted() {}
}
</script>
<style scoped>

</style>

Item.vue

<template>
  <li class="task-item">
      <input type="checkbox" v-model="item.checked" @change="changeHandler(item.id,$event)"/>
      <div class="content">
        {{item.content}}
      </div>
      <button class="btn btn-success" @click="editHandler(item)">编辑</button>
      <button class="btn btn-primary" @click="deleteHandler(item.id)">删除</button>
    </li>
</template>
<script>
export default {
  props:{
    item: {
      type: Object,
      default: ()=>{
        return {}
      }
    }
  },
  components:{},
  data() {
    return {}
  },
  methods: {
    changeHandler(id,e) {
      let checked = e.target.checked
      this.$bus.$emit("getCheckHandler",{id,checked})
    },
    deleteHandler(id) {
     this.$bus.$emit("getDelete",id)
    },
    editHandler(item) {
      console.log("编辑")
      this.$bus.$emit("getOpen",{item,flag:true})
    }
  },
  mounted() {}
}
</script>
<style scoped>

</style>

Mask.vue

<template>
    <div class="mm-mask" v-if="isFlag">
    <div class="mm-modal">
      <div class="mm-title">
        <span class="mm-edit">编辑</span>
        <span class="mm-close"  @click="isFlag=false">x</span>
      </div>
      <div class="mm-content">
        <input type="text" placeholder="任务名称" v-model="setContent" />
      </div>
      <div class="mm-box-btn">
        <div class="mm-update" @click="updateHandler">更新</div>
        <div class="mm-cancel" @click="isFlag=false">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    isOpen: {
      type: Boolean
    },
    content: {
      type: String
    }
  },
  components:{},
  data() {
    return {
      flag: this.isOpen,
      text: ""
    }
  },
  computed: {
    isFlag: {
      get() {
        return this.flag = this.isOpen
      },
      set(val) {
        this.flag = val
        this.$emit("sendIsOpen",val)
      }
    },
    setContent: {
      get() {
        return this.text = this.content
      },
      set(val) {
        this.text = val
        this.$emit("getContent",val)
      }
    }
  },
  methods: {
    updateHandler() {
      console.log("更新")
      if(!this.setContent) return console.log("请输入")
      this.$emit("updateHandler",{content: this.setContent,flag:false})
    }
  },
  mounted() {}
}
</script>
<style scoped>

</style>

Total.vue

<template>
   <div class="task-done">
      <input type="checkbox" @change="changeHandler($event)" v-model="getCheckAll"/>
      <p>已完成<span class="single-number">{{selectLength}}</span> 全部<span class="all-number">{{list.length}}</span></p>
      <p></p>
    </div>
</template>
<script>
export default {
  props:{
    checkAll: {
      type: Function
    },
    isCheckAll: {
      type: Boolean
    },
    list: {
      type: Array,
      default: ()=>{
        return []
      }
    }
  },
  computed: {
    getCheckAll: {
      get() {
        return this.checked = this.isCheckAll
      },
      set(value) {
        this.checked = value
      }
    },
    selectLength() {
       return this.list.filter(item => item.checked).length
    }
  },
  components:{},
  data() {
    return {
      checked: false,
    }
  },
  methods: {
    changeHandler(e) {
      this.$emit("sendCheckAll",e.target.checked)
    }
  },
  mounted() {
   
  }
}
</script>
<style scoped>

</style>