鼠标经过显示删除按钮
鼠标经过某一事项是有高亮效果
实现鼠标经过某一事项是有高亮效果，就是给UserItem的整个li一个背景
当鼠标经过打代码这个事项时，它有一个和其它事项不一样的背景
鼠标经过某一事项该删除按钮显现
在UserItem将模板上的这个 style="display: none"删除掉
保证这个display:none存在
当鼠标经过时，这个按钮显现出来
效果如图，鼠标经过时删除键也显现出来了
点击删除按钮删除事项
给按钮加一个点击事件
当我用delete作为事件的名字，出现了报错，其中提示我们避免使用JS里的关键字delete
就是说JS里的const、var、let等这些关键字，我们不能使用，我们要改一下名字
按钮点击获取id
获取todo的id
点击打代码的删除按钮，输出其中的id
删除之前进行一次确认
点击删除键
它会让你再次确认一下，如果你点取消，它就不会输出什么
如果你点确认，它会输出id
在app加一个删除方法
要删除app上的todos的数据，就要在app上添加一个删除方法
然后我们通过filter过滤掉我们选中那个id所在的todo
我们可以进行一下精简，当然不精简也是可以的
把app的deleteTodo传给UserItem
由app传给List
由List传给Item
Item接收
在UserItem中使用deleteTodo方法删除事项
然后就可以使用deleteTodo方法删除id对应的todo了
到网页上，点击打代码的删除按钮
点击确认
打代码这样事项就被删除了
本结的主要代码如下：
UserItem.vue
<template>
<li>
<label>
<input type="checkbox" :checked='todo.done' @change="handleCheck(todo.id)" />
<span>{{todo.title}}</span>
</label>
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
</li>
</template>
<script>
// 组件交互相关的代码(数据、方法等等)
export default {
name: "UserItem",
props: ["todo","checkTodo", "deleteTodo"],
methods: {
// 勾选或取消勾选
handleCheck(id) {
this.checkTodo(id)
},
// 删除
handleDelete(id) {
if (confirm("确定删除吗？")) {
this.deleteTodo(id);
}
},
}
};
</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 input {
vertical-align: middle;
margin-right: 6px;
position: relative;
top: -1px;
cursor: pointer;
}
li button {
float: right;
display: none;
margin-top: 3px;
}
li:before {
content: initial;
}
li:last-child {
border-bottom: none;
}
</style>
UserList.vue
<template>
<ul class="todo-main">
<UserItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
</ul>
</template>
<script>
// 引入组件
import UserItem from "./UserItem.vue";
export default {
name: "UserList",
components: { UserItem },
props: ["todos", "checkTodo","deleteTodo"],
data() {
return {};
},
};
</script>
<style scoped>
/* main */
.todo-main {
/* background-color: aqua; */
border: 1px solid #ddd;
border-radius: 2px;
padding: 0;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
</style>
App.vue
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<UserHeader :AddTodoObj="AddTodoObj" />
<UserList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
<UserFooter />
</div>
</div>
</div>
</template>
<script>
// 引入组件
import UserHeader from "./components/UserHeader.vue";
import UserList from "./components/UserList.vue";
import UserFooter from "./components/UserFooter.vue";
export default {
name: "App",
components: { UserHeader, UserList, UserFooter },
data() {
return {
todos: [
{ id: "001", title: "打代码", done: true },
{ id: "002", title: "看电视剧", done: true },
{ id: "003", title: "洗碗", done: false },
],
};
},
methods: {
// 添加一个todo
AddTodoObj(todoObj) {
this.todos.unshift(todoObj);
// console.log("我是App组件，我收到了数据", x);
},
// 勾选or取消勾选一个todo
checkTodo(id) {
this.todos.forEach((todo) => {
if (todo.id === id) todo.done = !todo.done;
});
},
// 删除一个todo
deleteTodo(id) {
this.todos = this.todos.filter((todo) => todo.id !== id);
},
},
};
</script>
<style>
/* base */
body {
background-color: #fff;
/* margin: 0; */
}
.todo-container {
width: 600px;
margin: 0 auto;
/* background-color: antiquewhite; */
}
.todo-container .todo-wrap {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.btn {
display: inline-block;
padding: 4px 12px;
/* margin-bottom: 0; */
font-size: 14px;
/* line-height: 20px; */
/* text-align: center; */
/* vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐 方式 */
vertical-align: middle;
cursor: pointer;
box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.2),
0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.btn:focus {
/* outline: none; */
}
.btn-danger {
color: #fff;
background-color: #da4f49;
border: 1px solid #bd362f;
}
.btn-danger:hover {
color: #fff;
background-color: #bd362f;
}
</style>
