Vue新手指引

最新推荐文章于 2024-08-19 23:03:31 发布
最新推荐文章于 2024-08-19 23:03:31 发布
阅读量1.4k 收藏 3
点赞数
文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Programmerwhite/article/details/120451086
版权

WEB

driver.js

npm install driver.js --save

utils / driver.js

export default [
    {
        element: '#some-element1',
        popover: {
          title: '第一项',
          description: '第一项的描述',
          position: 'bottom',
        }
    },
    {
        element: '#some-element2',
        popover: {
          title: '第二项',
          description: '第二项的描述',
          position: 'top',
        }
    },
]

挂载

import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import Vue from 'vue'
Vue.prototype.$driver = new Driver()

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css'
import Vue from 'vue'
Vue.prototype.$driver = new Driver({  
    allowClose: false, //禁止点击外部关闭
    doneBtnText: '完成', // 完成按钮标题
    closeBtnText: '关闭', // 关闭按钮标题
    stageBackground: '#fff', // 引导对话的背景色
    nextBtnText: '下一步', // 下一步按钮标题
    prevBtnText: '上一步', // 上一步按钮标题
})

.vue

<div id="some-element1">第一个</div>
<div id="some-element2">第二个</div>

import driverStep from "@/utils/driver"

// 在mounted生命周期或方法中执行下述代码
this.$driver.defineSteps(driverStep)
this.$driver.start()

// 方法
start () {
  this.$nextTick(() => {
    this.$driver.defineSteps(driverStep)
    this.$driver.start()
  })
}

Vue3.0 compositionAPI

<!--
 * @Author: zhang gen yuan
 * @Date: 2021-09-17 11:01:54
 * @Descripttion: 
-->
<template>
  <h1 id="div1">1111111111</h1>
  <h1 id="div2">2222222222</h1>
</template>

<script setup>
import Driver from "driver.js";
import driverStep from "/@/utils/driver";
import { onMounted, nextTick } from "vue";
import { useRouter } from 'vue-router'
let router = useRouter()
let $driver = new Driver({
  allowClose: false, //禁止点击外部关闭
  doneBtnText: "完成", // 完成按钮标题
  closeBtnText: "关闭", // 关闭按钮标题
  stageBackground: "#fff", // 引导对话的背景色
  nextBtnText: "下一步", // 下一步按钮标题
  prevBtnText: "上一步", // 上一步按钮标题
  onHighlightStarted: (Element) => {
    // 监听当前高亮DOM
  },
  onHighlighted: (Element) => {
    // 监听当前高亮DOM
  },     
  onDeselected: (Element) => {
    // 监听关闭按钮
  },
  onReset: (Element) => {
    // 监听完成按钮
  },          
  onNext: (Element) => {
    // 监听下一步
  },           
  onPrevious: (Element) => {
    //监听上一步按钮
  },  
});
onMounted(() => {
  $driver.defineSteps(driverStep);
  $driver.start();
});
</script>

<style>
</style>

uniAPP

index.vue

<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png" id="testid1"></image>
		<view class="text-area" id="testid2">
			<text class="title">Hello</text>
		</view>
		<view id="testid3">测试行1</view>
		<view id="testid4"><button>测试按钮1</button></view> -->
		<view id="testid1">111</view>
		<view id="testid2">222</view>
		<view id="testid3">333</view>
		<view id="testid4">444</view>
		<!-- 新手引导 -->
		<guide :show="showGuide" :width="cWidth" :height="cHeight" :left="cLeft" :top="cTop"
			:showMessage='cShowMsg' :currentIndex="currentIndex" :noticeArray="noticeArray" @click="clicktoNext">
		</guide>
	</view>
</template>

