uni-app:指引蒙层

组件说明

指引蒙层组件：
通过id标签，突出对应id中的模块；
可以自定义提示词。
点击任意位置关闭蒙层

效果展示和使用示例

切换id之后的效果：

代码实现

<template>
    <view class="guide-mask" v-if="showMask" @click="hideMask">
        <view :style="{ top: top + 'px', left: left + 'px', width: width + 'px', height: height + 'px' }"
              class="transparent-hole"></view>
        <img :style="{ left: left + width / 2.5 - arrowWidth / 2 + 'px', top: top + height + 10 + 'px' }"
             src="@/static/icon/guide-arrow.png" class="guide-arrow"/>
        <view