526互联

老杜Vue的Bug列表实战代码

发布时间 2023-08-20 19:51:51作者: 不吃jiumi女孩

老杜Vue的Bug列表实战代码

谢谢杜老师的vue教学视频，说的真的好好

各位亲爱的小伙伴，如果不能使用代码，请给我留言哈。

1、效果图

2、html代码（我自己写的，和杜老师的有些不同，不要纠结哈，基本是没错的）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>注册页面</title>
        <style>
            .{
                margin: 0;
                padding: 0;
            }
            button{
                border-radius: 5px;    
                padding: 10px 30px;
                font-weight: 600;
            }
            button:hover{
                cursor: pointer;
            }
            /* bugHeader */
            .Header_input {
                border-radius: 10px;
                padding-left: 10px;
            }
            .Header_button{
                background-color: pink;
            }
            /* List */
            .List{
                border: black 1px solid;
                border-collapse: collapse;
            }
            .List thead{
                background-color: slateblue;
                border: black 1px solid;
            }
            .List thead th{
                border: black 1px solid;
                color: white;
            }
            
            
            .List tbody tr{
                border: black 1px solid;
            }
            .List tbody tr td{
                border: black 1px solid;
                text-align: center;
                line-height: 40px;
            }
            .List button{
                background-color: crimson;
                color: white;
            }
            /* fooler */
            .fooler{
                background-color: crimson;
                color: white;
            }
            .one{
                width: 400px;
            }
        </style>
    </head>
    <body>
        <!-- BUGHeader -->
        <textarea  class="Header_input" cols="70" rows="5" placeholder="请输入BUG描述信息"></textarea><br>
        <button class="Header_button">保存</button>
        <!-- BugList -->
        <table class="List"">
            <thead>
                <th>全选</th>
                <th class="one">bug描述</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="bugs"></td>
                    <td>xxxxxxxx</td>
                    <td><button>删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="bugs"></td>
                    <td>xxxxxxxx</td>    
                    <td><button>删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="bugs"></td>
                    <td>xxxxxxxx</td>
                    <td><button>删除</button></td>
                </tr>
            </tbody>
        </table>
        <br>
        <!-- BugFooler -->
        <button class="fooler">清楚已解决</button>当前BUG总量2个，已解决1个
    </body>
</html>

App组件代码

<template>
    <div>
        <BugHeader :saveBugCallback="saveBugCallback"></BugHeader>
        <BugList :bugList="bugList" :modifyResolved="modifyResolved" :deleteById="deleteById" :selectAllCallBack="selectAllCallBack" :updateDescCallBack="updateDescCallBack"></BugList>
        <BugFooter :bugList="bugList" :clearResolvedCallBack="clearResolvedCallBack"></BugFooter>
    </div>
  </template>
  
  <script>
import BugHeader from './components/BugHeader.vue'
import BugList from './components/BugList.vue'
import BugFooter from './components/BugFooter.vue'
  export default {
    components:{
        BugHeader,BugList,BugFooter
    },
    data(){
        return{
            bugList:[
                {id:'001',desc:'Bug描述信息100',resolved:false},
                {id:'002',desc:'Bug描述信息2',resolved:true},
                {id:'003',desc:'Bug描述信息3',resolved:false}
            ]
        }
    },
    methods:{
        saveBugCallback(bug){
            //保存bug对象的回调方法
            this.bugList.unshift(bug)
        },
        //改变多选框状态
        modifyResolved(bugId){
            this.bugList.forEach((bug)=>{
                if(bug.id == bugId){
                    bug.resolved = !bug.resolved
                }
            })
        },
        //移除数据
        deleteById(BugId){
            this.bugList = this.bugList.filter((bug)=>{
                return bug.id !== BugId
            })
        },
        //全选
        selectAllCallBack(e){
            this.bugList.forEach((bug)=>{
                bug.resolved = e
            })
        },
        //删除选中的
        clearResolvedCallBack(){
            this.bugList = this.bugList.filter((bug)=>{
                return bug.resolved == false
            })
        },
        //更新bug描述
        updateDescCallBack(bugId,newDesc){
            this.bugList.forEach((bug)=>{
                if(bug.id == bugId){
                    bug.desc = newDesc
                    // this.editState = false
                }

            })
        }
    }
  }
  </script>
  
  <style>
        . {
            margin: 0;
            padding: 0;
        }
        button{
            border-radius: 5px;    
            padding: 10px 30px;
            font-weight: 600;
        }
        button:hover{
            cursor: pointer;
        }
  </style>

BugHeader组件代码





<template>


  <div>


    <textarea  v-model="desc" class="Header_input" cols="100" rows="5" placeholder="请输入BUG描述信息" @keydown.enter="saveBug"></textarea><br>


    <button class="Header_button" @click="saveBug" >保存</button>


    <br><br>


  </div>


</template>




<script>


export default {


  name:'BugHeader',


  data(){


    return {


      desc:''


    }


  },


  props:['saveBugCallback'],


  methods:{


    saveBug(){


      console.log(this.desc)


      //创建bug对象


      let bugObj = {id:Date.now(),desc:this.desc,resolved:false}


      //添加到bugList数组当中


      if(bugObj.desc != ''){


        this.saveBugCallback(bugObj)


      }


    }


  }


}


