js頁(yè)面引導(dǎo)頁(yè)的實(shí)現(xiàn)思路總結(jié)

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

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

實(shí)現(xiàn)思路1

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

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

實(shí)現(xiàn)思路2

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

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

組件里實(shí)現(xiàn)下一步切換的公共邏輯，如果存在不是公共邏輯，可以將方法寫在上面stepData里，在組件下一步方法里進(jìn)行調(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, 因?yàn)槲沂峭ㄟ^class樣式來控制的
        clearCls()

        // 查找下一步的目標(biāo)對(duì)象
        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()
        }

        // 計(jì)算引導(dǎo)容器的位置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`
          }
        }
    }

插件

introjs/driver.js等第三方庫(kù)

到此這篇關(guān)于js頁(yè)面引導(dǎo)頁(yè)的實(shí)現(xiàn)思路總結(jié)的文章就介紹到這了,更多相關(guān)js 引導(dǎo)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: