ycwh/miniapp/pages/components/helper.vue

<template>
<u-overlay :show="step > 0" @click="showHelp" opacity="0.7">
	<view class="width-100 height-100">
		<view class="opacity-06 c-g-white p-a border-round-20" :style="[helpRectStyle]"></view>
		<view class="p-a f-40 col-white t-bold width-100 padding-box" :style="[helpTextStyle]">{{helpText}}</view>
	</view>
</u-overlay>
</template>

<script>
export default {
	data() {
		return {
			step: 0,//第几步，0则还未开始
			helpRectStyle: {},
			helpText: '',
			helpTextStyle: {},
			options: [],
		}
	},
	methods: {
		showHelp() {//显示帮助信息
			this.step++//先往前走一步
			if (this.step > this.options.length) {//到底了，就关闭
				this.close()
			} else {//还有，则继续显示
				let option = this.options[this.step - 1]//取到配置
				this.showHelpRect(option)//显示高亮框
				this.showHelpText(option.text)//显示帮助文字
			}
		},
		showHelpRect(option) {//显示高亮框
			uni.createSelectorQuery().in(option.ref).select(option.selector).boundingClientRect(res => {
				this.helpRectStyle = {
					width: (res.width + 20) + 'px',
					height: (res.height + 20) + 'px',
					top: (res.top - 10) + 'px',
					left: (res.left - 10) + 'px',
				}
				let top = option.text.length / 16 * 35//每16个字占一行，一行35个像素
				top = top < 70 ? 70 : top //至少70个像素
				this.helpTextStyle = {
					top: (res.top - top) + 'px',
				}
			}).exec()
		},
		showHelpText(text) {//显示文字部分
			this.helpText = text
		},
		
		// ------- 对外的接口 --------
		open(options) {
			this.options = options
			this.showHelp()
		},
		close() {
			this.step = 0
		},
	},
}
</script>

<style>
</style>