56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { ContentWrap } from '@/components/ContentWrap'
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
import { ElButton } from 'element-plus'
|
|
import { driver } from 'driver.js'
|
|
import 'driver.js/dist/driver.css'
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const { variables } = useDesign()
|
|
|
|
const driverObj = driver({
|
|
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'
|
|
}
|
|
}
|
|
]
|
|
})
|
|
|
|
const guideStart = () => {
|
|
driverObj.drive()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ContentWrap :title="t('guideDemo.guide')" :message="t('guideDemo.message')">
|
|
<ElButton type="primary" @click="guideStart">{{ t('guideDemo.start') }}</ElButton>
|
|
</ContentWrap>
|
|
</template>
|