【Vue笔记】仿`Teambition`手写`task-panel`----组装

时间：2023-03-31 15:06:05 vue.js

简介已经编写了构成任务面板的组件。这就是每个组件的处理方式。下拉接口active向上传递给toggletoggle-menu，参数actioncreator接口active向上传递toggleditor接口active向上submit，参数inputTextcancelcard接口donecontent向上传递实现toggle组件自接口1.title表示标题2.tasks表示task-panel中所有卡片的内容基本结构{{title}}{{car??ds.length}}

Componentstyle设计要求整体布局采用flex方向，垂直固定整体宽度。在div.head部分，确保内容分布在两侧。任务面板{显示：flex；弹性方向：列；宽度：272px;}.head{显示：flex;对齐项目：居中；justify-content:space-between;}处理每个组件1.设置接口默认值props:{title:{type:String,default:'hello',},tasks:{type:Array,default:function(){return[{content:'helloworld',},{content:'fuckyou',},{content:'holyshit',},]}},},2.控制各组的显示data(){return{dropDownActive:false,editorActive:false,cards:this.tasks.slice(),}},3.处理各组件的事件methods:{toggleDropDown(){this.dropDownActive=!this.dropDownActive},toggleMenu(action){/*TODO匹配动作*/if(action=='edit'){this.$emit('modify')}elseif(action=='add'){this.$emit('add-panel')}elseif(action=='delete'){this.$emit('delete')}this.dropDownActive=false},toggleCreator(){console.log('togglecreator')this.editorActive=true},appendCard(inputText){varcard={content:inputText}this.cards.unshift(card)/*this.cancelEditor()*/},cancelEditor(){/*STUB*/console.log('取消编辑器')this.editorActive=false},toggleCard(isdone,index){/*STUB*/if(isdone){varcard=this.donecards[index]this.cards.unshift(card)this.donecards.splice(index,1)}else{varcard=this.cards[index]this.donecards.push(card)this.cards.splice(index,1)}},},大功告成

上一篇：Vue.js设计与实现学习总结（第4章5）调度执行_0

下一篇：前端周刊第一期

【Vue笔记】仿`Teambition`手写`task-panel`----组装相关文章