<script>
	import guide from '@/components/guide/guide.vue'
	export default {
		data() {
			return {
				showGuide: true, //引导是否显示 
				cShowMsg: '', // 展示的解释语
				cWidth: '',
				cHeight: '',
				cLeft: '',
				cTop: '',
				currentIndex: 0,
				//配置需要显示引导的view以及引导显示的msg
				noticeArray: [{
						"showID": "testid1", // 对应的id
						"showMessage": "测试文本1", // 对应的解释文本
						"type": "left" // 解释框的气泡类型
					},
					{
						"showID": "testid2",
						"showMessage": "测试文本2",
						"type": "right"
					},
					{
						"showID": "testid3",
						"showMessage": "测试多行文本测试多行文本测试多行文本测试多行文本测试多行文本测试多行文本测试多行文本测试多行文本测试多行文本测试多行文本",
						"type": "top"
					},
					{
						"showID": "testid4",
						"showMessage": "测试文本4",
						"type": "bottom"
					}
				]
			}
		},
		components: {
			guide
		},
		onLoad() {
			let _this = this;
			this.$nextTick(function() {
				if (_this.currentIndex >= _this.noticeArray.length) {
					_this.showGuide = false;
					return;
				}
				_this.showGuide = true;
				_this.cShowMsg = _this.noticeArray[_this.currentIndex].showMessage;
				var idS = '#' + _this.noticeArray[_this.currentIndex].showID;
				console.log(idS)
				//根据布局信息显示引导框位置
				const query = uni.createSelectorQuery().in(_this);
				query.select(idS).boundingClientRect(data => {
					console.log("得到布局位置信息" + JSON.stringify(data));
					_this.cWidth = data.width;
					_this.cHeight = data.height;
					_this.cLeft = data.left;
					_this.cTop = data.top;
				}).exec();
			});
		},
		methods: {
			clicktoNext() {
				if (this.currentIndex >= this.noticeArray.length) {
					this.showGuide = false;
					return;
				}
				this.noticeArray[this.currentIndex].zindex = 0;
				this.cShowMsg = '';
				this.currentIndex++;
				if (this.currentIndex >= this.noticeArray.length) {
					this.showGuide = false;
					return;
				}
				this.cShowMsg = this.noticeArray[this.currentIndex].showMessage;
				var idS = '#' + this.noticeArray[this.currentIndex].showID;
				console.log(idS)
				const query = uni.createSelectorQuery().in(this);
				query.select(idS).boundingClientRect(data => {
					this.cWidth = data.width;
					this.cHeight = data.height;
					this.cLeft = data.left;
					this.cTop = data.top;
				}).exec();

			},
		}
	}
</script>

guide.vue

