[Vue笔记] 仿照`Teambition`手写`task-panel` ---- 组件篇

Introduction

今天小试牛刀，试着写一个task-panel，不过涉及的组件有点多，先写好组件部分，再把他们拼装成task-panel

设计需求

结构说明

1. 组件由三个div模块组成，分别为head, operator和card-grid
2. head由标题，任务个数，和一个dropdown组件构成
3. operator由一个长条按钮creator和编辑框editor组成，这两个部分不能同时存在
4. card-grid由两种卡片组成，一种是未完成的，一种是已完成的

组件说明

dropdown

dropdown包含三个操作，

• 修改task-panel的标题
• 在此task-panel后新增一个task-panel
• 删除此task-panel

注意这个组件与父组件相关联

creator

creator的功能是显示editor编辑框，同时自身消失

editor

editor提供两种按钮，取消与 确定，在其中输入文本后传递给父组件

card

card代表一项任务

组件实现

dropdown

在组件中，需要为每个menu-item设置好:text, :action和@click事件绑定
其中action是为了统一@click处理的方式，不然menu-item多了，要为每个组件绑定一个不同的处理函数，详细请看下方行为处理

设计需求

1. 主要功能

   • 显示一个菜单，这个菜单有三个功能，分别是

     • 修改task-panel的标题
     • 在此task-panel后新增一个task-panel
     • 删除此task-panel
   • 这三个功能通过emit传递给父组件

2. 组件修饰

   • 鼠标悬浮div.entry的图标时，图标的颜色加深

3. 接口

   • 通过active属性控制菜单的显示

[active == false] 初始状态

[active == true] 激活状态

[行为1] 点击初始状态下的dropdown

方法 toggleHandler

    toggleHandler() {
      this.$emit('toggle')
    },

[行为2] 点击菜单中的条目

    handler(action) {
      this.$emit('toggle-menu', action)
    }

组件修饰 // 整体布局 div.creator { height: 30px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); border-radius: 4px; display: flex; align-items: center; justify-content: center; /* text-align: center; */ background-color: white; margin: 8px 0; } // 鼠标悬浮 div.creator:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); cursor: pointer; } div.creator:hover svg#at-plus path { fill: #309fee; }

editor

设计需求

1. 主要功能

   • 提供输入文本框和两个按钮控制
   • 将输入的文本传递给父组件

2. 组件修饰

   • 针对textarea标签，鼠标点击进入时，边框变为蓝色
   • 对两个button按钮背景颜色和文字颜色进行设置
   • 鼠标悬浮在button上时，需要button变换背景色，也可以使用transition属性添加动画

3. 接口设计

   • holder控制textarea中placeholder的内容
   • rows 控制textarea的rows属性大小
   • active控制自身的显示，v-show="active"

基本结构

  


    

      
      
    

    

      
          取消
      

      
          确定
      

    

  

组件修饰