VUE框架CLI组件化实现清除已选中的两种实现方式------VUE框架

原创

旧约Alatus 2024-05-05 16:40:24 博主文章分类：前端 ©著作权

文章标签 数组 3c App 文章分类 Vue.js 前端开发 在51CTO的第一篇博文

©著作权归作者所有：来自51CTO博客作者旧约Alatus的原创作品，请联系作者获取转载授权，否则将追究法律责任

<template>
    <div class="footer">
        <button @click="clean()" class="small red button">清除已解决</button>
        <h3>当前BUG总量{{ bugList.length }}个,已解决{{ resolvedCount }}个</h3>
    </div>
</template>
 
<script>
export default {
    name : "BugFooter",
    data(){
        return {
            TNumber : 0,
            SNumber : 0
        }
    },
    methods : {
        clean(){
            // 第一种方式
            // this.bugList.forEach((bug) => {
            //     if(bug.resolved === true){
            //         this.deleteByIdCallBack(bug.id); 
            //     }
            // });
            // 第二中方式
            this.cleanResolved();
        }
    },
    props : ["bugList","deleteByIdCallBack","cleanResolved"],
    computed : {
        resolvedCount(){
            // 这种是普通的计数器方式实现
            // let count = 0;
            // this.bugList.forEach((bug) => {
            //     if(bug.resolved === true){
            //         count++;
            //     }
            // });
            // return count;
            // 使用ES6数组的reduce方式对数组条件进行统计
            // 回调函数的调用次数和元素数量有关
            const count = this.bugList.reduce((a,b) => {
                return a + (b.resolved ? 1 : 0);
            },0);
            return count;
        }
    }
}
</script>
 
<style scoped>
/* footer */
.footer{
	margin-top: 10px;
}
.footer span{
	font-size: 12px;
}
</style>

<template>
    <div>
        <BugHeader :bugList="bugList" :saveBugCallBack="saveBugCallBack"></BugHeader>
        <BugList :selectAllRollback="selectAllRollback" v-show="bugList.length" :bugList="bugList" :modifyResolvedCallBack="modifyResolvedCallBack" :deleteByIdCallBack="deleteByIdCallBack"></BugList>
        <BugFooter :cleanResolved="cleanResolved" v-show="bugList.length" :bugList="bugList" :deleteByIdCallBack="deleteByIdCallBack"></BugFooter>
    </div>
</template>
 
<script>
import BugHeader from "./components/BugHeader.vue";
import BugList from "./components/BugList.vue";
import BugFooter from "./components/BugFooter.vue";
export default {
    name : "App",
    components : {BugHeader,BugList,BugFooter},
    data(){
        return {
            bugList : [
                {id : 1,desc : "Bug描述信息100",resolved : true},
                {id : 2,desc : "Bug描述信息200",resolved : false},
                {id : 3,desc : "Bug描述信息300",resolved : true},
            ]
        }
    },
    methods : {
        // 因为我们不能直接动props的数据
        // 那我们就传递一个方法过去进行修改
        saveBugCallBack(bug){
            this.bugList.unshift(bug);
        },
		// 一键全选或反选
		selectAllRollback(checked){
			this.bugList.forEach((bug) => {
				bug.resolved = checked;
			});
		},
		// 修改选中状态
        modifyResolvedCallBack(id)
        {
            this.bugList.forEach((bug) => {
                if(bug.id === id){
                    bug.resolved = !bug.resolved;
                }
            });
        },
		// 删除数组的元素
		deleteByIdCallBack(id)
        {
            this.bugList = this.bugList.filter((bug) => {
				return bug.id !== id;
			});
        },
		// 清除以选中
		cleanResolved(){
			this.bugList =  this.bugList.filter((bug) => {
				return bug.resolved === false;
			});
		}
    }
}
</script>
 
<style>
.button{
	display: inline-block inline;
	zoom: 1;
	padding: 6px 20px;
	margin: 0;
	cursor: pointer;
	border: 1px solid #bbb;
	overflow: visible;
	font: bold 13px arial, helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	color: #555;
	background-color: #ddd;
	background-image: -webkit-gradient(linear, to right top, to right bottom, form(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
	-webkit-transition: background-color .2s ease-out;
	-moz-transition: background-color .2s ease-out;
	-ms-transition: background-color .2s ease-out;
	-o-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
	background-clip: padding-box; /* Fix bleeding */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	text-shadow: 0 1px 0 rgba(255,255,255, .9);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.button:active{
	background: #e9e9e9;
	position: relative;
	top: 1px;
	text-shadow: none;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.button.red{
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
	background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.button.red{
	background-color: #ca3535;
	border-color: #c43c35;
}
.button.red:hover{
	background-color: #ee5f5b;
}
.button.red:active{
	background: #c43c35;
}
.button.green{
	background-color: #57a957;
	border-color: #57a957;
}
.button.green:hover{
	background-color: #62c462;
}
.button.green:active{
	background: #57a957;
}
</style>