2022-03-23 【待办Todo】day02-待办模块页面布局

一、初始化页面视图文件

1. 在 views 文件夹下新建三个视图文件

Todo.vue、Data.vue、Mine.vue

2. 使用一个 div 标签包裹 html 代码

二、在路由中绑定视图

1. 使用 import 导入组件

2. 将组件与路由关联

Home 组件为底部标签栏，要实现点击不同标签切换到对应页面，使用 children 属性嵌套子路由

3. 设置初始页面

要实现将 Todo 页面作为首页，使用 redirect 属性重定向到 Todo 组件关联的路由

三、修改 Home.vue 文件

1. 添加 router-view 标签

路由匹配到的组件将显示在 router-view 标签所在位置

2. 修改 Tabbar 标签栏为路由模式

3. 添加 placeholder 属性

placeholder：固定在底部时，是否在标签位置生成一个等高的占位元素
设置该属性以防止 Tabbar 标签栏覆盖子路由关联组件的页面元素

四、使用 Vant UI 布局待办页面

1. html 部分代码

<div class="todo">
  <van-nav-bar left-text="待办" fixed placeholder>
    <template #right>
      <van-icon name="plus" size="18" />
    </template>
  </van-nav-bar>

  <van-cell-group inset>
    <van-cell center title="待办事项1" value="开始" label="1分钟" />
  </van-cell-group>
</div>

2. css 部分代码

.van-cell-group {
  margin: 16px;
  .van-cell {
    background-color: #ffe;
  }
}

五、实现点击加号显示弹窗

1. 使用 Dialog 弹出框的组件调用

2. 代码如下

<van-dialog v-model="showDialog" title="添加待办" show-cancel-button>
  <van-form>
	<van-field v-model="todoForm.name" label="待办名称" placeholder="请输入待办名称" :rules="[{ required: true }]" />
	<van-field v-model="todoForm.time" type="digit" label="专注时间" placeholder="输入专注分钟数" :rules="[{ required: true }]" />
  </van-form>
</van-dialog>

3. 效果预览