前端重于积累,下次使用不迷路。
纯vue代码
话不多说,直接上效果图:
源码附上:
<template>
<div class="bgBody">
<!-- 卡片-->
<el-row :gutter="12" >
<el-col :span="8" >
<el-card shadow="hover" class="bgRow">
<!-- 电影清单 -->
<h2 style="margin-right: 200px;line-height: initial;"><strong style="font-weight: 10;color: #3f8b5c;">想看的电影:</strong>
<input style="background-color: rgb(75,76,82);border: none;border-radius: 5px;height: 20px;color: rgb(200,200,200)"
type="text" v-model="inputValue" @keydown.enter="submit"></h2>
<h2 style="font-weight: 10;color: #b68a26; line-height: initial; margin-right: 410px">想看:({{noLength}})</h2>
<h3 class="xiangKan">
<ul>
<li v-for="(item,index) in todoList" :key="index" v-show="!item.done">
<input type="checkbox" @click.prevent="change(item,true)">
<span v-if="index!=updateIndex" @dblclick="update(item,index)" style="font-weight: 10;">{{item.title}}</span>
<input v-if="index==updateIndex"
type="text"
v-model="item.title"
@keydown.enter="updateSave"
@keydown.esc="backData(item)"
@blur="updateSave"
v-focus
style="background-color: rgb(75,76,82);border: none;border-radius: 5px;height: 20px;color: rgb(200,200,200)"
>
<span class="del-btn" @click="del(index)">×</span>
</li>
</ul>
</h3>
<h2 style="font-weight: 10;color: #959595;line-height: initial; margin-right: 380px" >已看完:({{yesLength}})</h2>
<h3 class="yiKan">
<ul >
<li v-for="(item,index) in todoList" :key="index" v-show="item.done">
<input type="checkbox" checked @click.prevent="change(item,false)">
<span v-if="index!=updateIndex" @dblclick="update(item,index)"style="font-weight: 10;">{{item.title}}</span>
<input v-if="index==updateIndex"
type="text"
v-model="item.title"
@keydown.enter="updateSave"
@keydown.esc="backData(item)"
@blur="updateSave"
v-focus
style="background-color: rgb(75,76,82);border: none;border-radius: 5px;height: 20px;color: rgb(200,200,200)"
>
<span class="del-btn" @click="del(index)">×</span>
</li>
</ul>
</h3>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "TODO",
data() {
return {
inputValue: "", // 输入框的值
todoList: [], // 数据
updateIndex: -1, //要修改的元素下标
tempValue: "" //临时保存信息的变量
}
},
created() {
// 初始化数据
let todoList = localStorage.todoList;
if (todoList) {
this.todoList = JSON.parse(todoList)
}
},
computed: {
noLength() { // 计算未完成的元素长度
let count = 0
this.todoList.map(item => {
if (!item.done) {
count++
}
})
return count
},
yesLength() { // 计算已完成的元素长度
let count = 0
this.todoList.map(item => {
if (item.done) {
count++
}
})
return count
}
},
methods: {
submit() {
// 提交
this.todoList.push({
title: this.inputValue,
done: false
})
// 置空输入框
this.inputValue = ""
//同步
this.save();
},
change(item, checked) {
// 点击复选框,改变完成状态
if (checked) {
item.done = true
} else {
item.done = false
}
this.save();
},
update(item, index) {
// 把元素的内容临时保存到一个变量中
this.tempValue = item.title
// 设置要修改元素的下标
this.updateIndex = index
},
updateSave() {
// 修改后保存
this.save()
// 还原数据
this.updateIndex = -1
this.tempValue = ""
},
backData(item) {
// 按esc键还原,设置当前元素的内容为保存的临时变量值
item.title = this.tempValue
// 清除要修改的元素下标
this.updateIndex = -1
// 清除临时变量
this.tempValue = ""
},
del(index) {
// 根据下标删除元素
this.todoList.splice(index, 1)
this.save()
},
save() {
//同步数据
localStorage.todoList = JSON.stringify(this.todoList)
}
},
directives: { // 自定义指令
focus: {
inserted(el) {
el.focus()
}
}
}
}
</script>
<style scoped>
.del-btn{
margin-left:20px;
font-size:16px;
color:red;
cursor:pointer;
}
.xiagnKan ul{
list-style: none;
padding: 0;
margin: 0;
color: rgb(130,130,130);
}
.xiangKan ul li{
line-height: 30px;
color:darkgoldenrod;
}
.yiKan ul{
list-style: none;
padding: 0;
margin: 0;
color: rgb(130,130,130);
}
.yiKan ul li{
line-height: 30px;
color: rgb(130,130,130);
}
.bgRow{
background: rgb(45,46,52);
border: none;
}
.bgBody div{
margin-left: calc(50% - 300px);
}
</style>
More than a favor for you!
对你何止一句钟意。