vue 提示框_Vue的新手引导组件，微信小程序适用

基于Vue开发了一个种水果偷水果的微信小游戏，游戏系统相对一般应用来说稍显复杂。所以需要一个完善的新手引导来帮助用户快速上手。

微信搜索：神奇小花盆

我期望的新手引导需要实现以下几个特性：

1、基于用户流程，按顺序的指引。
2、指引时仅允许点击指引目标。

而一个好用的新手引导组件在完成功能特性的基础上还需要提供简单易用的配置和丰富可自由定义的风格。

基于这些理念，我开发了一个ezguider组件，可以非常简单的帮助使用者构建一个新手指引界面。

感谢您的star

ezshine/vue-ezguider​github.com

vue参数演示

<ezguider 
	:show="guide_show"
	:animation="true"
	:guides="guides_cfg"
	@finished="guide_finished"
	@guide_clicked="guide_clicked">
	
	<!-- 可以使用arrow_image这个slot来放置箭头图像，图像应当设计为箭头垂直朝下。不用的话，也会有一个默认的丑丑的箭头 -->
	<!-- <image slot="arrow_image" src="/static/guides/arrow.png" mode="widthFix" style="width: 46px;"></image> -->
	<!-- 可以使用text_area这个slot来放置更加个性化的文本提示框，但文本内容需要自行根据guide_index来更新，如使用，请注意容器的坐标和尺寸还是由配置表决定的 -->
	<view slot="text_area" >
		<view style="position: absolute;z-index: 2;width:64%;height:100%;font-size: 14px;color:#fff;left:10px;top:25px;">{{calc_guide_content}}</view>
		<image src="../../static/guides/guide_role.png"></image>
	</view>
</ezguider>

事件演示

guide_clicked:function(index,id,event){
	console.log("::guide clicked");
	console.log("::--->index:"+index);
	if(id)console.log("::--->id:"+id);
	if(event)console.log("::--->event:",event);
	
	//引导中的点击都可以在这里进行判断以及获得相应的数据
},
guide_finished:function(){
	console.log("::guide finished");
	this.guide_show=false;
},

引导页配置项演示

var guides_cfg=[
	{
		text:{
			//文本内容
			content:"指定位置文本提示框",
			x:(sysinfo.screenWidth-324)/2,
			y:(sysinfo.screenHeight-257)/2,
			width:324
		},
		arrow:{
			//箭头坐标以及旋转角度，单位是px
			x:100,
			y:100,
			rotate:0
		},
		//延迟显示，某种情况下，可以给上一步的动作留一些时间
		delay:0,
		//此条引导的id，比序号更方便判断一些
		id:"drink",
		//点击区域使用button标签，此项可方便加入获取用户信息，分享等特殊场景，默认为空
		open_type:""
	}
];

感兴趣的朋友也可以看看这个使用Vue开发的游戏，做了一些Vue下比较少见的动画特效，甚至是简单的粒子系统。