js頁面引導頁的實現(xiàn)思路總結(jié)

更新時間：2023年04月19日 10:01:55 作者：芹小妹_Jessica

在同學們使用某些網(wǎng)站的新版本頁面的時候，經(jīng)常會出現(xiàn)一個類似于新手引導一樣的效果，本文主要介紹了js頁面引導頁的實現(xiàn)思路總結(jié)，感興趣的可以了解一下

實現(xiàn)思路1

采用png格式的方式，然后高亮部分鏤空，其它部分采用，如下圖所示，簡單誤差大

其效果如圖所示，點擊下一步等沒法按照圖片中的“下一步”按鈕來操作，就算可以通過方法getBoundingClientRect來獲取，也會存在很大誤差。這個思路只能說是一種思路，不太推薦使用，方法簡單但不夠精確

實現(xiàn)思路2

通過組件包裝，外層使用的時候傳入對應(yīng)的數(shù)據(jù)結(jié)構(gòu),我自己的頁面如下所示，所以數(shù)據(jù)包含title/content/target/entry/leave等內(nèi)容，這個可以根據(jù)實際情況配置，但是target是必須有的，它主要是需要將其高亮展示，同時在旁邊掛上content內(nèi)容引導。

  const stepData = [{
    title: '組件庫和圖標',
    content: '從基礎(chǔ)組件、自定義業(yè)務(wù)組件、圖標庫中拖拽組件或圖標到畫布區(qū)域進行頁面編排組裝',
    target: '#editPageLeftSideBar',
    entry: () => void,
    leave: () => void
  }]

組件里實現(xiàn)下一步切換的公共邏輯，如果存在不是公共邏輯，可以將方法寫在上面stepData里，在組件下一步方法里進行調(diào)用。

    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()

        // 執(zhí)行其它方法，譬如上面的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`
          }
        }
    }