【Vue】第十部分 任务清单小案例

【Vue】第十部分 任务清单小案例

文章目录

• 【Vue】第十部分 任务清单小案例
• 10. 任务清单案例
• 总结

10. 任务清单案例

案例展示：

点击这里可以到我的github上获取源码

main.js

import Vue from "vue"
import App from "./App.vue"
Vue.config.productionTip = false   //阻止vue在生成时自动产生提示
new Vue({el: '#app',data: {},beforeCreate(){Vue.prototype.$bus = this  //绑定事件总线},render: h => h(App)
})

App.vue

<template><div class="wrapper"><MyTop @addTodo="addTodo"/><MyContent :plans="plans" /><MyBottom :plans="plans" @selectAll="selectAll" @clearTodo="clearTodo"/></div>
</template><script>import MyTop from "./components/MyTop.vue"import MyBottom from "./components/MyBottom.vue"import MyContent from "./components/MyContent.vue"export default {name:"App",components:{MyTop,MyBottom,MyContent},data(){return{// []保证在没有值的时候可以读到length的值为0plans:JSON.parse(localStorage.getItem("plan")) || []}},watch:{plans:{handler(val){localStorage.setItem("plan",JSON.stringify(val))},// 开启深层次监视，不然改对象里的属性watch检测不到deep:true}},methods:{// 添加任务addTodo(val){this.plans.unshift(val)},// 获取计划是否执行select(id){this.plans.filter((ele)=>{if(ele.id === id)return ele.complete = !ele.complete})},// 删除指定计划delTodo(id){/* filter返回的是一个全新的数组但是不会破坏原数组所以想要改变就的重新赋值*/this.plans = this.plans.filter((ele)=>{return ele.id !== id})},//全选和全不选selectAll(flag){this.plans.forEach((ele)=>{ele.complete = flag})},// 清除已经完成的任务clearTodo(){this.plans = this.plans.filter((ele)=>{return !ele.complete})},//编辑内容editData(id,value){this.plans.forEach((ele)=>{if(ele.id == id){ele.name = value}})}},mounted(){this.$bus.$on("select",this.select)this.$bus.$on("delTodo",this.delTodo)this.$bus.$on("edit",this.editData)}}
</script><style>*{padding: 0;margin: 0;}.wrapper{width: 600px;outline: 1px solid rgb(133, 133, 133) ;border-radius: 10px;margin: 100px auto;padding-top: 20px;box-sizing:border-box;}
</style>

其他的子组件我放在components文件夹中，我将其拆分成四个部分

components

—MyTop.vue //顶部

—MyItem.vue //每一条list

—MyContent.vue //包裹list

—MyBottom.vue //底部的组件

MyTop.vue

<template><div class="top-wrapper"><input type="text" placeholder="请输入需要添加的任务" @keyup.enter="addPlan" v-model="val"></div> 
</template><script>// 导入nanoid，这是个随机生成不重复值的包import { nanoid } from "nanoid"export default {name:"Top",data(){return{val:""}},methods:{addPlan(){if(this.val.trim()){   const wrapper = {id:nanoid(),name:this.val,complete:false}this.$emit("addTodo",wrapper)this.val = ""}}},}
</script>/* scoped表示该样式为该组件的样式，避免了类名冲突问题- 但是发现父子组件是没有办法避免的，因为子组件会得到父组件的类名所以没有办法解决类名冲突问题.- 该属性如果给App使用那就变成只能App所有的样式给他自己使用造成样式出现问题，所以并不适合使用*/
<style scoped>.top-wrapper{width: 550px;height: 50px;margin: 0 auto;}.top-wrapper input{width: 550px;height: 30px;font-size: 18px;outline: none;border: 1px solid black;padding-left: 8px;box-sizing: border-box;}.top-wrapper input:focus{border: 1px solid rgb(75, 75, 75);box-shadow: 0 0 4px rgb(75,75,75);}
</style>

MyItem.vue

<template><li class="it-wrapper" ><input type="checkbox" :checked = planobj.complete @click="negation"><span v-show="!planobj.isEdit">{{planobj.name}}</span><input type="text" v-show="planobj.isEdit" :value="planobj.name"@blur="cancel(planobj,$event)"ref="inp"><button class="btn" @click="del">删除</button><button class="btn1" @click="edit(planobj)">编辑</button></li>
</template><script>
export default {name:"MyItem",props:["planobj"],methods:{negation(){this.$bus.$emit("select",this.planobj.id)},del(){if(confirm("确定要删除 "+this.planobj.name +" 任务")){this.$bus.$emit("delTodo",this.planobj.id)}},edit(planobj){this.$set(planobj,"isEdit",true)this.$nextTick(function(){this.$refs.inp.focus()})},cancel(planobj,e){planobj.isEdit = falsethis.$bus.$emit("edit",planobj.id,e.target.value)}}
}
</script><style scoped>.it-wrapper{list-style: none;height: 40px;width: 550px;line-height: 40px;padding-left: 12px;border: 1px solid #bbb;border-bottom: none;box-sizing: border-box;position: relative;}.it-wrapper:hover{background-color:rgba(187, 187, 187, 0.301) ;}.it-wrapper:hover .btn,.it-wrapper:hover .btn1{display: block;}  .it-wrapper span{padding-left: 8px;font-size: 16px;}.btn,.btn1{border: none;width: 60px;height: 30px;color: aliceblue;border-radius: 5px;position: absolute;outline: none;background-color: #f04b4b;top: 50%;right:3px;transform: translateY(-50%);display: none;}.btn:hover{background-color: #cc4040;  }.btn1:hover{background-color: rgb(43, 173, 224);}.btn1{background-color: rgb(41, 194, 255);right: 75px;}</style>

MyContent.vue

<template><div class="con-wrapper"><MyItem v-for="planobj in plans" :key="planobj.id" :planobj="planobj"  /> </div>
</template><script>
import MyItem from "./MyItem.vue"
export default {name:"MyContent",components:{MyItem},props:["plans"]
}
</script><style scoped>.con-wrapper{width: 550px;margin: 0 auto;}
</style>

总结

以上就是今天要讲的内容，大家也可以亲自动手写一写！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！