Compare commits

...

2 Commits

2 changed files with 188 additions and 204 deletions

View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-10-21 16:39:27 * @Date: 2022-10-21 16:39:27
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-10-23 15:26:59 * @LastEditTime: 2022-10-30 23:50:04
* @FilePath: \car_dealer\css\todo-list\to-list.css * @FilePath: \car_dealer\css\todo-list\to-list.css
* @Description: 用于待办事项页面的css * @Description: 用于待办事项页面的css
* *
@ -85,9 +85,14 @@ hr {
.todo_list::-webkit-scrollbar { .todo_list::-webkit-scrollbar {
width: 0.75rem; width: 0.75rem;
cursor: pointer;
/* height: 100px; */ /* height: 100px; */
} }
.todo_list::-webkit-scrollbar-thumb {
cursor: pointer;
}
.todo_list:hover::-webkit-scrollbar-thumb { .todo_list:hover::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px var(--scrollbar-track-color); -webkit-box-shadow: inset 0 0 5px var(--scrollbar-track-color);

View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-10-21 16:36:51 * @Date: 2022-10-21 16:36:51
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-10-25 14:21:00 * @LastEditTime: 2022-10-31 00:13:22
* @FilePath: \car_dealer\vue\todo-list.html * @FilePath: \car_dealer\vue\todo-list.html
* @Description: * @Description:
* *
@ -10,6 +10,7 @@
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -36,11 +37,7 @@
<h1>{{title}}</h1> <h1>{{title}}</h1>
<div class="border"> <div class="border">
<div class="add_todo"> <div class="add_todo">
<input <input type="text" v-model="todo_text" placeholder="请输入待办事项" />
type="text"
v-model="todo_text"
placeholder="请输入待办事项"
/>
<button type="button" @click="showMessageBox()"> <button type="button" @click="showMessageBox()">
添加 添加
</button> </button>
@ -48,20 +45,10 @@
<hr /> <hr />
<div class="todo_list"> <div class="todo_list">
<div v-for="(item,index) in todo_list" :key="index"> <div v-for="(item,index) in todo_list" :key="index">
<input <input type="checkbox" v-model="todo_list[index].selected" />
type="checkbox"
v-model="todo_list[index].selected"
/>
<span v-show="!item.edit">{{item.todo_text}}</span> <span v-show="!item.edit">{{item.todo_text}}</span>
<input <input type="text" v-show="item.edit" v-model="item.todo_text" />
type="text" <button type="button" v-on:click="editTodo(index,event)">
v-show="item.edit"
v-model="item.todo_text"
/>
<button
type="button"
v-on:click="editTodo(index,event)"
>
修改 修改
</button> </button>
<button type="button" @click="removeTodo(index)"> <button type="button" @click="removeTodo(index)">
@ -84,8 +71,7 @@
title: "待办任务", title: "待办任务",
errorMessage: "奇怪的错误!", errorMessage: "奇怪的错误!",
todo_text: "", todo_text: "",
todo_list: [ todo_list: [{
{
selected: false, selected: false,
todo_text: "回家", todo_text: "回家",
edit: false, edit: false,
@ -208,19 +194,12 @@
const message = document.getElementById("message_border"); const message = document.getElementById("message_border");
message.style["display"] = "none"; message.style["display"] = "none";
}, }
},
computed: {
buttonText(edit) {
return edit ? 修改 : 保存;
},
},
mounted() {
console.log("挂载完成!");
}, },
}; };
const vm = Vue.createApp(app); const vm = Vue.createApp(app);
vm.mount("#app"); vm.mount("#app");
</script> </script>
</html> </html>