FlowVue/src/hooks/web/useGuide.ts
2023-10-31 10:07:21 +08:00

50 lines
1.2 KiB
TypeScript

import { Config, driver } from 'driver.js'
import 'driver.js/dist/driver.css'
import { useDesign } from '@/hooks/web/useDesign'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const { variables } = useDesign()
export const useGuide = (options?: Config) => {
const driverObj = driver(
options || {
showProgress: true,
nextBtnText: t('common.nextLabel'),
prevBtnText: t('common.prevLabel'),
doneBtnText: t('common.doneLabel'),
steps: [
{
element: `#${variables.namespace}-menu`,
popover: {
title: t('common.menu'),
description: t('common.menuDes'),
side: 'right'
}
},
{
element: `#${variables.namespace}-tool-header`,
popover: {
title: t('common.tool'),
description: t('common.toolDes'),
side: 'left'
}
},
{
element: `#${variables.namespace}-tags-view`,
popover: {
title: t('common.tagsView'),
description: t('common.tagsViewDes'),
side: 'bottom'
}
}
]
}
)
return {
...driverObj
}
}