refactor(components): 优化 Segments 组件中的指示器样式设置
- 移除了 createMemo 创建的 indicatorStyle 信号 - 直接在样式属性中设置指示器的位置和尺寸 - 这种改动减少了不必要的计算和内存使用,提高了组件的性能
This commit is contained in:
@@ -42,12 +42,6 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
|
|||||||
const [indicatorLeft, setIndicatorLeft] = createSignal(0);
|
const [indicatorLeft, setIndicatorLeft] = createSignal(0);
|
||||||
const [indicatorHeight, setIndicatorHeight] = createSignal(0);
|
const [indicatorHeight, setIndicatorHeight] = createSignal(0);
|
||||||
const [indicatorWidth, setIndicatorWidth] = createSignal(0);
|
const [indicatorWidth, setIndicatorWidth] = createSignal(0);
|
||||||
const indicatorStyle = createMemo(() => ({
|
|
||||||
top: `${indicatorTop()}px`,
|
|
||||||
left: `${indicatorLeft()}px`,
|
|
||||||
height: `${indicatorHeight()}px`,
|
|
||||||
width: `${indicatorWidth()}px`,
|
|
||||||
}));
|
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
if (isNotNil(originalValue()) && originalValue() !== selected()) {
|
if (isNotNil(originalValue()) && originalValue() !== selected()) {
|
||||||
@@ -97,7 +91,12 @@ export const HSegmengts: Component<SegmentsProps> = (props) => {
|
|||||||
<Show when={isNotNil(selected())}>
|
<Show when={isNotNil(selected())}>
|
||||||
<div
|
<div
|
||||||
class="pointer-events-none absolute z-[2] rounded-sm bg-primary-surface transition-[top,left,height,width] duration-200 ease-in-out"
|
class="pointer-events-none absolute z-[2] rounded-sm bg-primary-surface transition-[top,left,height,width] duration-200 ease-in-out"
|
||||||
style={indicatorStyle()}
|
style={{
|
||||||
|
top: `${indicatorTop()}px`,
|
||||||
|
left: `${indicatorLeft()}px`,
|
||||||
|
height: `${indicatorHeight()}px`,
|
||||||
|
width: `${indicatorWidth()}px`,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user