<!-- guide.vue -->
<template>
	<view v-show="show" class="main" @touchmove.stop>
		<view class="rect-shadow" :style="{'width':width+'px','height':height+'px','left':left+'px',top:top+'px','border-radius': noticeArray[currentIndex].radius?noticeArray[currentIndex].radius+'rpx':'' }"></view>
		<template v-if="noticeArray[currentIndex].type == 'left' ">
			<view  class="show-message_left" :style="{'top': top +'px', 'right': winWidth-right+width+20+'px' }">
				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
			</view>			
		</template>
		<template v-if="noticeArray[currentIndex].type == 'top' ">
			<view :class="left<(winWidth/2)?'show-message_top_left':'show-message_top_right'" :style="{'top': (top-height-topMsgHeght) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right)+'px':''  }">
				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
			</view>			
		</template>
		<template v-if="noticeArray[currentIndex].type == 'right' ">
			<view  class="show-message_right" :style="{'top': top +'px', 'left': (left+width+20) +'px' }">
				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
			</view>			
		</template>
		<template v-if="noticeArray[currentIndex].type == 'bottom' ">
			<view :class="left<(winWidth/2)?'show-message_bottom_left':'show-message_bottom_right'" :style="{'top': (top+height+15) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
			</view>			
		</template>
		<view class="cover-wrap" >
			<view class="guide-next" @tap="click" :style="{color: currentIndex==noticeArray.length-1? '#EA3E4F':'#000000'}">{{nextText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "guide",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			left: {
				type: [Number, String],
				default: ''
			},
			right: {
				type: [Number, String],
				default: ''
			},
			top: {
				type: [Number, String],
				default: ''
			},
			width: {
				type: [Number, String],
				default: ''
			},
			height: {
				type: [Number, String],
				default: ''
			},
			showMessage: {
				type: String,
				default: ''
			},
			currentIndex: {
				type: Number,
				default: 0
			},
			noticeArray: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				topMsgHeght: 0,
				winWidth: 0,
				nextText: '下一步'
			}
		},
		watch: {
			show(n) {},
			currentIndex(value) {
				if (value != this.noticeArray.length&&this.noticeArray[value].type == 'top') {
					const className = this.left<(this.winWidth/2) ? '.show-message_top_left' : '.show-message_top_right'
					const query = uni.createSelectorQuery().in(this);
					query.select(className).boundingClientRect(data => {
						this.topMsgHeght = data.height - 29
					}).exec();
				}
				if (value == this.noticeArray.length-1) {
					this.nextText = '知道了，关闭说明'
				}
			}
		},
		methods: {
			click() {
				this.$emit('click');
			}
		},
		created() {
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.winWidth = res.windowWidth;
					}
				});	
			}, 60)
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
	}
	.rect-shadow {
		position: absolute;
		border-radius: 12rpx;
		box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
		pointer-events: none;
	}
	.show-message_left,
	.show-message_top_left,
	.show-message_top_right,
	.show-message_right,
	.show-message_bottom_left,
	.show-message_bottom_right {
		position: absolute;
		border-radius: 12rpx;
		background-color: rgba(0,0,0,.5);
		text-align: center;
		pointer-events: none;
		color: #fff;
		font-size: 24rpx;
		max-width: 50%;
		text-align: left;
	}
	.show-message_left::after {
		content: '';
		border-left: 12rpx solid rgba(0,0,0,.5);
		border-top: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
		width: 0;
		height: 0;
		position: absolute;
		top: 25%;
		right: -22rpx;
	}
	
	.show-message_top_left::after,.show-message_top_right::after {
		content: '';
		border-left: 12rpx solid transparent;
		border-top: 12rpx solid rgba(0,0,0,.5);
		border-right: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
		width: 0;
		height: 0;
		position: absolute;
		top: 100%;
	}
	.show-message_top_left::after {
		left: 20%;
	}
	.show-message_top_right::after {
		right: 20%;
	}
	
	.show-message_right::after {
		content: '';
		border-left: 12rpx solid transparent;
		border-top: 12rpx solid transparent;
		border-right: 12rpx solid rgba(0,0,0,.5);
		border-bottom: 12rpx solid transparent;
		width: 0;
		height: 0;
		position: absolute;
		top: 25%;
		left: -24rpx;
	}
	.show-message_bottom_left::after, .show-message_bottom_right::after {
		content: '';
		border-left: 12rpx solid transparent;
		border-top: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
		border-bottom: 12rpx solid rgba(0,0,0,.5);
		width: 0;
		height: 0;
		position: absolute;
		top: -22rpx;
	}
	
	.show-message_bottom_left::after {
		left: 20%;
	} 
	.show-message_bottom_right::after {
		right: 20%;
	}
	
	.cover-wrap {
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		position: absolute;
		
		.guide-next {
			background-color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 38rpx;
			position: absolute;
			bottom: 372rpx;
			left: 50%;
			transform: translate(-50%,0);
			padding: 16rpx 32rpx;
		}
	}
