中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js頁面引導頁怎么實現

發布時間:2023-04-19 16:06:41 來源:億速云 閱讀:127 作者:iii 欄目:開發技術

今天小編給大家分享一下js頁面引導頁怎么實現的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。

實現思路1

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

js頁面引導頁怎么實現

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

js頁面引導頁怎么實現

實現思路2

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

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

js頁面引導頁怎么實現

組件里實現下一步切換的公共邏輯,如果存在不是公共邏輯,可以將方法寫在上面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頁面引導頁怎么實現”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

js
AI

长海县| 晋宁县| 浦县| 图木舒克市| 静海县| 南丰县| 儋州市| 晋宁县| 华蓥市| 筠连县| 龙口市| 嘉兴市| 葫芦岛市| 麻栗坡县| 鄱阳县| 达尔| 忻城县| 桐乡市| 通山县| 康平县| 贺州市| 久治县| 容城县| 海盐县| 武平县| 和平县| 天峨县| 马尔康县| 斗六市| 句容市| 新巴尔虎右旗| 云龙县| 彭山县| 贵定县| 岳池县| 自治县| 图片| 甘洛县| 政和县| 花莲县| 宣汉县|