js页面引导页怎么实现

今天小编给大家分享一下js页面引导页怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

实现思路1

采用png格式的方式，然后高亮部分镂空，其它部分采用，如下图所示，简单误差大

其效果如图所示，点击下一步等没法按照图片中的“下一步”按钮来操作，就算可以通过方法getBoundingClientRect来获取，也会存在很大误差。这个思路只能说是一种思路，不太推荐使用，方法简单但不够精确

实现思路2

通过组件包装，外层使用的时候传入对应的数据结构,我自己的页面如下所示，所以数据包含title/content/target/entry/leave等内容，这个可以根据实际情况配置，但是target是必须有的，它主要是需要将其高亮展示，同时在旁边挂上content内容引导。

  const stepData = [{
    title: '组件库和图标',
    content: '从基础组件、自定义业务组件、图标库中拖拽组件或图标到画布区域进行页面编排组装',
    target: '#editPageLeftSideBar',
    entry: () => void,
    leave: () => void
  }]

组件里实现下一步切换的公共逻辑，如果存在不是公共逻辑，可以将方法写在上面stepData里，在组件下一步方法里进行调用。

    const clearCls = () => {
        document.body.querySelectorAll('.guide-highlight').forEach(el => {
          el.classList.remove('guide-highlight')
        })
     }

    const addCls = (target) => {
       target.classList.add('guide-highlight');
    }

    const getTarget = () => {
        const currentStep = props.stepData[state.currentStepIndex]
        return document.querySelector(currentStep.target)
    }
    
    const onGoNext = () => {
        // 清除所有的高亮class, 因为我是通过class样式来控制的
        clearCls()

        // 查找下一步的目标对象
        const currentStep = props.stepData[state.currentStepIndex]
        const $stepTarget = getTarget()

        // 给target添加class
        addCls()

        // 执行其它方法，譬如上面的leave/entry方法
        if (typeof state.currentStep.leave === 'function') {
          state.currentStep.leave()
        }
        if (typeof currentStep.entry === 'function') {
          currentStep.entry()
        }

        // 计算引导容器的位置style

        const windowWidth = window.innerWidth
        const windowHieght = window.innerHeight
         const {
          top: targetTop,
          right: targetRight,
          bottom: targeBottom,
          left: targetLeft,
          width: targetWidth
        } = $stepTarget.getBoundingClientRect()
        const {
          width,
          height
        } = tipRef.value.getBoundingClientRect()
        let placement = 'left'
        if (width > height
          && targeBottom < 0.3 * windowHieght) {
          placement = targeBottom > 0.5 * windowHieght ? 'top' : 'bottom'
        } else {
          placement = targetLeft > 0.5 * windowWidth ? 'left' : 'right'
        }

        let styles = {}

        if (placement === 'bottom') {
          styles = {
            top: `${targeBottom + 10}px`,
            left: `${targetLeft + (targetWidth - width) / 2}px`
          }
        } else if (placement === 'top') {
          styles = {
            top: `${windowHieght - targetTop - height - 10}px`,
            left: `${targetLeft + (targetWidth - width) / 2}px`
          }
        } else if (placement === 'left') {
          styles = {
            top: `${targetTop}px`,
            right: `${windowWidth - targetLeft + 10}px`
          }
        } else if (placement === 'right') {
          styles = {
            top: `${targetTop}px`,
            left: `${targetRight + 10}px`
          }
        }
    }

以上就是“js页面引导页怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。