Zhencode的博客

本文示例基于腾讯地图所实现的一个在日常业务开发中偶尔会用到的功能：地图中上实现定位签到使用地图的签到功能，能实现在业务中的一些功能比如有：考勤签到，活动办理打卡点定位，判断某个目标是否在当前设置的范围内从而实现一些业务要求。现在有很多方式可以实现该功能，不管是app,小程序或者是h5端，前提都是首先基于第三方的地图提供的定位做实现，先上一张大概的效果图如下：从图中可以看到，位置点标记的为当前用户所处的位置，也就是用户当前所在的真实定位位置，在图中还标记着签到点，签到点为用户所标记需要签到的地点，该标

该组件为自定义上传文件的功能，使用函数调用实现上传，功能比较简单，后续仍待完善

前端中使用第三方地图是比较常见的，现在国内提供接入的地图主要有腾讯，高德，百度等第三方。而腾讯地图则是用的比较多的，在移动端，web端，公众号或者小程序的支持度也比较高，提供的功能比较丰富也是大多数业务中需要用到的。本文实现的主要有以下几个功能根据当前ip定位自定义搜索查找位置，根据地图返回的位置数据选择定位可在地图上点击标记进行定位输入框搜索选择获取位置信息点击地图实现标记并获取位置信息根据现有ip定位腾讯地图申请使用需要申请应用的key后才能调用相关的api由于篇幅有限

<template> <div class="uploadBlock"> <template v-for="(item,index) in img" v-show="img.length>0"> <div class="uploadImage"> <img :src="item.img" alt="...

data:{info: { contractLastDate: this.getLastMonth() //日期 }},methods:{ getLastMonth(){ var now = new Date(); now.setMonth(now.getMonth()-1) ...

相对或绝对路径的图片地址需加上require(图片的url)

<slotname> <p slot="info">{{info.name}}</p> <p slot="age">{{info.age}}</p> <p slot="sex">{{info.sex}}</p> </slotname> <template id="temp"&...

1.全局组件Vue.component(‘com’,{template:<div>121212</div>})2.局部组件var vm=new Vue({el:’#app’,components:{‘bb’:’#text’}})页面中： 212122

<div id="app"> <template><div></div></template>//第二 </div> <template id="a"><div>12365</div></template>//第三</body><scrip...

父组件Home：<template><header ref="xxx"></header></template>export default{data(){return{xxx:this.$refs.xxx.msg//直接获取子组件数据}}}子组件Header：export default{data(){return{ m...

可以传递任何数据，包括函数整个父组件的实例this父组件Home：<template>子组件：<header :属性='值' :home="this"></header>//this表示把整个父组件传递给子组件</template>子组件：<script><template>{{this.home.属性}}...

在vue中使用ref，ref绑定在文档元素上面，如<input type="text" ref="io"/>获取：this.$refs.io设置$event<button @click="ok($event)"></button>使用$event methods:{ ok(e){console.log(e)}}...

vue的watch中：watch：{'$router.path':function(new,old){console.log(new,old)}}

storage封装成模块storage.jsconst storage={/设置/ set(key,value){ localStorage.setItem(key,Json.stringify(value)) }/获得/ get(key){return Json.parse(localStorage.getItem(key))}/移除/ remove(key){l...

默认类：router-link-active：可以通过在样式表中重新定义基类：linkActiveClass：在创建路由时进行全局配置，linkActiveClass：/配置自定义类/

创建json文件添加数据调用mock库/*使用mockjs提供mock数据接口 */import Mock from 'mockjs'import 创建的json文件// 返回对应的接口与数据：xxx为接口，yyy为json里的数据Mock.mock('/xxx', {code:0, data: data.yyy})// export default ??? 不需要向外暴...