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', |