Vue-----带有动画效果的todo_list案例

目录

前言

一、效果讲解

1. 效果图展示

2. 功能说明

二、实现过程

1.App组件

2.MyHeader组件

3. MyFooter组件

4.List组件

5. Item组件

---

---

前言

相应代码仅供参考、一起学习。

---

一、效果讲解

1. 效果图展示

2. 功能说明

使用Vue脚手架进行设计，共有四个小组件和一个APP组件进行管理构成。

1. 添加事件：在输入框输入后回车在列表中添加；

2. 删除事件：点击删除按钮进行删除；

3. 全选与全不选、选中后批量删除；

4.编辑、修改事件；

二、实现过程

1.App组件

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- <my-header @addTodo="addTodo"></my-header> -->
        <my-header ref="addTodo"></my-header>
        <List :todos="todos" :checkUpdate="checkUpdate" :deleteTodoItem="deleteTodoItem" />
        <my-footer :todos="todos" @checkAll="checkAll" v-on:clearDoneAll="clearDoneAll"/>
      </div>
    </div>
  </div>
</template>

<script>

  import MyHeader from './components/MyHeader.vue'
  import MyFooter from './components/MyFooter.vue'
  import List from './components/List.vue'
  
  export default {
    name: 'App',
    components: {
      MyHeader,MyFooter,List
    },
    data() {
            return {todos:JSON.parse(localStorage.getItem('todos')) || []}
        },
    methods: {
      addTodo(todoObj) {
        this.todos.unshift(todoObj)
      },
      checkUpdate(id){
        this.todos.forEach(todo => {
          if(todo.id === id) {
            todo.done = !todo.done
          }
        })
      },
      deleteTodoItem(id){
        this.todos = this.todos.filter((todo) => {return todo.id !== id})
      },
      checkAll(done){
        this.todos.forEach((todo) => todo.done = done)
      },
      clearDoneAll() {
       this.todos = this.todos.filter((todo) => !todo.done)
      }
    },
    watch:{
      todos:{
        deep:true,
        handler(value){
          localStorage.setItem('todos',JSON.stringify(value) )
        }
      }
    },
    mounted() {
      this.$refs.addTodo.$on('addTodo',this.addTodo)
      // 事件总线形式接收数据
      this.$bus.$on('checkUpdate',this.checkUpdate)
    },
  }
</script>

<style>
  /*base*/
  body {
    background: #fff;
  }
  .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
  }
  .btn-edit{
    color: #fff;
    background-color: skyblue;
    border: 1px solid rgb(60, 163, 204);
  }
  .btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
  }
  .btn-edit:hover {
    color: #fff;
    background-color: rgb(86, 184, 222);
  }
  .btn:focus {
    outline: none;
  }
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>

2.MyHeader组件

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
  name:'MyHeader',
  data(){
    return {
      title:''
    }
  },
  methods: {
			add(){
				//校验数据
				if(!this.title.trim()) return alert('输入不能为空')
				//将用户的输入包装成一个todo对象
				const todoObj = {id:nanoid(),title:this.title,done:false}
				//通知App组件去添加一个todo对象
				this.$emit('addTodo',todoObj)
				//清空输入
				this.title = ''
			}
		},
}
</script>

<style>
/*header*/
  .todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
  }

  .todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  }
</style>

3. MyFooter组件

<template>
    <div class="todo-footer" v-show="total!==0">
          <label>
            <input type="checkbox" v-model="isAll"/>
          </label>
          <span>
            <span>已完成{{doneTotal}}</span> / 全部{{total}}
          </span>
          <button class="btn btn-danger" @click="clearDone">清除已完成任务</button>
    </div>
</template>

<script>
export default {
    name:'MyFooter',
    // props:['todos','checkAll','clearDoneAll'],
    props:['todos'],
    computed:{
      total(){
        return this.todos.length
      },
      doneTotal(){
         const x = this.todos.reduce((pre,todo) => pre + (todo.done ? 1 : 0),0)
        return x
      },
      isAll:{
        get(){
          return this.total===this.doneTotal
        },
        set(value){
          // this.checkAll(value)
          this.$emit('checkAll',value)
        }
        
      },
      
    },
    methods: {
      clearDone() {
        if(confirm("是否确认清空所有已完成"))
        // this.clearDoneAll()
        this.$emit('clearDoneAll')
      }
    },

}
</script> 

<style>
/*footer*/
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }

  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }

  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .todo-footer button {
    float: right;
    margin-top: 5px;
  }
</style>

4.List组件

<template>
   <ul class="todo-main">  
     <transition-group name="todo" appear>
        <Item v-for="todoObj in todos" :key="todoObj.id" 
        :todo="todoObj" :checkUpdate="checkUpdate" 
        :deleteTodoItem="deleteTodoItem"/>
      </transition-group>
    </ul>
</template>

<script>
    import Item from './Item.vue'
    export default {
        name:'List',
        components:{
            Item
        },
       props:['todos','checkUpdate','deleteTodoItem']
    }
</script>

<style>
/*main*/
  .todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
  }

  .todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
  }
  .todo-enter-active{
		animation: atguigu 0.5s linear;
	}

	.todo-leave-active{
		animation: atguigu 0.5s linear reverse;
	}

	@keyframes atguigu {
		from{
			transform: translateX(100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

5. Item组件

<template>
    <li>
            <label>
            <input type="checkbox" :checked="todo.done" @change="checkChange(todo.id)"/>
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <input v-show="todo.isEdit" type="text" :value="todo.title" @blur="getEdit($event,todo)" ref="inputTitle"/>
            </label>
            <button class="btn btn-danger" @click="deleteTodo(todo.id)">删除</button>
            <button class="btn btn-edit" @click="UpdateTodo(todo)">编辑</button>
    </li>
</template>

<script>
export default {
    name:'Item',
    // props:['todo','checkUpdate','deleteTodoItem'],
    props:['todo','deleteTodoItem'],
    methods: {
      checkChange(id){
        // this.checkUpdate(id)
        this.$bus.$emit('checkUpdate',id)
      },
      deleteTodo(id){
        if(confirm("确定删除吗？"))
        this.deleteTodoItem(id)
      },
      // 编辑
      UpdateTodo(todo){
        if(todo.hasOwnProperty('isEdit')){
          todo.isEdit = true
        }else {
          this.$set(todo,'isEdit',true)
        }
        this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})

      },
      getEdit(e,todo){
        todo.isEdit = false
        if(!e.target.value.trim()) return alert('不能为空')
        todo.title = e.target.value
      }
    },
}
</script>

<style scoped>
 /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }

  li label {
    float: left;
    cursor: pointer;
  }

  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }

  li button {
    float: right;
    display: none;
    margin-top: 3px;
  }

  li:before {
    content: initial;
  }

  li:last-child {
    border-bottom: none;
  }
  li:hover {
    background-color: #ddd;
  }
  li:hover button {
    display: block;
  }
</style>

---