手记

【金秋打卡】第21天 引导页 guide

课程名称:基于Vue3最新标准,实现后台前端综合解


课程章节: 第一章


课程讲师:Sunday


课程内容

    


     所谓 guide 指的就是 引导页


        引导页是软件中经常见到的一个功能,无论是在后台项目还是前台或者是移动端项目中。


        通常情况下引导页是通过 聚焦 的方式,高亮一块视图,然后通过文字解释的形式来告知用户该功能的作用。

        

  1.  高亮某一块指定的样式

  2.  在高亮的样式处通过文本展示内容

  3.  用户可以进行下一次高亮或者关闭事件


首先在组件内创建 guide.vue

<template>
  <div>
    <el-tooltip :content="$t('msg.navBar.guide')">
      <svg-icon icon="guide" />
    </el-tooltip>
  </div>
</template>

<script setup></script>

<style scoped></style>

然后引入

<guide class="right-menu-item hover-effect" />

import Guide from '@/components/Guide'


然后使用 driver.js

npm i driver.js@0.9.8
<script setup>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import { onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

const i18n = useI18n()

let driver = null
onMounted(() => {
  driver = new Driver({
    // 禁止点击蒙版关闭
    allowClose: false,
    closeBtnText: i18n.t('msg.guide.close'),
    nextBtnText: i18n.t('msg.guide.next'),
    prevBtnText: i18n.t('msg.guide.prev')
  })
})
</script>

创建 steps.js

const steps = i18n => {
  return [
    {
      element: '#guide-start',
      popover: {
        title: i18n.t('msg.guide.guideTitle'),
        description: i18n.t('msg.guide.guideDesc'),
        position: 'bottom-right'
      }
    },
    {
      element: '#guide-hamburger',
      popover: {
        title: i18n.t('msg.guide.hamburgerTitle'),
        description: i18n.t('msg.guide.hamburgerDesc')
      }
    }
  ]}export default steps

在需要高亮显示的地方 使用id=""   这样子 组件就会自动展示引导了

0人推荐
随时随地看视频
慕课网APP