vue3基础-实战2: 完善小账本

在上节课中，我们完成了收支数据的添加，现在需要在首页渲染出添加的数据。

先在components文件夹下创建setBudgeDialog.vue文件

目录结构如下

任务目标👀

1. 在顶部显示当前的年月
2. 根据log数据填充数据(余额，支出，收入…)
3. 当记账后，首页数据马上更新
4. 在…上绑定打开设置总预算功能
5. 渲染出账单列表

🎞️学习视频：实战2

静态样式文件

setBudgeDialog

<script setup>
// ToDo
// 1.当弹框打开时，在输入框中显示之前的预算数值，并且可以修改
// 2.输入预算后如果点击确定，关闭弹框，并且将预算值保存到缓存(localStorage)中,
//   如果点击取消按钮，关闭弹框不做任何修改

</script>

<template>
  <div v-if="modelValue">
    <div class="dialog-mask-box"></div>
    <div class="dialog-box">
      <div>
        <span>预算：</span>
        <!--   预算输入框     -->
        <input type="number" placeholder="请输入" />
      </div>
      <div>
        <button>取消</button>
        <button>确定</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dialog-box {
  width: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 40px 16px 20px;
  box-sizing: border-box;
  border-radius: 10px;
  z-index: 10;
  box-shadow: 0 0 5px #cccccc;
}

.dialog-mask-box {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}

.dialog-box > div:first-child {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-bottom: 20px;
}

input {
  width: 100%;
  border: 1px solid #eeeeee;
  font-size: 20px;
  padding: 8px;
  box-sizing: border-box;
}

button {
  width: 46%;
  padding: 8px;
  box-sizing: border-box;
  font-size: 16px;
  margin: 0 2%;
  background: white;
  border: 1px solid #f2f2f2;
}
</style>