【微前端】国际化中后台系统系列-3

本篇文章将介绍中后台系统中新手引导页组件的使用

效果展示

hooks用法

<script setup lang="ts">
import useBaseGuide from '@admin/_share/components/base/base-guide/useBaseGuide'

const steps = [
  {
    target: 'g-base-guide-test', //元素id
    placement: 'bottom', // popper方向
    popper: {
      title: '标题1',
      content: '内容1',
    },
  },
  {
    target: 'g-base-guide-test1',
    placement: 'bottom',
    popper: {
      title: '标题2',
      content: '内容2',
    },
  },
]

const [start] = useBaseGuide(steps)
start()
</script>

<template>
  <ElButton
    id="g-base-guide-test"
    plain
  >
   {{ '按钮1' }}
  </ElButton>

  <ElButton
    id="g-base-guide-test1"
    plain
  >
    {{ '按钮2' }}
  </ElButton>
</template>

组件用法

<script setup lang="ts">
import BaseGuide from '@admin/_share/components/base/base-guide'

const steps = [
  {
    target: 'g-base-guide-test', //元素id
    placement: 'bottom', // popper方向
    popper: {
      title: '标题1',
      content: '内容1',
    },
  },
  {
    target: 'g-base-guide-test1',
    placement: 'bottom',
    popper: {
      title: '标题2',
      content: '内容2',
    },
  },
]
</script>

<template>
  <ElButton
    id="g-base-guide-test"
    plain
  >
   {{ '按钮1' }}
  </ElButton>

  <ElButton
    id="g-base-guide-test1"
    plain
  >
    {{ '按钮2' }}
  </ElButton>
  
  <BaseGuide :steps="steps"/>
</template>

组件自定义插槽用法

<script setup lang="ts">
import BaseGuide from '@admin/_share/components/base/base-guide'

const steps = [
  {
    target: 'g-base-guide-test', //元素id
    placement: 'bottom', // popper方向
    popper: {
      title: '标题1',
      content: '内容1',
    },
  },
  {
    target: 'g-base-guide-test1',
    placement: 'bottom',
    popper: {
      title: '标题2',
      content: '内容2',
    },
  },
]
</script>

<template>
  <ElButton
    id="g-base-guide-test"
    plain
  >
   {{ '按钮1' }}
  </ElButton>

  <ElButton
    id="g-base-guide-test1"
    plain
  >
    {{ '按钮2' }}
  </ElButton>
  
  <BaseGuide :steps="steps">
    <template #title="step">
       我是自定义标题
    </template>
    
    <template #content="step">
       我是自定义内容
    </template>
  </BaseGuide>
</template>

最后

新手引导页组件BaseGuide的代码可以在后续开源后再查看，欢迎大家一起探讨。