之前的笔记太过啰嗦，接下来只会记录思路及重要代码

1 Tag

1.1 长按编辑

  • 思路：onTouchstart事件触发后，计时器开始计时，到时执行编辑逻辑；onTouchend事件触发后，清除计时器。
1
2
3
4
5
6
7
8
9

const longPress = () => {
  console.log("长按");
};
const onTouchStart = (e: TouchEvent) => {
  timer.value = setTimeout(() => {
    longPress();
  }, 500);
};
const onTouchEnd = () => {clearTimeout(timer.value)};

  • 存在问题：用户在触碰到tag后移动到屏幕其他位置（比如向下滑动屏幕时），长按事件还是会触发

  • 解决思路：给最外层wrapper元素添加onTouchmove事件，当用户滑动到的元素不是原来的tag时（或其子元素不是tag时），立即取消计时器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

const onTouchStart = (e: TouchEvent) => {
  // 记录当前tag元素
  currentTag.value = e.currentTarget as HTMLDivElement;
  timer.value = setTimeout(() => {
    longPress();
  }, 500);
};
const onTouchEnd = () => {clearTimeout(timer.value)};
const onTouchMove = (e: TouchEvent) => {
  // elementFromPoint() 在指定坐标处返回最上面的元素
  const pointedElement = document.elementFromPoint(
    e.touches[0].clientX,
    e.touches[0].clientY
  );
  if (
    currentTag.value !== pointedElement &&
    currentTag.value?.contains(pointedElement) === false
  ) {
    clearTimeout(timer.value);
  }
};

1.2 区别新增与编辑接口

  • 新增与编辑使用的都是TagForm组件；在校验提交数据时，可以通过是否存在id来区别新增与编辑接口
1
2
3
4
5
6
7
8

if (!hasErrors(errors)) {
	// 利用promise变量配合await区别编辑与新增
	const promise = (await formData.id)
		? http.patch(`/tags/${formData.id}`, formData)
		: http.post("/tags", formData);
	await promise.catch(onError);
	router.back();
}

2 Item