</script>





<style scoped>


  .Header_input {


    border-radius: 10px;


    padding-left: 10px;


  }


  .Header_button{


    background-color: pink;


  }


</style>









 BugList组件代码








<template>


    <div v-show="bugList.length">


        <table class="List">


            <thead>


                <th>全选<input type="checkbox" :checked="isAll" @change="selectAll"></th>


                <th class="one">bug描述</th>


                <th>操作</th>


            </thead>


            <tbody>


                    <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug" :modifyResolved="modifyResolved" :deleteById='deleteById' :updateDescCallBack="updateDescCallBack"></BugItem>


            </tbody>


        </table>


        <br>


    </div>


  </template>


 


  <script>


  import BugItem from './BugItem.vue'


  export default {


    components:{BugItem},


    props:['bugList','modifyResolved','deleteById','selectAllCallBack','updateDescCallBack'],


    computed:{


        resolvedCount(){  


            const count = this.bugList.reduce((a,b)=>{


                return a + ( b.resolved? 1 : 0 )


            },0)


            return count


        },


        isAll(){


            return this.bugList.length === this.resolvedCount && this.bugList.length != 0


        }


    },


    methods:{


        selectAll(e){


            this.selectAllCallBack(e.target.checked)


        }


    }


  }


  </script>


 


  <style scoped>


  .List{


        border: black 1px solid;


        border-collapse: collapse;


    }


    .List thead{


        background-color: slateblue;


        border: black 1px solid;


    }


    .List thead th{


        border: black 1px solid;


        color: white;


    }


  </style>




 




 


BugItem代码




<template>
        <tr>
            <td><input type="checkbox" name="bugs" :checked="bug.resolved" @click="modifyRes(bug.id)"></td>
            <td>
                <span v-show="!bug.editState" class="desc" @click="enterEdit">{{ bug.desc }}</span>
                <input v-show="bug.editState" ref="inputDesc" type="text" :value="bug.desc" @blur="updateDesc">
            </td>
            <td><button @click="delById(bug.id)">删除</button></td>
        </tr>
  </template>
  
  <script>
  
  export default {
    name:'BugItem',
    props:['bug','modifyResolved','deleteById','updateDescCallBack'],
    methods:{
        modifyRes(bugId){
            this.modifyResolved(bugId)
        },
        delById(bugId){
            this.deleteById(bugId)
        },
        enterEdit(){
            //往bug列表中添加一个新的属性
            if(this.bug.hasOwnProperty('editState')){
                this.bug.editState = true
            }else{
                this.$set(this.bug,'editState',true)
            }
            this.$refs.inputDesc.focus()
            //获取文本框，并且让文本框获取到焦点
            //第一种方案
            // setTimeout(()=>{
            //     this.$refs.inputDesc.focus()
            // },1000)
            //第二种方案【使用Vue提供好的API就行了】
            //非常重要：next方法会绑定一个回调函数，这个回调函数在
            // 什么时候执行？在下一个DOM全部渲染完毕之后被调用
            this.$nextTick(function(){
                this.$refs.inputDesc.focus()
            })
        },
        updateDesc(e){
            //获取最新的描述信息
            let newDesc = e.target.value.trim()
            if(!newDesc)return
            this.updateDescCallBack(this.bug.id,newDesc)
            this.bug.editState = false
        }
    }
  }
  </script>
  
  <style scoped>
  .List tbody tr{
        border: black 1px solid;
    }
    .List tbody tr td{
        border: black 1px solid;
        text-align: center;
        line-height: 40px;
    }
    .List button{
        background-color: crimson;
        color: white;
    }
    .desc{
        cursor: pointer;
    }
  </style>




BugFooter代码




<template>
    <div v-show="bugList.length">
        <button class="fooler" @click="clearResolved">清除已解决</button>
        <span>当前BUG总量{{bugList.length}}个，已解决{{resolvedCount}}个</span>
    </div>
  </template>
  
  <script>
  export default {
    props:['bugList','clearResolvedCallBack'],
    computed:{
        resolvedCount(){
            // 采用普通计数器的方式
            // let count = 0
            // this.bugList.forEach((bug)=>{
            //     if(bug.resolved){
            //         count++
            //     }
            // })
            // return count

            //使用ES6数组的reduce方法进行对数组条件的统计
            //this.bugList.reduce(回调函数，统计起点)
            //统计起点从0开始
            //回调函数有两个参数：a,b
            //回调函数的调用次数和数组中元素总数有关系。数组中有三个元素，则这个回调函数被调用3次
            //a是什么？a是上一次回调函数调用之后的返回值
            //b是什么？当前被统计的对象
            const count = this.bugList.reduce((a,b)=>{
                return a + ( b.resolved? 1 : 0 )
            },0)
            return count
        }
    },
    methods:{
            clearResolved(){
                this.clearResolvedCallBack()
            }
        }
  }
  </script>
  
  <style scoped>
  .fooler{
        background-color: crimson;
        color: white;
    }
    .one{
        width: 400px;
    }
  </style>