todolist(day_04)
程序员文章站
2024-02-10 09:28:34
...
总结:添加遗漏的footer并将其置于页面底部,添加todolist的完成按钮并绑定事件
1.main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import header from './components/header'
import footer from './components/footer'
Vue.config.productionTip = false
Vue.component('app-header',header)
Vue.component('app-footer',footer)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
2.APP.vue
<template>
<div id="app">
<app-header></app-header>
<todo :addSomething="addSomething"
:selectTime="selectTime"
:list="list"
:timeList="timeList"
@childUpdate='parentUpdate'
>
</todo>
<done :doneThing="doneThing"
>
</done>
<app-footer></app-footer>
</div>
</template>
<script>
import todo from './components/todo';
import done from './components/done';
export default {
name: 'App',
components: {
todo,
done
},
data(){
return{
addSomething:"",
selectTime:"",
list:[],
timeList:['8:00-9:00','9:00-10:00','10:00-11:00','11:00-12:00','12:00-13:00'],
doneThing:[]
}
},
methods:{
// parentAdd(){
// this.$refs['add'].add()
// },
parentUpdate: function(list){
// console.log(doneThing)
this.doneThing.push(list)
// console.log(this.list)
}
}
}
</script>
<style scoped>
html,body {
margin: 0;
padding: 0;
height: 100%;
background: #ccc;
}
#app {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
padding-bottom: 50px;
margin:0 auto;
text-align: center;
background: #ccc;
box-sizing: border-box;
overflow: hidden;
}
</style>
3.todo.vue
<template>
<div class="todo">
<select id="selectTime" v-model="currentTime" required>
<option value="" selected>选择时间</option>
<option v-for='item in timeList' :key=item.id>{{ item }}</option>
</select>
<input id="doSomething" type="text" v-model="currentSomething" required="required" placeholder="do something..."/><button @click="add">提交</button>
<br>
<h1>ToDoList</h1>
<ul>
<li id="something" v-for='(value,index) in list' :key=index >
({{ index+1 }}){{ value.time }} {{ value.thing }}
<button id="update" @click="update(index)">完成</button>
</li>
<!-- <li v-for=' in list' ></li> -->
</ul>
</div>
</template>
<script>
export default {
props:['addSomething','selectTime','list','timeList','doneThing'],
// name: 'todo'
data(){
return{
currentSomething: this.addSomething,
currentTime: this.selectTime
}
},
methods:{
add:function(){
if(this.currentTime == "" && this.currentSomething == ""){
alert("Select Time & Input Something!")
}
else if(this.currentTime == ""){
alert("Select Time!")
}
else if(this.currentSomething == "" ){
alert("Input Something!")
}
else{
// alert('startpush');
this.list.push({time: this.currentTime, thing: this.currentSomething});
this.currentSomething='';
this.currentTime=""
// alert('finishpush');
}
},
update:function(index){
//1.赋给完成事项
// alert('startupdate');
// this.doneThing.push(this.list[index])
this.$emit("childUpdate",this.list[index])
//2.移除待办事项
this.list.splice(index,1)
// console.log(this.list)
alert('Well Done!')
},
}
}
</script>
<style scoped>
.todo {
width: 400px;
margin: 0 auto;
}
button {
height: 32px;
margin-left: 5px;
margin-right: 5px;
border-radius: 3px;
background-color: #fff;
}
ul {
padding-inline-start: 0px;
}
#update {
float: right;
}
#selectTime {
height: 32px;
border-radius: 3px;
}
#doSomething {
height: 25px;
border-radius: 3px;
}
#something {
display: inline-block;
height: 34px;
width: 400px;
line-height: 34px;
text-align: left;
padding-left: 1em;
margin-bottom: 10px;
list-style-type: none;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
background-color:#fff;
overflow: auto;
}
</style>
4.footer.vue
<template>
<div id="footer">
<h5>{{ copyright }}</h5>
</div>
</template>
<script>
export default {
name:'app-footer',
data(){
return{
copyright:"[email protected]"
}
}
}
</script>
<style scoped>
#footer {
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background-color:grey;
}
</style>
上一篇: 第一节课-checkpoint
下一篇: day_04