一、前言
首先我发布这些是为了记录,更是为了初学代码和我一样的小白,遇到相同的问题不解的时候可以相互借鉴。我会把完整代码都发布出来。
首先实现todos要注意以下3点:①这里的向下箭头和下方隐藏的input框是通过input的id和label的for进行绑定,这样就可以点击label触发input(这点非常重要哦,不然你实现这个全选和单选可能有点难!!);
②路由的使用和本地存储的使用,这里分别用了两个js文件,清晰明了;③对于可能出现下方列表双击之后,不修改内容就不会触发失焦事件的同学,需要自定义一个聚焦指令,使它双击之后自动聚焦。因为你不聚焦就不会有失焦事件。
好了,以下上传html、css、js文件,你可以直接复制到你的新页面上查看效果。
二、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>土豆丝</title>
<link rel="stylesheet" href="./todos.css">
</head>
<body>
<div id="todos">
<h1 class="todos-head">todos</h1>
<div class="todos-content-head">
<!-- 添加新列表到下面 -->
<input type="text" placeholder="What needs to be done?" v-model='inputVal' @keydown.13="addlist" v-focus>
</div>
<div class="todos-content-content">
<!-- 通过input的id和label的for进行绑定,这样就可以点击label触发input -->
<input id="toggle-all" class="toggle-all" type="checkbox" @change="handleAllChange">
<label for="toggle-all" :class="[{'todos-content-head-noCompleted':true},{'todos-content-head-Completed':judgecheck}]"> ❯ </label>
<ul class="todos-content-list">
<li v-for='(item,index) in properlist' @dblclick="editjoin(index)" :key="item.id" @mouseenter='showdel(index)' @mouseleave='hiddendel(index)'>
<!-- 这个input初始是隐藏的,双击编辑才会显示出来,控制类名实现。需要注意的是失焦不了的问题,我们自定义指令让他双击后自动聚焦,这样才会有失焦的触发 -->
<input type="text" v-input-focus v-model='item.text' @blur="editcomplete(index)" :class="[{'edit':true},{'edit-block':selectIndex===index}]">
<input type="checkbox" class="somecheck" v-model='item.checked'>
<label :class="[{'default':true},{'textcheck':item.checked}]">{
{
item.text}}</label>
<span @click="deletehandle(index)" :class="[{'hidden':isShowIndex!=index},{'show':isShowIndex==index}]">X</span>
</li>
</ul>
</div>
<div class="todos-bottom">