卡比记账项目——Axios标签请求

封装后退按钮

点击后退按钮，我们需要回到上一级页面。 由于多个页面都需要做后退的按钮，不妨进行对后退功能进行一个封装。 统一添加点击事件。

创建标签

隐藏字段

点击新增按钮，跳转到tagcreate界面，但是这里少了一个字段，用户应该可以自主选择收入或者支出。 根据逻辑：在支出栏点击的新增理应归于支出，同理在收入栏点击的新增归于收入。用户没有必要再次选择。但是用户如果不填我们无法知道是收入还是支出。

所以我们需要用到隐藏字段，这个字段不需要显示，而是根据参数来跳转

找到新增按钮所在的Tags.tsx,加上一个RouterLink。做一个字符串的拼接，并且添加一个隐藏字段以区分收入或者支出。

因为我们加了一个隐藏字段kind，所以要在相应的地方补充这个字段 来到TagForm组件，在formData里面添加kind字段。

随后就可以发请求了

对于表单错误进行封装

完整请求：

现在就可以新增tag了。

长按编辑

触发长按效果

思路：触发touchStart事件timer开始计时，如果计时到一秒钟还没有松开，就自动弹到编辑页面，若一秒钟内松开了就重置timer。

开始实现：在Tags组件中，每一个Tag加上onTouchstart以及onTouchEnd事件。还有timer计时器。

一些逻辑：

考虑一个问题，用户长按后手指往下划就不能触发长按。需要添加一个限定条件：用户没有移开手指且没有移出tag的限定范围内才可以触发长按。

在最大的div中添加一个onTouchmove事件，获取鼠标当前位置所指向的元素，然后进行边界判断。

改写：

长按跳转

要跳转到对应的id，首先就要支持id，

接受id和tag

可以编辑

TagEdit中，如果id没有就返回错误

TagForm要接受id，

挂载之后去看有没有传id，有id的话就加载到formData

mock一下：

重写请求：

删除标签

我们的ui有两个删除按钮，区别就可以同通过查询参数来实现。

添加事件onDelete

另外一个按钮只需要添加一个参数，

添加报错提醒以及确认提示

完成