Skip to content

Commit

Permalink
fix: 修复 tour 组件无法根据 current 指定展示的步骤以及 change 事件得到的值有误
Browse files Browse the repository at this point in the history
  • Loading branch information
daiwanxing committed Jul 12, 2024
1 parent a415d0b commit dd17a40
Showing 1 changed file with 27 additions and 43 deletions.
70 changes: 27 additions & 43 deletions src/packages/__VUE/tour/index.taro.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<view :class="classes">
<view class="nut-tour">
<view v-if="showTour" class="nut-tour-masked" @click="handleClickMask"></view>

<view v-for="(step, i) in steps" :key="i" style="height: 0">
Expand Down Expand Up @@ -42,17 +42,15 @@
@click="changeStep('prev')"
>
{{ prevStepTxt }}
</view
>
</view>
</slot>
<view
v-if="steps.length - 1 == active"
class="nut-tour-content-bottom-operate-btn active"
@click="close"
>
{{ completeTxt }}
</view
>
</view>

<slot name="next-step">
<view
Expand All @@ -61,8 +59,7 @@
@click="changeStep('next')"
>
{{ nextStepTxt }}
</view
>
</view>
</slot>
</view>
</view>
Expand All @@ -80,7 +77,7 @@
</view>
</template>
<script lang="ts">
import { computed, watch, ref, reactive, toRefs, PropType, onMounted } from 'vue'
import { watch, ref, reactive, toRefs, PropType, onMounted, CSSProperties } from 'vue'
import { PopoverLocation, PopoverTheme } from '../popover/type'
import { createComponent } from '@/packages/utils/create'
import { rectTaro, useTaroRectById } from '@/packages/utils/useTaroRect'
Expand Down Expand Up @@ -179,17 +176,12 @@ export default create({
let maskRect: rectTaro[] = []
let maskStyles = ref<any[]>([])
const classes = computed(() => {
const prefixCls = 'nut-tour'
return `${prefixCls}`
})
let maskStyles = ref<CSSProperties[]>([])
const maskStyle = (index: number) => {
const { offset, maskWidth, maskHeight } = props
if (!maskRect[index]) return {}
if (!maskRect[index]) return
const { width, height, left, top } = maskRect[index]
const center = [left + width / 2, top + height / 2] // 中心点 【横,纵】
Expand All @@ -209,31 +201,26 @@ export default create({
const current = state.active
let next = current
if (type == 'next') {
next = current + 1
} else {
next = current - 1
}
next = type == 'next' ? current + 1 : current - 1
showPopup.value[current] = false
setTimeout(() => {
showPopup.value[next] = true
state.active = next
emit('change', state.active)
showPopup.value[state.active] = true
}, 300)
emit('change', state.active)
}
const getRootPosition = () => {
props.steps.forEach(async (item, i) => {
useTaroRectById(item.target).then(
(rect: any) => {
maskRect[i] = rect
maskStyle(i)
},
() => {}
)
})
const getRootPosition = async () => {
for (const [index, step] of props.steps.entries()) {
try {
const rect = await useTaroRectById(step.target)
maskRect[index] = rect as rectTaro
maskStyle(index)
} catch (error) {
console.warn(`[NutUI] Failed to get rect for step ${index}:`, error)
}
}
}
const close = () => {
Expand All @@ -248,33 +235,30 @@ export default create({
}
onMounted(() => {
setTimeout(() => {
getRootPosition()
}, 500)
getRootPosition()
})
watch(
() => props.modelValue,
(val) => {
if (val) {
state.active = 0
(visible) => {
if (visible) {
state.active = props.type === 'step' ? Math.min(props.current, props.steps.length - 1) : 0
getRootPosition()
}
state.showTour = val
showPopup.value[state.active] = val
state.showTour = visible
showPopup.value[state.active] = visible
}
)
const refRandomId = Math.random().toString(36).slice(-8)
return {
...toRefs(state),
classes,
maskStyle,
changeStep,
showPopup,
close,
handleClickMask,
showPopup,
maskStyles,
refRandomId
}
Expand Down

0 comments on commit dd17a40

Please sign in to comment.