方式一 driver.js
安裝
npm install driver.js --save
代碼
1、存放每一步的提示信息
utils - driver.js
export default [
{
element: '#some-element1',
popover: {
title: '第一項(xiàng)',
description: '第一項(xiàng)的描述',
position: 'bottom',
}
},
{
element: '#some-element2',
popover: {
title: '第二項(xiàng)',
description: '第二項(xiàng)的描述',
position: 'top',
}
},
]
2肥哎、掛載實(shí)例對象
main.js
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import Vue from 'vue'
Vue.prototype.$driver = new Driver()
自定義提示語配置
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css'
import Vue from 'vue'
Vue.prototype.$driver = new Driver({
doneBtnText: '完成', // Text on the final button
closeBtnText: '關(guān)閉', // Text on the close button for this step
stageBackground: 'salmon', // Background color for the staged behind highlighted element
nextBtnText: '下一步', // Next button text for this step
prevBtnText: '上一步', // Previous button text for this step
})
3客冈、在頁面中使用
<div id="some-element1">第一個(gè)</div>
<div id="some-element2">第二個(gè)</div>
import driverStep from "@/utils/driver"
// 在mounted生命周期或方法中執(zhí)行下述代碼
this.$driver.defineSteps(driverStep)
this.$driver.start()
// 方法
start () {
this.$nextTick(() => {
this.$driver.defineSteps(driverStep)
this.$driver.start()
})
}
問題
1爱葵、當(dāng)要高亮的元素的父級(jí)或父輩級(jí)的樣式為固定定位fixed
時(shí)河劝,高亮顯示不出內(nèi)容。需要將固定定位改為絕對定位absolute
慎恒。
方式二 手動(dòng)實(shí)現(xiàn)
因?yàn)樾枨笮枰瑫r(shí)高亮兩個(gè)地方任内,并且UI的樣式與插件不同撵渡。所以最后決定手動(dòng)實(shí)現(xiàn)。
說下思路死嗦,先不貼代碼了趋距。
在最外層實(shí)現(xiàn)一個(gè)遮罩,通過vuex來控制遮罩的顯示與隱藏越除。遮罩內(nèi)部通過定位來實(shí)現(xiàn)每個(gè)步驟节腐,同樣通過vuex來控制顯示與隱藏。每一步都改變公共變量來切換下一步摘盆。