mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-07-27 10:01:46 +08:00
refactor: 封装图标定义
This commit is contained in:
parent
4867ffdfeb
commit
ebe48eab8f
@ -1,6 +1,14 @@
|
|||||||
import { DefaultProps, ElementLocator, GraphicPropsBase } from '@motajs/render';
|
import { DefaultProps, ElementLocator, GraphicPropsBase } from '@motajs/render';
|
||||||
import { SetupComponentOptions } from '@motajs/system-ui';
|
import { SetupComponentOptions } from '@motajs/system-ui';
|
||||||
import { computed, defineComponent, onMounted, Ref, ref, watch } from 'vue';
|
import {
|
||||||
|
computed,
|
||||||
|
defineComponent,
|
||||||
|
DefineSetupFnComponent,
|
||||||
|
onMounted,
|
||||||
|
Ref,
|
||||||
|
ref,
|
||||||
|
watch
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
export interface IconsProps extends DefaultProps<GraphicPropsBase> {
|
export interface IconsProps extends DefaultProps<GraphicPropsBase> {
|
||||||
loc: ElementLocator;
|
loc: ElementLocator;
|
||||||
@ -55,12 +63,39 @@ function adjustPath(
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const RollbackIcon = defineComponent<IconsProps>(props => {
|
function defineIcon<T extends IconsProps>(
|
||||||
|
aspect: number,
|
||||||
|
pathDef: PathFn,
|
||||||
|
props: SetupComponentOptions<T> = iconsProps
|
||||||
|
): DefineSetupFnComponent<T> {
|
||||||
|
return defineComponent<T>(props => {
|
||||||
const path = ref<Path2D>();
|
const path = ref<Path2D>();
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
const width = computed(() => props.loc[2] ?? 200);
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
const height = computed(() => props.loc[3] ?? 200);
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
const generatePath = adjustPath(aspect, path, pathDef);
|
||||||
|
|
||||||
|
watch(props, () => {
|
||||||
|
generatePath(width.value, height.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
generatePath(width.value, height.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<g-path
|
||||||
|
loc={props.loc}
|
||||||
|
path={path.value}
|
||||||
|
stroke
|
||||||
|
lineJoin="round"
|
||||||
|
lineCap="round"
|
||||||
|
></g-path>
|
||||||
|
);
|
||||||
|
}, props);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RollbackIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const arc = width / 10;
|
const arc = width / 10;
|
||||||
const arrow = width / 10;
|
const arrow = width / 10;
|
||||||
@ -82,33 +117,7 @@ export const RollbackIcon = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const RetweetIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const RetweetIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const arc = width / 10;
|
const arc = width / 10;
|
||||||
const arrow = width / 10;
|
const arrow = width / 10;
|
||||||
@ -130,33 +139,7 @@ export const RetweetIcon = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ViewMapIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ViewMapIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -169,37 +152,10 @@ export const ViewMapIcon = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(cx, bottom);
|
path.lineTo(cx, bottom);
|
||||||
path.moveTo(left, cy);
|
path.moveTo(left, cy);
|
||||||
path.lineTo(right, cy);
|
path.lineTo(right, cy);
|
||||||
|
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const DanmakuIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const DanmakuIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
const bottom = oy + height - height / 5;
|
const bottom = oy + height - height / 5;
|
||||||
@ -215,33 +171,7 @@ export const DanmakuIcon = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ReplayIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ReplayIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const arc = width / 10;
|
const arc = width / 10;
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
@ -270,33 +200,7 @@ export const ReplayIcon = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const NumpadIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const NumpadIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -311,33 +215,7 @@ export const NumpadIcon = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const PlayIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const PlayIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -350,34 +228,7 @@ export const PlayIcon = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const PauseIcon = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
fill
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const PauseIcon = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const cx = ox + width / 2;
|
const cx = ox + width / 2;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -389,33 +240,7 @@ export const PauseIcon = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const DoubleArrow = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const DoubleArrow = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const path2 = new Path2D();
|
const path2 = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
@ -436,34 +261,7 @@ export const DoubleArrow = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const StepForward = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
fill
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const StepForward = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const path2 = new Path2D();
|
const path2 = new Path2D();
|
||||||
const left = ox + width / 5;
|
const left = ox + width / 5;
|
||||||
@ -480,34 +278,7 @@ export const StepForward = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const SoundVolume = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
fill
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const SoundVolume = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 8;
|
const left = ox + width / 8;
|
||||||
const top = oy + height / 5;
|
const top = oy + height / 5;
|
||||||
@ -536,33 +307,7 @@ export const SoundVolume = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const Fullscreen = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const Fullscreen = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -599,33 +344,7 @@ export const Fullscreen = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ExitFullscreen = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ExitFullscreen = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -662,33 +381,7 @@ export const ExitFullscreen = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ArrowLeftTailless = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ArrowLeftTailless = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -701,33 +394,7 @@ export const ArrowLeftTailless = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ArrowRightTailless = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ArrowRightTailless = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -740,33 +407,7 @@ export const ArrowRightTailless = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ArrowUpTailless = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ArrowUpTailless = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -779,33 +420,7 @@ export const ArrowUpTailless = defineComponent<IconsProps>(props => {
|
|||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
export const ArrowDownTailless = defineIcon(1, (ox, oy, width, height) => {
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
|
||||||
export const ArrowDownTailless = defineComponent<IconsProps>(props => {
|
|
||||||
const path = ref<Path2D>();
|
|
||||||
|
|
||||||
const width = computed(() => props.loc[2] ?? 200);
|
|
||||||
const height = computed(() => props.loc[3] ?? 200);
|
|
||||||
const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
|
|
||||||
const path = new Path2D();
|
const path = new Path2D();
|
||||||
const left = ox + width / 4;
|
const left = ox + width / 4;
|
||||||
const right = ox + width - width / 4;
|
const right = ox + width - width / 4;
|
||||||
@ -817,24 +432,3 @@ export const ArrowDownTailless = defineComponent<IconsProps>(props => {
|
|||||||
path.lineTo(right, top);
|
path.lineTo(right, top);
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props, () => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
generatePath(width.value, height.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
return (
|
|
||||||
<g-path
|
|
||||||
loc={props.loc}
|
|
||||||
path={path.value}
|
|
||||||
stroke
|
|
||||||
lineJoin="round"
|
|
||||||
lineCap="round"
|
|
||||||
></g-path>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}, iconsProps);
|
|
||||||
|
Loading…
Reference in New Issue
Block a user