当前位置: 首页 > article >正文

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 

http://www.kler.cn/a/614178.html

相关文章:

  • Spring中的IOC及AOP概述
  • LeetCode 2360.图中的最长环:一步一打卡(不撞南墙不回头) - 通过故事讲道理
  • Python包管理完全指南:pip常用命令与最佳实践
  • mysql.8.4.4--初始化报错--libnuma.so.1缺失
  • 用Python打造智能宠物:强化学习的奇妙之旅
  • 《新凯来 :中国半导体设备制造行业从“跟随者”向“挑战者”的角色转变》
  • OpenAI API - 内置工具使用
  • 城电科技|零碳园区光伏太阳花绽放零碳绿色未来
  • 鸿蒙Next-集成HmRouter的路由模式
  • Spring Initializr搭建spring boot项目
  • 【数据结构】[特殊字符] 并查集优化全解:从链式退化到近O(1)的性能飞跃 | 路径压缩与合并策略深度实战
  • MDK中结构体的对齐、位域、配合联合体等用法说明
  • vivado IP学习 divider
  • MySQL 用户权限与安全管理
  • 无人机进行航空数据收集对于分析道路状况非常有用-使用无人机勘测高速公路而不阻碍交通-
  • 【cursor】 在 chat 对话框中,实现字体加粗,之护眼计划
  • 【Kafka】分布式消息队列的核心奥秘
  • C++ 仿函数详解:让对象像函数一样调用
  • 嵌入式八股文(四)FreeRTOS篇
  • Java基于SpringBoot的网络云端日记本系统,附源码+文档说明