js頁面引導(dǎo)頁的實現(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)容引導(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` } } }
插件
introjs/driver.js等第三方庫
到此這篇關(guān)于js頁面引導(dǎo)頁的實現(xiàn)思路總結(jié)的文章就介紹到這了,更多相關(guān)js 引導(dǎo)頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
bootstrap里bootstrap動態(tài)加載下拉框的實例講解
今天小編就為大家分享一篇bootstrap里bootstrap動態(tài)加載下拉框的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果實例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自動播放視頻模仿gif動圖效果的相關(guān)資料,通過本文介紹的方法可以實現(xiàn)自動播放視頻,視頻無控制條無聲音且自動循環(huán)播放,需要的朋友可以參考下2021-07-07JS使用Date對象實時顯示當(dāng)前系統(tǒng)時間簡單示例
這篇文章主要介紹了JS使用Date對象實時顯示當(dāng)前系統(tǒng)時間,涉及javascript基于定時器動態(tài)操作Date對象相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08