封装后退按钮
点击后退按钮,我们需要回到上一级页面。
由于多个页面都需要做后退的按钮,不妨进行对后退功能进行一个封装。
统一添加点击事件。
创建标签
隐藏字段
点击新增按钮,跳转到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
另外一个按钮只需要添加一个参数,
添加报错提醒以及确认提示
完成
暂无评论内容