</style>
一天28小时
关注
vue入门指南
ggbondd的博客
12-23 657
MVVM模式 MVVM M 是模型（model），V是视图（view），VM（ViewModel）是V和M的双向协调者。 view DOM元素 View是视图层，也就是用户界面。前端主要由HTML和css来构建，为了更方便地展现viewModel或者Model层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker、Thymeleaf等等，各大MVVM框架如Vue.js， AngularJs， EJS等也都有自己用来构建用户界面的内置模板语言。 model data中的属性 <s
Vue新手入门指南（易懂）
web18334137065的博客
03-09 457
Vue快速入门 前言 对于一名初入编程的新手来说，JavaScript的语法偏向复杂，选择Vue库可以说是一个较为不错的体验。在很多方面，Vue简化了JavaScrip语法，并且实现数据与视图的双向绑定，达到响应式页面的目的。 博主是一位大二的编程小白，以下的内容都是自己对Vue的理解，写本篇博客的目的是为了巩固自己对Vue的基础知识，大家可以作为一种笔记来观看，如果能够给学校Vue的朋友带来帮助，不胜荣幸，对于存在许多表达不恰当以及逻辑错误的地方，还望大家斧正。 参考资料:《Vue.js从入门到实践
uniapp基础使用指南2
Var的博客
01-02 756
uniapp的基础使用2 本篇为uniapp基础使用指南的续集,主要说说Dom操作和在uniapp里使用vuex 上一篇链接 uniapp基础使用指南 14.获取Dom元素 (详细文档 在API>界面>节点信息) const query = uni.createSelectorQuery().in(this); query.selectAll('.title').boundingCli...
超详细的Vue新手向教程
最新发布
ma_no_lo的博客
08-19 1289
适合新手快速入门vue，内容十分详细，兼顾原理，让你学的更明白
vue + intro.js 三方库实现新手引导, 新手提示
weixin_42414313的博客
02-06 1525
样式调整 我在组建中直接调整样式,不起作用.考虑到整个系统中只有一个新手引导.所以把样式引到了app.vue中.其中的监听事件是因为场景需要点击键盘方向键可以执行下一步操作,不需要请忽略.我把监听方法放到最后了.实现新手引导,新手提示,动画新颖,用户体验感拉满.
原生js实现新手引导功能(vue项目)
weixin_43695002的博客
01-17 2738
基于原生js实现“新手引导”功能
vue 新手指引跳转页面
08-02
对于Vue新手指引跳转页面的问题，可以使用Vue Router来实现。在每个页面加载时，可以通过router.push方法来跳转到下一个路由，并在下一个路由的组件中加载新手指引。具体实现可以参考以下步骤： 1. 首先，在Vue项目...
Vue新手指南：构建单页面应用实战
"本文是关于新手如何使用Vue.js构建单页面应用的实例教程，通过五个步骤：使用vue-cli创建项目，实现vue-router路由，运用vuex管理状态，使用vue-resource进行HTTP请求，以及基于.vue文件的组件化开发，来详细介绍...
Vue新手指南：发布npm包全攻略
本文将详细介绍如何基于Vue环境发布一个npm包的步骤，适合有一定Vue基础和Webpack理解的开发者。以下是具体过程： 1. **创建项目结构**: 首先，你需要新建一个空文件夹来存放你的npm包。这将作为项目的起点，确保...
Vue 新手引导标签
梦寻汝的博客
03-19 639
安装 npm install driver.js --save 代码 1、存放每一步的提示信息utils - driver.js export default [ { element: '#some-element1', popover: { title: '第一项', description: '第一项的描述', position: 'bottom', } ...
一款简洁的新手引导控件
06-02
简洁的新手引导控件，带遮盖层 高亮层，代码不到200行，直接运行demo中的jsp即可观看效果，直接自定义位置，自定义回调函数等。
新手引导页面实现
01-04
新手引导页面实现
Vue + intro.js 实现页面新手引导流程功能
小破孩的博客
05-31 7336
Vue + intro.js 实现页面新手引导流程功能
vue项目引入并使用新手指引功能
weixin_68067009的博客
08-12 288
vue新手指引
vue 新手引导页功能
热门推荐
weixin_34294649的博客
06-03 1万+
背景：项目中 需要添加 新手引导页功能，效果如下图：解决方法：vue + vue-intro + intro.js1.安装依赖npm i vue-introjs npm i intro.js复制代码2.修改 webpack 文件 在 webpack.dev.conf.js webpack.prod.conf.js下的 plugins 分别加入new webpack.ProvidePlugin...
vue新手
tianqidear的博客
08-28 231
使用vue-cli vue-router初次写的后台代码 import Vue from ‘vue’ import Router from ‘vue-router’ import Home from ‘@/components/Home’ import Tlevel from ‘@/components/Tlevel’ import Refund from ‘@/...
vue3.0使用intro.js实现新手引导功能
weixin_42342008的博客
07-09 3305
我们在浏览一些网站是，经常看到如下内容，这就是新手引导功能，让我们能够更快的了解该网站的功能。 那么，这个功能要如何实现呢？ 今天我们就用intro.js这个插件来实现： 第二步：在shims-vue.d.ts添加这段代码 注意：需要在页面渲染完成后，使用 以上就是实现网页引导的主要步骤...
vue实现新手引导-------driver.js 插件的简单应用
jqyy1996的博客
04-25 1030
首先下载安装 npm install driver.js 之后在main.js种引入 import Driver from 'driver.js'; import 'driver.js/dist/driver.min.css'; Vue.prototype.$driver = new Driver({ allowClose: false, //禁止点击外部关闭 doneBtnText: '完成', // 完成按钮标题 closeBtnText: '关闭', // 关闭按钮标题 stage
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值