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頁面引導頁怎么實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。