您好,登錄后才能下訂單哦!
今天小編給大家分享一下js頁面引導(dǎo)頁怎么實現(xiàn)的相關(guān)知識點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
采用png格式的方式,然后高亮部分鏤空,其它部分采用,如下圖所示,簡單誤差大
其效果如圖所示,點(diǎn)擊下一步等沒法按照圖片中的“下一步”按鈕來操作,就算可以通過方法getBoundingClientRect來獲取,也會存在很大誤差。這個思路只能說是一種思路,不太推薦使用,方法簡單但不夠精確
通過組件包裝,外層使用的時候傳入對應(yīng)的數(shù)據(jù)結(jié)構(gòu),我自己的頁面如下所示,所以數(shù)據(jù)包含title/content/target/entry/leave等內(nèi)容,這個可以根據(jù)實際情況配置,但是target是必須有的,它主要是需要將其高亮展示,同時在旁邊掛上content內(nèi)容引導(dǎo)。
const stepData = [{ title: '組件庫和圖標(biāo)', content: '從基礎(chǔ)組件、自定義業(yè)務(wù)組件、圖標(biāo)庫中拖拽組件或圖標(biāo)到畫布區(qū)域進(jìn)行頁面編排組裝', target: '#editPageLeftSideBar', entry: () => void, leave: () => void }]
組件里實現(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, 因為我是通過class樣式來控制的 clearCls() // 查找下一步的目標(biāo)對象 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() } // 計算引導(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` } } }
以上就是“js頁面引導(dǎo)頁怎么實現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。