操作引导

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Tabs Props

参数	说明	类型	可选值	默认值
value	当前步骤序号	number		0
mode	步骤列表	string	hard-light / darken

Methods

事件名称	说明	参数
open	打开
close	关闭

Events

事件名称	说明	参数
change	切换步骤时触发	current
skip	跳过时触发	current
done	完成时触发	step

Options

事件名称	说明	类型	可选值	默认值
selector	css 选择器	string
content	内容	string
justify	水平布局方式	string		start
style	样式	object
image.url	图片地址	string
image.style	图片样式	object
showPrev	是否显示上一步	boolean		true
showNext	是否显示下一步	boolean		true
showSkip	是否显示跳过	boolean		false
nextText	下一步文本	string		下一步
prevText	上一步文本	string		上一步
skipText	跳过文本	string		跳过
doneText	完成文本	string		完成文本

示例

基本用法

<template>
	<cl-guide ref="guide" mode="darken" @change="onChange" @done="onDone" @skip="onSkip">
		<view class="demo-step-guide">
			<view class="row">
				<text class="text" @tap="toast">文字</text>
			</view>

			<view class="row">
				<view class="block">块</view>
			</view>

			<view class="row">
				<cl-image
					class="image"
					:size="200"
					src="https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/avatar.jpeg"
				/>
			</view>

			<view class="row">
				<text class="position">左下角定位</text>
			</view>

			<view class="row">
				<view class="content">
					<div class="component">
						<cl-tag>其他组件</cl-tag>
					</div>
				</view>
			</view>
		</view>
	</cl-guide>
</template>

export default {
	data() {
		return {
			steps: [
				{
					selector: ".text",
					content: "文字描述,可以设置justify修改水平位置",
					justify: "center"
				},
				{
					selector: ".block",
					style: {
						"border-radius": "100rpx"
					},
					content: "如果page有设置颜色,底色无法取消.则可以自定义样式修改圆角",
					onClick({ next }) {
						next();
					},
					onNext({ step, current, next, prev, skip, done }) {
						next();
					}
				},
				{
					selector: ".component",
					content: "自定义组件时,需要在外面包一层view"
				},
				{
					selector: ".image",
					image: {
						url: "/static/images/guide.png",
						style: {
							height: "240rpx",
							width: "320rpx"
						}
					}
				},
				{
					selector: ".position",
					content: "超出时,会自己调整位置"
				}
			]
		};
	},

	mounted() {
		this.$refs["guide"].defineSteps(this.steps);
		this.$refs["guide"].start();
	},

	methods: {
		onChange(index) {
			console.log("index", index);
		},

		onDone(step) {
			console.log("step", step);
		},

		onSkip(index) {
			console.log("skip", index);
		}
	}
};

.demo-step-guide {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	width: 100%;

	.row {
		margin: 20rpx;
	}

	.position {
		position: fixed;
		left: 20rpx;
		bottom: 20rpx;
	}

	.block {
		height: 150rpx;
		width: 150rpx;
		background-color: #fff;
		border-radius: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}
}