vue3.0后台管理项目（day19）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情

上一篇文章中我们完成每个页面上都会显示的面包屑，接下来我们将完成面包屑中右侧的签到打卡功能，这个签到打卡的具体样式如下图所示：

1. 我们在element-plus中找到日期选择器并且将它的源代码复制粘贴到我们的页面上，具体代码如下所示：

<div class="box2">
          <span class="demonstration">
            <el-icon><Opportunity /></el-icon>
            打卡 ：</span
          >
          <el-date-picker
            class="picker"
            width="100px"
            v-model="value1"
            type="date"
            placeholder="请选择日期"
            :default-value="new Date(2022, 9, 1)"
          />
          <el-button
            class="clock"
            type="primary"
            :disabled="disabled"
            @click="tapBtn"
            @tap="open3"
            >{{ clock }}</el-button
          >
        </div>

2. 这里的clock是一个动态数据，如果用户今日未打卡则显示立即打卡，如果用户已打卡则显示打卡成功，el-button里面是这个打卡签到功能的主要实现方法，这里面绑定了click以及tap两个事件，以及这个按钮的禁用也是当用户打卡完成之后禁用的。
3. 其次这个面包屑和打卡点到的css样式是使用了display: flex;让这两个排列到一行上，然后使用justify-content: space-between;让他俩分布均匀展示在两侧
4. 这个打卡按钮的实现代码如下所示：

const tapBtn = () => {
  if (value1.value !== "") {
    clock.value = "打卡成功";
    disabled.value = true;
    open2();
  } else {
    open3();
  }
};

5. 这个open2以及open3是ElMessage，用来提示用户打卡成功或者请先选择日期再打卡，这两个的代码如下图所示：

6. 这个tapBtn方法改变了许多动态数据，比如打卡成功之后按钮禁用，按钮内容从立即打卡变为打卡成功。