fix: timeline bug

This commit is contained in:
mozzie 2023-03-24 08:04:11 +08:00
parent 5b398e9c7e
commit fe14dda10c
3 changed files with 67 additions and 34 deletions

View File

@ -85,35 +85,65 @@ export default function Guide(props: IProps) {
}; };
useEffect(() => { useEffect(() => {
if (props.defaultValue) vditorRef.current = new Vditor("vditor", {
vditorRef.current = new Vditor("vditor", { height: 600,
height: 600, cache: {
cache: { id: props.id,
id: props.id, enable: false,
enable: false, },
toolbar: [...toolbar, "|", submitTool],
value: props.defaultValue ?? "",
hint: { delay: 200, emoji },
counter: { enable: true },
preview: { actions: ["desktop", "mobile"] },
after: () => console.log("[info] vditor init success..."),
upload: {
accept: "image/*",
url: "/api/vod/oss/image/upload",
multiple: false,
success(_, res) {
const { code, data, msg } = JSON.parse(res);
if (code === 10000) {
message.success("上传成功");
const { name, url } = data;
vditorRef.current?.insertValue(`![${name}](${url})`);
} else {
message.error(msg);
}
}, },
toolbar: [...toolbar, "|", submitTool], },
value: props.defaultValue ?? "", });
hint: { delay: 200, emoji }, }, []);
counter: { enable: true },
preview: { actions: ["desktop", "mobile"] }, useEffect(() => {
after: () => console.log("[info] vditor init success..."), vditorRef.current = new Vditor("vditor", {
upload: { height: 600,
accept: "image/*", cache: {
url: "/api/vod/oss/image/upload", id: props.id,
multiple: false, enable: false,
success(_, res) { },
const { code, data, msg } = JSON.parse(res); toolbar: [...toolbar, "|", submitTool],
if (code === 10000) { value: props.defaultValue ?? "",
message.success("上传成功"); hint: { delay: 200, emoji },
const { name, url } = data; counter: { enable: true },
vditorRef.current?.insertValue(`![${name}](${url})`); preview: { actions: ["desktop", "mobile"] },
} else { after: () => console.log("[info] vditor init success..."),
message.error(msg); upload: {
} accept: "image/*",
}, url: "/api/vod/oss/image/upload",
multiple: false,
success(_, res) {
const { code, data, msg } = JSON.parse(res);
if (code === 10000) {
message.success("上传成功");
const { name, url } = data;
vditorRef.current?.insertValue(`![${name}](${url})`);
} else {
message.error(msg);
}
}, },
}); },
});
}, [props.defaultValue]); }, [props.defaultValue]);
return ( return (

View File

@ -80,7 +80,7 @@ function Timeline(props: IProps) {
}, [cursorStatic.top]); }, [cursorStatic.top]);
useEffect(() => { useEffect(() => {
if (props.data && orbitRef.current) { if (props.data.length > 0 && orbitRef.current) {
setTimelineData(filterYearOnce(props.data)); setTimelineData(filterYearOnce(props.data));
// 全部的月份数数量平均划分 // 全部的月份数数量平均划分
const avg = orbitRef.current.clientHeight / props.data.length; const avg = orbitRef.current.clientHeight / props.data.length;
@ -90,7 +90,7 @@ function Timeline(props: IProps) {
useEffect(() => { useEffect(() => {
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
if (props.data && orbitRef.current) { if (props.data.length > 0 && orbitRef.current) {
setTimelineData(filterYearOnce(props.data)); setTimelineData(filterYearOnce(props.data));
// 全部的月份数数量平均划分 // 全部的月份数数量平均划分
const avg = orbitRef.current.clientHeight / props.data.length; const avg = orbitRef.current.clientHeight / props.data.length;
@ -98,7 +98,7 @@ function Timeline(props: IProps) {
} }
}); });
return () => window.removeEventListener("resize", () => {}); return () => window.removeEventListener("resize", () => {});
}, []); }, [props.data]);
return ( return (
<div <div

View File

@ -53,10 +53,13 @@ export default function Index() {
*/ */
const onTimelineScroll = (p: IOnScrollParam) => { const onTimelineScroll = (p: IOnScrollParam) => {
const { top, height } = p; const { top, height } = p;
//左侧区域高度 if (thumbnailRef.current) {
const { scrollHeight, clientHeight } = thumbnailRef.current!; //左侧区域高度
scale.current = (scrollHeight - clientHeight) / height; const { scrollHeight, clientHeight } = thumbnailRef.current;
thumbnailRef.current!.scrollTop = top * scale.current; if (scrollHeight === clientHeight) return;
scale.current = (scrollHeight - clientHeight) / height;
thumbnailRef.current!.scrollTop = top * scale.current;
}
}; };
/** /**