数字按键设计
记账app和核心就是按键，需要输入数字。所以我们需要制作一个数字键盘来进行记账。将这个组件命名为InputPad。 首先定义数字按键的按钮。点击事件后面再写。
使用表编程，将按钮放在一个数组里。里面的每一个对象就是每个按键的属性和事件。
内容就是遍历这个表的每一项，并且显示表的text属性内容。
加入一些CSS
效果预览：
封装一个时间相关的库
可以引入day.js,也可以自己写一个time.js。
声明一个time函数，加入要声明一个当前的时间，给一个new Date
声明一些api：
但是这个毕竟是自己做的原生js组件，在手机上的使用体验并不好。
引入Vant
因为我们只需要选择时间的插件，按照官网推荐可以安装一个vite-plugin-style的插件可以自动按需引入。
使用后报了一个错：
在vite.config.ts内配置就可以解决：
styleImport({
resolves: [VantResolve()],
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `../es/${name}/style`
}
]
}),
成功引入之后会发现这个时间选择器是默认展开的。我们需要写一个开关来控制。
const refShowPop = ref(false)
规定好默认是关闭状态。用Popup这个组件来展示弹出图层。
里面包裹着我们的时间选择器。用户选择好时间，点击确定或者取消实现浮层关闭。
用onConfirm和onCancel来控制。
布局改良
重新使用Grid布局进行优化，删除了一下无用按键
部分CSS：
数字输入检查
初始值为0，不能在初始值的0后面输入0，但是可以直接输入一个小数点。但是不能连续输入两个小数点。小数点之后可以输入0～9。此外.1.这种写法也是不被允许的，但是0.01这类是被允许的 这需要我们在append的时候进行判断，不能武断的直接写
逻辑如下：
最后预览：
