1.安装依赖
npm install --save deiver.js
2.引入组件(可以全局引入,也可以在使用的组件中引入)这里只在组件里引入
import 'driver.js/dist/driver.min.css'
import Driver from 'driver.js'
3.在mountd里定义提示框内容(这里有一个坑,就是点击浏览器后退时候,提示框还会存在,所以我添加了window.addEventListener监听时候点击后退前进来关闭提示框,并且添加了首次使用接口判断)
mounted() {
const driver = new Driver({
doneBtnText: '完成',
closeBtnText: '关闭',
stageBackground: '#fff',
nextBtnText: '下一步',
prevBtnText: '上一步'
})
driver.defineSteps([
{
element: '#create-post1',
popover: {
title: '请选择设计类型',
description: '如要突出商品请选择第一种'
}
},
{
element: '#create-post2',
popover: {
title: '选择上传图片',
description: '您可以点击此处,上传图片'
}
},
{
element: '#create-post3',
popover: {
title: '选择生成尺寸',
description: '点击此处,切换需要的图片尺寸'
}
},
{
element: '#create-post4',
popover: {
title: '选择生成的文案',
description: '在此处编辑文案,会出现在生成的图片中'
}
}
,
{
element: '#create-post5',
popover: {
title: '点击生成',
description: '系统已经给您默认了一张商品图,点击"智能生成",看看效果把'
}
}
])
window.addEventListener("popstate", function(e) {
driver.reset()
}, false);
let mydriver = localStorage.getItem('driver')
if(mydriver == null){
getIsGenerate().then(res=>{
console.log(res.data)
if(res.data == false){
localStorage.setItem('driver',0)
driver.start()
}
else if(res.data == true){
localStorage.setItem('driver',1)
}
}).catch(()=>{
})
}
//下面测试功能用代码上线可以删除
else if(mydriver == 0){
driver.start()
getIsGenerate().then(res=>{
console.log(res.data)
if(res.data == false){
localStorage.setItem('driver',0)
driver.start()
}
else if(res.data == true){
localStorage.setItem('driver',1)
}
}).catch(()=>{
})
}
},
4.把定义过的提示框通过element里的id与页面中的一一对应就可以添加提示功能