当前位置：首页 > news >正文

vue使用driver.js引导并自定义样式和按钮

news 来源：原创 2024/9/20 11:52:45

参考网址https://driverjs.com/docs/installation

安装

npm install driver.js

以下是1.3.1版本的基本使用方法

import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'
mounted() {// 实例化driver对象const driverObj = driver({showProgress: true,steps: [{ element: '.title', popover: { title: 'Title', description: 'Description' } },{ element: '.desc', popover: { title: 'Title', description: 'Description' } }]})driverObj.drive()
}

展示效果

常用属性及方法：

overlayColor: 'red', //遮罩颜色

显示哪个按钮，不要哪个就去掉，全不显示赋值为['']

showButtons: ['next','previous','close'],

改变按钮文字

nextBtnText: '下一步',
prevBtnText: '上一步',
doneBtnText: '完成',

改变样式

//js部分
popoverClass: 'customer-popover',//css部分
.customer-popover {.driver-popover-next-btn {color: #1583f8;}
}

onNextClick （点击下一步按钮触发）

注意：调用此方法，点击下一步按钮不会自动执行，需要手动调用driverObj.moveNext();

onNextClick: () => {console.log('Next Button Clicked')// Implement your own functionality heredriverObj.moveNext()
},

onPrevClick（点击上一步按钮触发）

注意：调用此方法，点击上一步按钮不会自动执行，需要手动调用driverObj.movePrevious();

onPrevClick: () => {console.log('Previous Button Clicked')// Implement your own functionality heredriverObj.movePrevious()
},

onCloseClick（点击关闭按钮触发）

注意：调用此方法，点击关闭按钮不会自动关闭，需要手动调用driverObj.destroy();

onCloseClick: () => {console.log('Close Button Clicked')// Implement your own functionality heredriverObj.destroy()
},

onDestroyStarted（退出引导时触发）

注意：调用此方法，点击其他区域不会自动关闭，需要手动调用driverObj.destroy();

 onDestroyStarted: () => {if (!driverObj.hasNextStep() || confirm("Are you sure?")) {driverObj.destroy();}},

自定义按钮

onPopoverRender: (popover, { config, state }) => {const firstButton = document.createElement('button')firstButton.innerText = 'Go to First'popover.footerButtons.appendChild(firstButton)firstButton.addEventListener('click', () => {driverObj.drive(0)})
},

完整配置

const driverObj = driver({showProgress: true,overlayColor: 'red', //遮罩颜色steps: [{element: '.title',popover: {title: '星标',description: '点击 Star 按钮可以星标这个作品，在我的主页可以查看我星标过的作品'}},{element: '.desc',popover: { title: '运行', description: '点击 Run 按钮可以运行这个作品' }}],showButtons: ['next', 'previous'],nextBtnText: '下一步',prevBtnText: '上一步',doneBtnText: '完成',popoverClass: 'customer-popover',onPopoverRender: (popover, { config, state }) => {const firstButton = document.createElement('button')firstButton.classList.add('pass-btn')firstButton.innerText = '跳过'popover.footerButtons.appendChild(firstButton)firstButton.addEventListener('click', () => {console.log(666)driverObj.destroy()})},onNextClick: () => {console.log('Next Button Clicked')// Implement your own functionality heredriverObj.moveNext()},onPrevClick: () => {console.log('Previous Button Clicked')// Implement your own functionality heredriverObj.movePrevious()},onCloseClick: () => {console.log('Close Button Clicked')// Implement your own functionality heredriverObj.destroy()},onDestroyStarted: () => {console.log('onDestroyStarted is called when the user tries to exit the tour')driverObj.destroy()}
})
driverObj.drive()<style>
.customer-popover {min-width: 360px;max-width: 500px;padding: 22px;.driver-popover-next-btn,.driver-popover-prev-btn,.pass-btn {color: #fff;background-color: #2774e9;border-color: #2774e9;height: 32px;padding: 0 15px;font-size: 16px;border-radius: 6px;text-shadow: inherit;&:hover,&:focus {background-color: #2774e9;}}.driver-popover-description {margin-bottom: 20px;margin-top: 20px !important;}
}
</style>

修改样式后展示效果