首页 > 其他分享 >老杜Vue的Bug列表实战代码

老杜Vue的Bug列表实战代码

时间：2023-08-20 19:55:53浏览次数：40  
标签：Vue bugList color List bug 老杜 border Bug desc

老杜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>



 



标签：Vue,bugList,color,List,bug,老杜,border,Bug,desc	

From： https://www.cnblogs.com/buchijiuminvhai/p/17644483.html
      

      




      

      

        
相关文章

        

          
    
 
  • vue生命周期
    Vue的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。1、beforeCreate（创建前）表示实例完全被创建出来之前，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。2、created（创建后）数据对象data已存在，可以调用methods中的方法，操作data中的数......
     
  • Vuex有哪几种属性？
    有五种，分别是State、Getter、Mutations、Actions、Modulesstate=>基本数据(数据源存放地)getters=>从基本数据派生出来的数据mutations=>提交更改数据的方法，是同步操作actions=> 用于异步操作和提交mutations，在actions中可以进行任何异步操作，最后再提交到mutations中......
     
  • Vue-Router 的懒加载如何实现
    非懒加载：importListfrom'@/components/list.vue'constrouter=newVueRouter({routes:[{path:'/list',component:List}]}) 懒加载：1.使用箭头函数+import动态加载constList=()=>import('@/components/list.vue')constroute......
     
  • Vue CLI脚手架
    1、node_modules依赖包①我们通过项目终端输入npmi，就会生成该依赖包，依赖包会自动根据package.json文件中所有需要的东西进行封装下载，例如：jquery，vue2等等②该依赖包因为承载项目的所有内容，在项目大的时候其所占内存也会很大。③在项目传发时，依赖包是可以删除的，他人只需要输入npmi，......
     
  • Vue基础语法
    一、插槽1、格式放在子组件<slot>内容</slot>2、内容可以放任何模块的代码3、原理父组件引用时，填写内容会被应用到插槽css模块<style>.box{width:200px;height:200px;background-color:aqua;float:left;margin-right:20px;......
     
  • vuepress  安装报错问题
    关于vuepress部署出现样式的问题及解决6月前作者：我yi癫狂分类： 博客文章阅读(35)原文违法举报 目录vuepress部署出现样式问题vuepress个人博客部署遇到的一些问题1、js和css出现404问题2、每次都要重复操作打包、运行、上传github很麻烦怎么办？3、github.io无法打开怎......
     
  • vue-
    插槽slots 传html结构，父传子slot父组件子组件渲染作用域插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。具名插槽  插槽：子组件传给父组件数据，父组件传回子组件父子组件生命周期生命周期函数创建期：beforeCreate  create......
     
  • 前端vue自定义柱形图 选中更改柱形图颜色及文字标注颜色
    随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率......
     
  • 前端Vue自定义等分底部菜单导航按钮 自适应文字宽度 可更改组件位置
    随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率......
     
  •  bug之safari输入框
    目录前言排查发解决方案前言在开发中发现一个Safari才会有的bug，文本输入框中会显示密码框才有的钥匙图标......
     
    •            
          

        

      

    

    

      
赞助商

      




      

      
阅读排行

      

        
      

    

  





  
 
    
网站主页关于我们联系我们网站地图 

    
本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。 

    
Copyright © 2020-2023  IPS99  版权所有 IPS99