0
点赞
收藏
分享

微信扫一扫

VUE框架CLI组件化动态三层传递实现全选和取消全选------VUE框架

罗蓁蓁 22小时前 阅读 2
数组3c数据Vue.js前端开发ChatGPT初体验

<template>
    <div>
        <BugHeader :bugList="bugList" :saveBugCallBack="saveBugCallBack"></BugHeader>
        <BugList :selectAllRollback="selectAllRollback" v-show="bugList.length" :bugList="bugList" :modifyResolvedCallBack="modifyResolvedCallBack" :deleteByIdCallBack="deleteByIdCallBack"></BugList>
        <BugFooter v-show="bugList.length" :bugList="bugList"></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;
			});
        }
    }
}
</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>

<template>
    <div>
        <textarea cols="105" rows="4" v-model.lazy="desc" placeholder="请输入BUG的描述信息"></textarea>
        <br>
        <button @click="saveBug()" class="small green button">保存</button>
    </div>
</template>
 
<script>
export default {
    name : "BugHeader",
    data(){
        return {
            desc : ""
        }
    },
    methods : {
        saveBug()
        {
            if(this.desc.trim() != ""){
                // 获取信息
                let id = this.bugList.length + 1;
                // 创建Bug对象
                let Bug = {id : id,desc : this.desc,resolved : false};
                // 添加到bugList数组中
                // 不行,不能修改props
                // this.bugList.unshift(Bug);
                this.saveBugCallBack(Bug);
                this.desc = "";
            }    
        }
    },
    props : ["saveBugCallBack","bugList"]
}
</script>
 
<style scoped>
/* header */
.header {
	margin-bottom: 20px;
	margin-top: 20px;
}
</style>

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th class="c1">全选<input type="checkbox" v-model="All"/></th>
                    <th>bug描述</th>
                    <th class="c2"></th>
                </tr>
            </thead>
            <tbody>
                <BugItem v-for="bug in bugList" :key="bug.id" :bug="bug" :deleteByIdCallBack="deleteByIdCallBack" :modifyResolvedCallBack="modifyResolvedCallBack"></BugItem>
            </tbody>
        </table>
    </div>
</template>
 
<script>
import BugItem from "./BugItem.vue";
export default {
    name : "BugList",
    components : {BugItem},
    props : ["bugList","modifyResolvedCallBack","deleteByIdCallBack","selectAllRollback"],
    methods : {
        // selectAll(e){
        //     // console.log(e.target.checked);
        //     this.selectAllRollback(e.target.checked);
        // }
    },
    computed : {
        count(){
            let count = 0;
            this.bugList.forEach((bug) => {
                if(bug.resolved === true){
                    count++;
                }
            });
            return count;
        },
        All : {
            get(){
                return this.bugList.length === this.count && this.bugList.length > 0;
            },
            set(value){
                this.selectAllRollback(value);
            }
        }
    }
}
</script>
 
<style scoped>
/* list */
table{
	width: 760px;
	border-collapse: collapse;
}
table caption{
	font-size: 1em;
	font-weight: bold;
	margin: 1em 0;
}
.c1,.c2{
	width: 100px;
}
th {
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
table thead tr{
	background-color: #008c8c;
	color: #fff;
}
</style>

<template>
    <tr>
            <td><input type="checkbox" :checked="bug.resolved" @change="$event => modifyResolved(bug.id)"></td>
            <!-- <td><input type="checkbox" v-model="bug.resolved"></td>尽管没报错,但是props的数据不建议修改 -->
            <td>{{ bug.desc }}</td>
            <td><button class="samll red button" @click="$event => deleteById(bug.id)">删除</button></td>
    </tr>
</template>
 
<script>
export default {
    name : "BugItem",
    props : ['bug',"modifyResolvedCallBack","deleteByIdCallBack"],
    methods : {
        modifyResolved(id){
            this.modifyResolvedCallBack(id);
        },
        deleteById(id){
            this.deleteByIdCallBack(id);
        }
    }
}
</script>
 
<style scoped>
/* item */
table tbody tr:nth-child(odd){
	background-color: #eee;
}
table tbody tr:hover{
	background-color: #ccc;
}
table tbody tr td:first-child{
	color: #f40;
}
td{
	border: 1px solid #999;
	text-align: center;
	padding: 5px 0;
}
.desc {
    cursor: pointer;
}
</style>

<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(){
 
        }
    },
    props : ["bugList"],
    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>

举报

相关推荐

VUE框架CLI组件化动态列表实现------VUE框架

3cAppf5Vue.js前端开发聊一聊WuKong编辑器

实现表格全选和取消全选功能

javascript

VUE框架CLI组件化全局事件总线实现原理------VUE框架

User自定义事件回调函数Vue.js前端开发爱心代码表白

VUE框架CLI组件化列表信息完整功能实现------VUE框架

3c数据f5Vue.js前端开发聊一聊WuKong编辑器

VUE框架CLI组件化配置Router使用params传递参数机制解析------VUE框架

ci数据字符串拼接Vue.js前端开发爱心代码表白

VUE框架CLI组件化组件的自定义事件和子组件向父组件传递数据的实现------VUE框架

User自定义事件回调函数Vue.js前端开发技术人为什么要写博客？

【无标题】实现表格全选和取消全选功能

javascript

VUE框架CLI组件调用天气接口实现天气界面动态实现------VUE框架

VueciAppVue.js前端开发在51CTO的第一篇博文

VUE框架CLI组件调用天气接口实现天气界面动态实现和完整工程------VUE框架

VueciAppRedis数据库技术人为什么要写博客？

VUE框架CLI组件化VueX实现多组件数据共享效果实现------VUE框架

VueUserAppVue.js前端开发在51CTO的第一篇博文
0 条评论