string;

是否默认对被引导的dom添加高亮只对子元素的子元素动态添加类名【cur-guide】isAuto?:

boolean;//

2、部分页面需传入此字段微调整距离顶部的距离otherHeight?:

number;//

activeGuide值变化时触发,用来在isAuto为false时告知外部需要高亮哪个dom请外部根据此判断添加类明【cur-guide】onChange?:

(activeGuideId)

React.ReactElementTaroElementProps;const

Guide

{updatePosition();props.onChange?.(props.guildList[activeGuide]?.id);}},

[activeGuide]);const

(!props.guildList[activeGuide])

return;const

Taro.createSelectorQuery();query.select(#${props.guildList[activeGuide].id}).boundingClientRect().selectViewport().scrollOffset().exec((res)

{if

scrollTop;setTipPosition({top:actualTop

rect.height

{setActiveGuide(0);setIsOpened(false);return;}setActiveGuide(activeGuide

1);};const

{setActiveGuide(props.guildList.length

1);setIsOpened(false);return;}setActiveGuide(activeGuide

1);};const

(ViewclassNamecur-guide-tipstyle{{top:

onClick{onNext}下一步/Button/View);};//

enhanceChildren

React.Children.map(child.props.children,(subChild)

{if

(!React.isValidElement(subChild))

return

props.guildList[activeGuide]?.id;//

(isCurrentActive

[...(Array.isArray(subChildProps.children)?

[subChildProps.children]),renderTip(),],});}return

subChild;});return

(View{props.children}/View{isOpened

renderBodyAuto

View{enhanceChildren(props.children)}/View;};return

(View

这个是相对顶部距离的定位(isAuto为false时).cur-guide-tip

{padding:

相对当前高亮元素的定位(isAuto为true时).cur-guide

{background:

需要配合onChange事件将当前激活id传给父组件然后父组件再根据当前激活id去选择高亮哪个dom元素(类名判断写在和id设置同一个dom上)然后给对应dom绑上’cur-guide‘类名即可

最终效果