Tour 漫游式引导
用于分步引导用户了解产品功能的气泡组件。用来引导用户并介绍产品
基础用法
最简单的用法。
export function TourBasic() { const [open, setOpen] = useState(false); return ( <> <ElButton type="primary" onClick={() => setOpen(true)}> Begin Tour </ElButton> <ElDivider /> <ElSpace> <ElButton id="tour-basic-1">Upload</ElButton> <ElButton id="tour-basic-2" type="primary">Save</ElButton> <ElButton id="tour-basic-3" icon={<MoreFilled />} /> </ElSpace> <ElTour visible={open} onVisibleChange={setOpen}> <ElTourStep target={targetBy("#tour-basic-1")} title="Upload File"> <img style={{ width: 240 }} src="https://element-plus.org/images/element-plus-logo.svg" alt="tour.png" /> <div>Put you files here.</div> </ElTourStep> <ElTourStep target={targetBy("#tour-basic-2")} title="Save" description="Save your changes" /> <ElTourStep target={targetBy("#tour-basic-3")} title="Other Actions" description="Click to see other" /> </ElTour> </> ); } 非模态
使用:mask="false"可以将引导变为非模态，同时为了强调引导本身，建议与 type="primary" 组合使用。
export function TourNonModal() { const [open, setOpen] = useState(false); return ( <> <ElButton type="primary" onClick={() => setOpen(true)}> Begin Tour </ElButton> <ElDivider /> <ElSpace> <ElButton id="tour-non-modal-1">Upload</ElButton> <ElButton id="tour-non-modal-2" type="primary">Save</ElButton> <ElButton id="tour-non-modal-3" icon={<MoreFilled />} /> </ElSpace> <ElTour visible={open} onVisibleChange={setOpen} type="primary" mask={false}> <ElTourStep target={targetBy("#tour-non-modal-1")} title="Upload File" description="Put you files here." /> <ElTourStep target={targetBy("#tour-non-modal-2")} title="Save" description="Save your changes" /> <ElTourStep target={targetBy("#tour-non-modal-3")} title="Other Actions" description="Click to see other" /> </ElTour> </> ); } 位置
改变引导相对于目标的位置，共有 12 种位置可供选择。当 target 为空时引导将会展示在正中央。
Begin Tour
export function TourPlacement() { const [open, setOpen] = useState(false); return ( <> <ElButton id="tour-placement-trigger" type="primary" onClick={() => setOpen(true)} > Begin Tour </ElButton> <ElTour visible={open} onVisibleChange={setOpen}> <ElTourStep title="Center" description="Displayed in the center of screen." /> <ElTourStep title="Right" description="On the right of target." placement="right" target={targetBy("#tour-placement-trigger")} /> <ElTourStep title="Top" description="On the top of target." placement="top" target={targetBy("#tour-placement-trigger")} /> </ElTour> </> ); } 自定义遮罩样式
自定义遮罩样式。
export function TourMask() { const [open, setOpen] = useState(false); return ( <> <ElButton type="primary" onClick={() => setOpen(true)}> Begin Tour </ElButton> <ElDivider /> <ElSpace> <ElButton id="tour-mask-1">Upload</ElButton> <ElButton id="tour-mask-2" type="primary">Save</ElButton> <ElButton id="tour-mask-3" icon={<MoreFilled />} /> </ElSpace> <ElTour visible={open} onVisibleChange={setOpen} mask={{ style: { boxShadow: "inset 0 0 15px #333" }, color: "rgba(80, 255, 255, .4)", }} > <ElTourStep target={targetBy("#tour-mask-1")} title="Upload File"> <img src="https://element-plus.org/images/element-plus-logo.svg" alt="tour.png" /> <div>Put you files here.</div> </ElTourStep> <ElTourStep target={targetBy("#tour-mask-2")} title="Save" description="Save your changes" mask={{ style: { boxShadow: "inset 0 0 15px #fff" }, color: "rgba(40, 0, 255, .4)", }} /> <ElTourStep target={targetBy("#tour-mask-3")} title="Other Actions" description="Click to see other" mask={false} /> </ElTour> </> ); } 自定义指示器
自定义指示器。
export function TourIndicator() { const [open, setOpen] = useState(false); return ( <> <ElButton type="primary" onClick={() => setOpen(true)}> Begin Tour </ElButton> <ElDivider /> <ElSpace> <ElButton id="tour-indicator-1">Upload</ElButton> <ElButton id="tour-indicator-2" type="primary">Save</ElButton> <ElButton id="tour-indicator-3" icon={<MoreFilled />} /> </ElSpace> <ElTour visible={open} onVisibleChange={setOpen} indicators={({ current, total }) => ( <span> {current + 1} / {total} </span> )} > <ElTourStep target={targetBy("#tour-indicator-1")} title="Upload File" description="Put you files here." /> <ElTourStep target={targetBy("#tour-indicator-2")} title="Save" description="Save your changes" /> <ElTourStep target={targetBy("#tour-indicator-3")} title="Other Actions" description="Click to see other" /> </ElTour> </> ); } 目标
可以传入目标的各种类型的参数。自2.5.2 以来支持字符串和函数类型。
export function TourTarget() { const [open, setOpen] = useState(false); return ( <> <ElButton type="primary" onClick={() => setOpen(true)}> Begin Tour </ElButton> <ElDivider /> <ElSpace> <ElButton id="tour-target-1">Upload</ElButton> <ElButton id="tour-target-2" type="primary">Save</ElButton> <ElButton id="tour-target-3" icon={<MoreFilled />} /> </ElSpace> <ElTour visible={open} onVisibleChange={setOpen}> <ElTourStep target="#tour-target-1" title="Upload File" description="Put you files here." /> <ElTourStep target={targetBy("#tour-target-2")} title="Save" description="Save your changes" /> <ElTourStep target={() => document.querySelector<HTMLElement>("#tour-target-3")} title="Other Actions" description="Click to see other" /> </ElTour> </> ); } Tour API
Tour Attributes
属性名 说明 类型 默认值 visible 是否显示导览，对应官方 v-model booleanfalse current 当前处于第几步 number0 show-arrow 是否显示箭头 booleantrue show-close 是否显示关闭按钮 booleantrue close-icon 自定义关闭图标 ReactNode默认 Close placement 相对目标元素的方位 enumbottom content-style 内容自定义样式 CSSProperties— mask 是否启用遮罩，或自定义样式与填充色 booleanobjecttrue gap 遮罩与目标之间的透明间隙 object{ offset: 6, radius: 2 } type 类型，影响背景色与文字色 enumdefault scroll-into-view-options 自定义滚动参数 booleanScrollIntoViewOptions{ block: 'center' } z-index 层级 number自动递增 append-to 挂载的容器 stringHTMLElementbody close-on-press-escape 是否允许按 ESC 关闭 booleantrue target-area-clickable 挖孔区域是否可点击 booleantrue indicators 自定义指示器 Function— class-name / style 根元素类名与样式 stringobject—
TourGap
字段 说明 类型 默认值 offset 间隙大小，元组时依次为水平 / 垂直 numberarray6 radius 挖孔圆角 number2
Tour Events
事件名 说明 参数 onVisibleChange 显隐变化 FunctiononCurrentChange 当前步骤变化 FunctiononChange 步骤变化后的回调 FunctiononClose 关闭时触发 FunctiononFinish 结束导览时触发 Function
TourStep Attributes
属性名 说明 类型 默认值 target 指向的目标元素，支持选择器 / 元素 / 取元素的函数；为空时居中显示 stringHTMLElementFunction— show-arrow 是否显示箭头，缺省跟随 Tour boolean— title 标题 string— description 描述 string— header 自定义头部内容，对应官方 header 插槽 ReactNode— children 自定义描述内容，对应官方默认插槽 ReactNode— placement 相对目标元素的方位，缺省跟随 Tour enumbottom content-style 内容自定义样式，缺省跟随 Tour CSSProperties— mask 是否启用遮罩，缺省跟随 Tour booleanobject— type 类型，缺省跟随 Tour enumdefault next-button-props 下一步按钮属性 object— prev-button-props 上一步按钮属性 object— scroll-into-view-options 自定义滚动参数，缺省跟随 Tour booleanScrollIntoViewOptions— show-close 是否显示关闭按钮，缺省跟随 Tour boolean— close-icon 自定义关闭图标，缺省跟随 Tour ReactNode— onClose 该步骤关闭时触发 Function—
TourStep 插槽（以 props 形式提供）
名称 说明 类型 header 自定义头部内容 ReactNodechildren 自定义描述内容 ReactNode
TourBtnProps
字段 说明 类型 默认值 children 按钮文案 ReactNode— onClick 追加在官方默认行为之后的点击回调 Function— 其余字段 透传给 ElButton 的属性（type / disabled / class 等） ButtonProps—
