欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 }}&nbsp;&nbsp;&nbsp;{{ 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