TodoList案例·

最新推荐文章于 2024-07-20 16:46:53 发布

错误集中区

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量331

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_65564464/article/details/139354567

版权

ToDoList是一个Vue开发案例，主要巩固基础组件使用与数据共享的知识点。（Vue初始学习阶段案例作业，课堂作业，里面有Bug，能力有限，还没解决，后续优化）

1.先完成一些准备工作，创建项目、使用 yarn 包管理器，创建一个Vue3项目，

首先新建一个文件夹，使用win+r进入cmd模式，创建Vue项目，步骤如下：

yarn create vite ToDoList --template vue
cd ToDoList
yarn 
yarn dev

2.配置App.vue代码如下：

<template>
  <div>
    <ToDoHeader @addTodo="addTodo"/>
    <ToDoMain :list="showList" @deleteTo="deleteTo"/>
    <ToDoFooter :doneTo="doneTo"  :status="status" @updateStatus="updateStatus"/>
  </div>
  
</template>

<script setup>
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoFooter from './components/ToDoFooter.vue';
import ToDoMain from './components/ToDoMain.vue';
import { computed, ref } from 'vue';


const list = ref([
 { id: 1, name: '晨练', done: false },
 { id: 2, name: '练书法', done: true },
 ])
 //定义添加自定义事件，接收传递过来的name，使用push方法添加到list数组中
const addTodo = name => {
  list.value.push({ name, done: false, id: ~~(Math.random() * 1000) })
}

//执行删除自定义事件
const deleteTo = id => {
  list.value = list.value.filter(item => item.id !== id)
}
//传递没完成的任务条数，使用计算属性 ToDoFooter组件接收使用
const doneTo = computed( () => {
  return list.value.filter(item => !item.done).length
})
//完成待办，已办，全部任务的展示，使用计算属性，ToDoMain组件接收使用
//定义status默认状态下全选
const status = ref('all')
//利用计算属性，完成showList（）
const showList = computed( ()=>{
  if(status.value === 'all'){
    return list.value
  }else if(status.value === 'completed'){
    return list.value.filter(item => item.done)
  }else if(status.value === 'active'){
    return list.value.filter(item => !item.done)
  }
})


const updateStatus = (status1) => {
  status.value = status1 // 将子组件的状态赋值给父组件
}
</script>

<style>

</style>

配置ToDoHeader.vue，ToDoHeader是ToDoList的头部，代码如下:

<template>
  <div>
    <div class="header">
        <p class="title">
           待办事项
        </p>
        <input type="text" class="new-todo" placeholder="请填写任务?"  v-model.trim="name" @keyup.enter="addTodo">
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('')
const emit = defineEmits(['addTodo'])
const addTodo = () => {
 emit('addTodo', name.value)
 name.value=''
  }
</script>

<style scoped>
.header {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
  
.title {
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    color: #b83f45;
}
  
.new-todo {
    width: 93%;
    padding: 20px 10px 20px 50px;
    height: 20px;
    border: none;
    background: rgba(0, 0, 0, 0.003);
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.05);
}
  </style>

配置ToDoMain.vue，ToDoMain是ToDoList的中间部分，是所需要添加的事项显示，代码如下:

<template>
    <div class="main">
        <ul class="todo-list" >
            <li  v-for="item in list" :key="item.id" :class="{ completed: item.done }">
                <div class="view">
                    <input type="checkbox" class="toggle"  v-model="item.done">
                    <label >{{item.name}}</label>
                    <button class="destroy" @click="deleteTo(item.id)"></button>
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref } from 'vue';
//声明自定义事件删除
const emit = defineEmits(['deleteTo'])
//触发删除自定义事件
const deleteTo = (id) => {
  id && emit('deleteTo', id) // 触发事件
}
//接收已办实现列表
const todoList = defineProps(['list'])
</script>
<style scoped>


.main {
    position: relative;
    z-index: 2;
    border-top: 1px solid #e6e6e6;
  }
  
.todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
  
.todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #ededed;
}
  
.todo-list li:last-child {
    border-bottom: none;
}
  
.todo-list li .toggle {
    text-align: center;
    width: 30px;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: none;
    opacity: 0;
}
  
.todo-list li .toggle+label {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
  
.todo-list li .toggle:checked+label {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");
}
  
.todo-list li label {
    word-break: break-all;
    padding: 15px 15px 15px 60px;
    display: block;
    line-height: 1.2;
    transition: color 0.4s;
    font-weight: 400;
    color: #484848;
}
  
.todo-list li.completed label {
    color: #949494;
    text-decoration: line-through;
}
  
.todo-list li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 30px;
    transition: color 0.2s ease-out;
    border: none;
    background-color: #fff;
}
  
.todo-list li .destroy:hover,
.todo-list li .destroy:focus {
    color: #c18585;
}
  
.todo-list li .destroy:after {
    content: "×";
    display: block;
    height: 100%;
    line-height: 1.1;
}
  
.todo-list li:hover .destroy {
    display: block;
}
</style>

配置ToDoFooter.vue，ToDoFooter是ToDoList的尾部分，展示任务书的条数与切换任务列表，代码如下:

<template>
  <div class="footer">
    <span class="todo-count">
        共<strong>{{doneTo}}</strong>条未完成的任务
    </span>
    <ul class="filters">
        <li>
            <a href="#/" :class="{selected:status === 'all'}"
                @click.prevent="emit('updateStatus','all')">All</a>
        </li>
        <li>
            <a href="#/active"  :class="{selected:status === 'active'}"
               @click.prevent="emit('updateStatus','active')">Active</a>
        </li>
        <li>
            <a href="#/completed" :class="{selected:status === 'completed'}"
              @click.prevent="emit('updateStatus','completed')">Completed</a>
        </li>
    </ul>
  </div>
</template>

<script setup>
//出发自定义事件doneTo，接受App父组件传递而来的值 渲染值
const props = defineProps(['doneTo','status'])
//设置状态的自定义事件
const emit = defineEmits(['updateStatus'])
</script>

<style  scoped>
.footer {
    padding: 10px 15px;
    height: 20px;
    text-align: center;
    font-size: 25px;
    border-top: 1px solid #e6e6e6;
  }
  
.footer:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
      0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
      0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
  
.todo-count {
    float: left;
    text-align: left;
}
  
.todo-count strong {
    font-weight: 300;
}
  
.filters {
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;
  
}
  
.filters li {
    display: inline;
}
  
.filters li a {
    color: inherit;
    margin: 3px;
    padding: 3px 7px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
    border-color: #767676;
  
}
  
.filters li a:hover {
    border-color: #db7676;
}
  
  /* .filters li a.selected{
    border-color: #db7676;
  } */
.selected {
    border-color: #db7676;
  }
</style>

在终端使用npm run dev启动项目，页面如下：