【金秋打卡】第21天 引导页 guide
2022/11/14 4:23:59
本文主要是介绍【金秋打卡】第21天 引导页 guide,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:基于Vue3最新标准,实现后台前端综合解
课程章节: 第一章
课程讲师:Sunday
课程内容
所谓 guide 指的就是 引导页
引导页是软件中经常见到的一个功能,无论是在后台项目还是前台或者是移动端项目中。
通常情况下引导页是通过 聚焦 的方式,高亮一块视图,然后通过文字解释的形式来告知用户该功能的作用。
高亮某一块指定的样式
在高亮的样式处通过文本展示内容
用户可以进行下一次高亮或者关闭事件
首先在组件内创建 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="" 这样子 组件就会自动展示引导了
这篇关于【金秋打卡】第21天 引导页 guide的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-07面向对象编程基础:初学者指南
- 2024-09-07数据结构入门:了解基础概念与简单应用
- 2024-09-07面向对象编程入门:掌握基本概念与实践
- 2024-09-07数据结构入门:从基础概念到基本操作
- 2024-09-07从零开始学数据库:入门级指南与实操技巧
- 2024-09-07综合设备故障分析与预防:实例代码与优化策略
- 2024-09-07数据库入门:轻松掌握数据管理基础
- 2024-09-07面向对象入门:快速掌握对象编程基础
- 2024-09-07数据库教程:入门与实践指南
- 2024-09-07面向对象开发教程 - 从零基础到实践应用的进阶之路