forked from zhongyidian/super_video
refactor: 删除不再使用的图像文件,更新引导组件以支持垂直偏移功能
This commit is contained in:
1 parent
55f45269bd
commit
1e5422fecf
23 files changed
+326
-27
No files matched your search
@@ -12,6 +12,7 @@
|
||||
:show-skip="currentStep < totalSteps"
|
||||
:current-step="currentStep"
|
||||
:total-steps="totalSteps"
|
||||
:position-offset-y="props.positionOffsetY"
|
||||
@next="handleNext"
|
||||
@skip="handleSkip"
|
||||
@complete="handleComplete"
|
||||
@@ -27,8 +28,16 @@
|
||||
:total-steps="totalSteps"
|
||||
/>
|
||||
</div>
|
||||
<!-- 兼容原有的配置形式 -->
|
||||
<div v-else v-html="currentStepContent"></div>
|
||||
<!-- 兼容原有的配置形式:也包裹 GuideStepsItem,获得继续按钮 -->
|
||||
<GuideStepsItem
|
||||
v-else
|
||||
:is-last-step="currentStep >= totalSteps"
|
||||
:current-step="currentStep"
|
||||
:total-steps="totalSteps"
|
||||
@continue="handleNext"
|
||||
>
|
||||
{{ currentStepContent }}
|
||||
</GuideStepsItem>
|
||||
</template>
|
||||
</GuideDragon>
|
||||
</div>
|
||||
@@ -40,6 +49,7 @@
|
||||
import { ref, computed, useSlots, onMounted, onUnmounted, reactive } from 'vue'
|
||||
import SpotlightOverlay from './SpotlightOverlay.vue'
|
||||
import GuideDragon from './GuideDragon.vue'
|
||||
import GuideStepsItem from './GuideStepsItem.vue'
|
||||
|
||||
interface GuideStep {
|
||||
id: string
|
||||
@@ -63,6 +73,8 @@ interface Props {
|
||||
highlightPadding?: number
|
||||
/** 高亮圆角,默认16 */
|
||||
highlightRadius?: number
|
||||
/** 垂直偏移(仅Y轴),支持 number(px) 或 '10%'/'120px' */
|
||||
positionOffsetY?: number | string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
@@ -78,7 +90,8 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
autoPlayInterval: 0,
|
||||
highlightSelector: null,
|
||||
highlightPadding: 8,
|
||||
highlightRadius: 16
|
||||
highlightRadius: 16,
|
||||
positionOffsetY: '50%'
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
@@ -138,7 +151,7 @@ const currentStepContent = computed(() => {
|
||||
if (!step) return ''
|
||||
|
||||
if (!step.title) {
|
||||
return `<p>${step.content}</p>`
|
||||
return `${step.content}`
|
||||
}
|
||||
|
||||
return `
|
||||
|
||||
Reference in new issue
Block a user