陈凯龙
4 years ago
parent
cb558f8af9
commit
0832194e61
@ -0,0 +1,3 @@
|
|||||||
|
import ContentWrap from './src/ContentWrap.vue'
|
||||||
|
|
||||||
|
export { ContentWrap }
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ElCard, ElTooltip } from 'element-plus'
|
||||||
|
import { propTypes } from '@/utils/propTypes'
|
||||||
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign()
|
||||||
|
|
||||||
|
const prefixCls = getPrefixCls('content-wrap')
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
title: propTypes.string.def(''),
|
||||||
|
message: propTypes.string.def('')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ElCard :class="prefixCls" shadow="never">
|
||||||
|
<template v-if="title" #header>
|
||||||
|
<div class="flex items-center">
|
||||||
|
{{ title }}
|
||||||
|
<ElTooltip v-if="message" effect="dark" placement="right">
|
||||||
|
<template #content>
|
||||||
|
<div class="max-w-200px">{{ message }}</div>
|
||||||
|
</template>
|
||||||
|
<Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
|
||||||
|
</ElTooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</ElCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import introJs from 'intro.js'
|
||||||
|
import { IntroJs, Step, Options } from 'intro.js'
|
||||||
|
import 'intro.js/introjs.css'
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
|
|
||||||
|
export const useIntro = (setps?: Step[], options?: Options) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const { variables } = useDesign()
|
||||||
|
|
||||||
|
const defaultSetps: Step[] = setps || [
|
||||||
|
{
|
||||||
|
element: `#${variables.namespace}-menu`,
|
||||||
|
title: t('common.menu'),
|
||||||
|
intro: t('common.menuDes'),
|
||||||
|
position: 'right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: `#${variables.namespace}-tags-view`,
|
||||||
|
title: t('common.tagsView'),
|
||||||
|
intro: t('common.tagsViewDes'),
|
||||||
|
position: 'bottom'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const defaultOptions: Options = options || {
|
||||||
|
prevLabel: t('common.prevLabel'),
|
||||||
|
nextLabel: t('common.nextLabel'),
|
||||||
|
skipLabel: t('common.skipLabel'),
|
||||||
|
doneLabel: t('common.doneLabel')
|
||||||
|
}
|
||||||
|
|
||||||
|
const introRef: IntroJs = introJs()
|
||||||
|
|
||||||
|
introRef.addSteps(defaultSetps).setOptions(defaultOptions)
|
||||||
|
|
||||||
|
return {
|
||||||
|
introRef
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ContentWrap } from '@/components/ContentWrap'
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
import { useIntro } from '@/hooks/web/useIntro'
|
||||||
|
import { ElButton } from 'element-plus'
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const { introRef } = useIntro()
|
||||||
|
|
||||||
|
const guideStart = () => {
|
||||||
|
introRef.start()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ContentWrap :title="t('guideDemo.guide')" :message="t('guideDemo.message')">
|
||||||
|
<ElButton type="primary" @click="guideStart">{{ t('guideDemo.start') }}</ElButton>
|
||||||
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue