Showing
1 changed file
with
7 additions
and
2 deletions
@@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
2 | <section :class="prefixCls" | 2 | <section :class="prefixCls" |
3 | :style="{ borderColor: option.borderColor, borderWidth: `${option.borderWidth}px`, borderStyle: option.borderStyle, borderRadius: `${isRectBorder ? '' : '50%'}`, backgroundColor: option.backgroundColor, ...getDynamicEffectCls }"> | 3 | :style="{ borderColor: option.borderColor, borderWidth: `${option.borderWidth}px`, borderStyle: option.borderStyle, borderRadius: `${isRectBorder ? '' : '50%'}`, backgroundColor: option.backgroundColor, ...getDynamicEffectCls }"> |
4 | <slot /> | 4 | <slot /> |
5 | - <div v-if="isRectBorder" | 5 | + <div v-if="isRectBorder || !isHiddenBorder" |
6 | :style="{ '--point-size': `${option.pointSize}px`, '--point-color': option.pointColor, '--translate-distance': 'calc(var(--point-size) / 2)', '--translate-distance-invert': 'calc(var(--point-size) / 2 * -1)' }" | 6 | :style="{ '--point-size': `${option.pointSize}px`, '--point-color': option.pointColor, '--translate-distance': 'calc(var(--point-size) / 2)', '--translate-distance-invert': 'calc(var(--point-size) / 2 * -1)' }" |
7 | class="point-container"> | 7 | class="point-container"> |
8 | <div class="point top-left"></div> | 8 | <div class="point top-left"></div> |
@@ -15,7 +15,7 @@ | @@ -15,7 +15,7 @@ | ||
15 | 15 | ||
16 | <script lang="ts" setup> | 16 | <script lang="ts" setup> |
17 | import { useDesign } from '@/hooks/external/useDesign'; | 17 | import { useDesign } from '@/hooks/external/useDesign'; |
18 | -import { IconBorderEnum, IconDynamicEffectEnum } from '@/packages/components/external/types'; | 18 | +import { IconBorderEnum, IconDynamicEffectEnum , IconBorderStyleEnum} from '@/packages/components/external/types'; |
19 | import { computed, CSSProperties } from 'vue'; | 19 | import { computed, CSSProperties } from 'vue'; |
20 | import { IconOptions } from './config'; | 20 | import { IconOptions } from './config'; |
21 | 21 | ||
@@ -33,6 +33,11 @@ const isRectBorder = computed(() => { | @@ -33,6 +33,11 @@ const isRectBorder = computed(() => { | ||
33 | return borderType === IconBorderEnum.RECT | 33 | return borderType === IconBorderEnum.RECT |
34 | }) | 34 | }) |
35 | 35 | ||
36 | +const isHiddenBorder = computed(() => { | ||
37 | + const { borderStyle, borderType } = props.option as IconOptions | ||
38 | + return borderStyle === IconBorderStyleEnum.NONE || borderType === IconBorderEnum.ROUNDED | ||
39 | +}) | ||
40 | + | ||
36 | const animation: Record<IconDynamicEffectEnum, { attr: keyof CSSProperties, value: string }> = { | 41 | const animation: Record<IconDynamicEffectEnum, { attr: keyof CSSProperties, value: string }> = { |
37 | [IconDynamicEffectEnum.JUMP]: { | 42 | [IconDynamicEffectEnum.JUMP]: { |
38 | attr: 'animation', | 43 | attr: 'animation', |