最全vue的vue-amap使用高德地图插件画多边形范围的示例代码


Posted in Javascript onJuly 17, 2020

一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下:

import Vue from 'vue'
import VueAMap from 'vue-amap'
import ElementUI from 'element-ui'

import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'

Vue.use(VueAMap)
Vue.use(ElementUI)

VueAMap.initAMapApiLoader({
 // 高德的key
 key: '你的高德key',
 // 插件集合
 plugin: [
 'AMap.Autocomplete',
 'AMap.PlaceSearch',
 'AMap.Scale',
 'AMap.OverView',
 'AMap.ToolBar',
 'AMap.MapType',
 'AMap.PolyEditor',
 'AMap.CircleEditor',
 'AMap.Geocoder',
 'AMap.Geolocation'
 ],
 // 高德 sdk 版本,默认为 1.4.4
 v: '1.4.10'
})

Vue.config.productionTip = false

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

强烈推荐的第三种画多边形的效果图:

***隐藏的彩蛋哦***

图里的 “请输入经纬度” ,可以输入一堆的经纬度坐标,在按“Enter” ,可以直接形成多边形;(注意:输入的格式要和上面显示的坐标全部选中Ctrl+c下来的格式一样)

如:

106.628788 , 29.718379
106.631187 , 29.718143
106.632383 , 29.716281
106.628819 , 29.717013

最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

二、第一种画化:使用Geolocation画多边形(效果是在地图点了,才会形成多边形)

// 新增 编辑 查看 
<template>
 <div class="point">
 <el-header></el-header>
 <div class="action-bar">
  <el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData">
  <el-form-item label label-width="220" prop="location">
   <el-input
   :disabled="!ifFalg"
   class="name-input"
   clearable
   v-model="formData.location"
   placeholder="名称"
   maxlength="30"
   ></el-input>
  </el-form-item>
  <el-form-item label prop="longitude">
   <el-input
   :disabled="!ifFalg"
   class="my-input"
   clearable
   v-model.number="formData.longitude"
   placeholder="经度 "
   ></el-input>
  </el-form-item>
  <el-form-item label prop="latitude">
   <el-input
   :disabled="!ifFalg"
   class="my-input"
   clearable
   v-model.number="formData.latitude"
   placeholder="纬度"
   ></el-input>
  </el-form-item>
  <el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button>
  <el-button class="my-button" size="small" @click="close">关闭</el-button>
  </el-form>
 </div>
 <div class="map-box">
  <div class="map-tool">
  <div v-if="ifFalg">
   <el-checkbox v-model="enterType">地图上描点</el-checkbox>
  </div>
  <!-- <el-checkbox @change="checkbox" v-model="enterType">地图上描点</el-checkbox> -->
  <div class="longlat">
   <ul>
   <li v-for="(item, index) in lnglatpoints" :key="index">
    {{item.longitude}} , {{item.latitude}}
    <i
    v-if="ifFalg"
    class="el-icon-close"
    @click="deletes(item)"
    ></i>
   </li>
   </ul>
   <el-input
   v-if="ifFalg"
   class="my-input"
   size="small"
   clearable
   v-model="lngLat"
   @keyup.enter.native="submitEnter"
   placeholder="请输入经纬度"
   ></el-input>
   <el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button>
  </div>
  </div>
  <div class="map" id="map">
  <el-amap
   ref="map"
   bubble
   :plugin="plugin"
   :zoom="map.zoom"
   :center="map.center"
   :events="events"
   id="amap"
  >
   <el-amap-polygon
   :events="plugin.events"
   :path="path"
   :draggable="draggable"
   fillColor="#2b83f9"
   fillOpacity="0.5"
   strokeWeight="0"
   strokeColor="#2b83f9"
   strokeOpacity="0.5"
   ></el-amap-polygon>
   <!-- <el-amap-marker :position="marker.position" :events="plugin.events"></el-amap-marker> -->
   <el-amap-marker v-if="formData.type === 1" :position="map.center" :label="label"></el-amap-marker>
  </el-amap>
  </div>
  
 </div>
 </div>
</template>
<script lang="ts">
import * as api from '@/utils/api/index'
import { Component, Vue } from 'vue-property-decorator'
import eHeader from '@/components/header.vue'
import { constants } from 'http2'
import * as util from '@/utils/util.ts'

const testLongitude = (rule: any, value: string, callback: Function) => {
 if (util.regExp.longitudeRegExp.test(value)) {
 return callback()
 } else {
 return callback(new Error('请输入正确的经度'))
 }
}
const testLatitude = (rule: any, value: string, callback: Function) => {
 if (util.regExp.latitudeRegExp.test(value)) {
 return callback()
 } else {
 return callback(new Error('请输入正确的纬度'))
 }
}
@Component({
 components: {
 'el-header': eHeader
 }
})
export default class point extends Vue {
 private breadcrumbId = 0
 private id = ''
 private lngLat = ''
 private ifFalg = true
 private map = {
 zoom: 15,
 center: [106.55073, 29.56471]
 }
 private path: any = []
 private draggable = false
 private lnglatpoints: any = []
 private enterType = false // 录入坐标 | 地图上描点
 private cities = []
 private formData = {
 location: '',
 longitude: '',
 latitude: ''
 }
 plugin = {
 pName: 'Geolocation',
 events: {}
 }
 events = {}
 private test = 1

 private rules = {
 location: [
  { required: true, message: '请输入接送点名称', trigger: 'blur' }
 ],
 longitude: [{ validator: testLongitude, trigger: 'blur' }],
 latitude: [{ validator: testLatitude, trigger: 'blur' }]
 }

 mounted() {
 this.id = this.$route.params.id
 this.breadcrumbId = Number(this.$route.query.breadcrumbId)
 if (this.breadcrumbId === 2) {
  this.ifFalg = false
 }
 if (this.id !== '-1') {
  this.details()
 }

 // this.city()
 let _this: any = this

 // 地图点击事件
 _this.events = {
  click: (e: any) => {
  if (this.enterType) {
   this.path = []
   console.log(e.lnglat)
   let lnglat = e.lnglat
   this.lnglatpoints.push({
   latitude: lnglat.lat,
   longitude: lnglat.lng
   })
   console.log(this.lnglatpoints)
   this.lnglatpoints.map((val: any, index: number) => {
   console.log(index)
   if (index === 0) {
    this.map.center = [val.longitude, val.latitude]
   }
   let arr = [val.longitude, val.latitude]
   this.path.push(arr)
   })
   // this.setFitView()
  }
  }
 }

 // 多边形点击事件
 _this.plugin.events = {
  click: (e: any) => {
  if (this.enterType) {
   this.path = []
   console.log(e.lnglat)
   let lnglat = e.lnglat
   this.lnglatpoints.push({
   latitude: lnglat.lat,
   longitude: lnglat.lng
   })
   console.log(this.lnglatpoints)
   this.lnglatpoints.map((val: any, index: number) => {
   console.log(index)
   if (index === 0) {
    this.map.center = [val.longitude, val.latitude]
   }
   let arr = [val.longitude, val.latitude]
   this.path.push(arr)
   })
   // this.setFitView()
  }
  }
 }
 }// 获取接送范围集合
 details() {
 const loading = this.$loading({
  lock: true,
  text: '加载中...'
 })
 api.main.boss_line_point__get({ params: {param: this.id}}).then((res: any) => {
  if (res.data.success) {
   const response = res.data.data
   this.formData = response
   let points = res.data.data.points
   if (points != null) {
   for (let i = 0; i < points.length; i++) {
    points[i].id = i
   }
   this.lnglatpoints = points
   this.lnglatpoints.map((val: any, index: number) => {
    if (index === 0) {
    this.map.center = [val.longitude, val.latitude]
    }
    let arr = [val.longitude, val.latitude]
    this.path.push(arr)
   })
   } else {
   this.map.center = [
    Number(this.formData.longitude),
    Number(this.formData.latitude)
   ]
   this.label.content = this.formData.location
   }
   setTimeout(this.setFitView, 0)
  } else {
   this.$message.error(res.data.message)
  }
  loading.close()
  })
 }

 // 移除经纬度
 deletes(data: any) {
 let e: any = this
 this.path = []
 for (let i = 0; i < e.lnglatpoints.length; i++) {
  if (
  data.latitude === e.lnglatpoints[i].latitude &&
  data.longitude === e.lnglatpoints[i].longitude
  ) {
  e.lnglatpoints.splice(i, 1)
  }
 }
 console.log(e.path)
 this.lnglatpoints.map((val: any, index: number) => {
  let arr = [val.longitude, val.latitude]
  this.path.push(arr)
  if (index === 0) {
  this.map.center = [val.longitude, val.latitude]
  }
  console.log(this.path)
 })
 }

 clear() {
 this.$confirm('确认删除绘制的接送区域?', '删除', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
 })
  .then(() => {
  let self: any = this
  this.path = []
  this.lnglatpoints = []
  // this.map.center = [106.5507300000, 29.5647100000]
  this.lngLat = ''
  self.formData.points = []
  })
  .catch(() => {})
 }

 // 输入经纬度
 submitEnter() {
 // eslint-disable-next-line
 const illegalRegExp = /^(\D|\d*\.?\d*,*\s)|[^\d\s,\.]|^\d*\.?\d*$|(,\.|\.,)+|(\d*\.*\d*,){2,}|(\d*\.){2,}|(\d*\s){2,}|(\s\d*\.?\d*|\D)$/g
 const replaceWhiteSpaceRegExp = /(?<=(,|\.|\s))\s+|\s+(?=(,|\.))|^\s|\s+$/g

 this.lngLat = this.lngLat.replace(replaceWhiteSpaceRegExp, '')
 if (illegalRegExp.test(this.lngLat)) {
  return this.$message.error('经纬度格式错误!')
 }
 const lnglatArray = this.lngLat.split(' ')
 lnglatArray.forEach(lnglatString => {
  const lnglatObject = {
  longitude: lnglatString.split(',')[0],
  latitude: lnglatString.split(',')[1]
  }
  this.lnglatpoints.push(lnglatObject)
 })
 this.path = []
 this.lnglatpoints.map((val: any, index: number) => {
  let arr = [val.longitude, val.latitude]
  this.path.push(arr)
  this.lngLat = ''
  if (index === 0) {
  this.map.center = [val.longitude, val.latitude]
  }
 })
 }

 setFitView() {
 const vm: any = this
 let map = vm.$refs.map.$$getInstance()
 map.setFitView()
 }

 close() {
 this.$router.push({
  name: 'pointList'
 })
 }

 save() {
 let e: any = this
 let params: any = {}
 if (this.id !== '-1') {
  // 编辑
  e.formData.id = this.id
  params.id = this.id
 }
 e.formData.points = this.lnglatpoints
 if (e.formData.location === '' || e.formData.location === null) {
  this.$message.warning('名称不能为空!')
  return
 }
 if (this.lnglatpoints.length < 3 && e.formData.type === 2) {
  this.$message.warning('经纬度不能小于三组!')
  return
 }
 params.points = this.lnglatpoints
 params.location = this.formData.location
 params.longitude = this.formData.longitude
 params.latitude = this.formData.latitude
 if (this.id !== '-1') {
  api.main.boss_line_point_update_post({ data: params }).then((res: any) => {
   if (res.data.success) {
   this.$message.success('保存成功!')
   this.$router.push({
    name: 'pointList'
   })
   } else {
   this.$message.error(res.data.message)
   }
  })
 } else {
  api.main
  .boss_line_point_addAndBindLine_post({ data: params })
  .then((res: any) => {
   if (res.data.success) {
   this.$message.success('保存成功!')
   this.$router.push({
    name: 'pointList'
   })
   } else {
   this.$message.error(res.data.message)
   }
  })
 }
 }
}
</script>
<style lang="scss" scoped>
ul,
li {
 list-style: none;
 margin: 0;
 padding: 0;
}
.inline-form {
 display: flex;
 display: -webkit-flex;
 flex-direction: row;
 flex-wrap: wrap;
 .el-form-item {
 margin-bottom: 10px;
 margin-left: 15px;
 display: flex;
 }
 .el-button {
 margin-left: 15px;
 height: 32px;
 }
}
.action-bar {
 box-sizing: border-box;
 padding: 10px;
 padding-bottom: 0;

 border: {
 top: 1px solid #ddd;
 bottom: 1px solid #ddd;
 }
 .my-input {
 width: 150px;
 }
 .name-input {
 width: 260px;
 }
}
.el-select-dropdown__item {
 background-color: white;
 text-indent: 10px;
}
.claer {
 margin-top: 15px;
 float: right;
}

$map_height: calc(100vh - 55px - 50px - 75px - 15px);
.map-box {
 position: relative;

 height: $map_height;
 .map-tool {
 position: absolute;
 width: 220px;
 z-index: 170;
 top: 0;
 left: 0;
 max-height: 100%;

 box-sizing: border-box;
 padding: 10px;
 overflow-y: auto;

 background-color: #fff;
 box-shadow: 2px 4px 7px 1px #dedede;
 }
 .map {
 transition: all 0.6s;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 }
}
.swiper-box {
 position: relative;
 z-index: 161;

 display: flex;
 align-items: center;
 flex-direction: row;
 justify-content: center;

 width: 100%;

 transition: transform ease-in 0.6s;
 transform: translateX(0);
 white-space: nowrap;
 .swiper-item {
 width: 100%;
 height: $map_height;
 }
}
.hide-text-area {
 transform: translateX(-100%);
}
.gray-map {
 filter: grayscale(90%);
}
.longlat {
 margin-top: 15px;
 padding-bottom: 15px;

 ul {
 li {
  padding: 6px;
  background-color: #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
  position: relative;
 }
 }
}
.el-icon-close {
 display: inline-block;
 position: absolute;
 right: 10px;
 color: #000 !important;
 cursor: pointer;
}
.my-button {
 margin-bottom: 10px;
}
</style>

三、第二种画化:使用AMap.MouseTool画多边形(效果是:多边形随鼠标左键点击,多边形直接跟着变化)

// 新增 编辑 查看 
<template>
 <div class="point">
 <el-header></el-header>
 <div class="action-bar">
  <el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData">
  <el-form-item label prop="location">
   <el-input
   :disabled="!ifFalg"
   class="name-input"
   clearable
   v-model="formData.location"
   placeholder="名称"
   maxlength="30"
   ></el-input>
  </el-form-item>
  <el-form-item label prop="longitude">
   <el-input
   :disabled="!ifFalg"
   class="my-input"
   clearable
   v-model.number="formData.longitude"
   placeholder="经度 "
   ></el-input>
  </el-form-item>
  <el-form-item label prop="latitude">
   <el-input
   :disabled="!ifFalg"
   class="my-input"
   clearable
   v-model.number="formData.latitude"
   placeholder="纬度"
   ></el-input>
  </el-form-item>
  <el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button>
  <el-button class="my-button" size="small" @click="close">关闭</el-button>
  </el-form>
 </div>
 <div class="map-box">
  <div class="map-tool">
  <div v-if="ifFalg">
   <el-checkbox >地图上描点</el-checkbox>
  </div>
  <div class="longlat">
   <ul><li v-for="(item, index) in lnglatpoints" :key="index">
    {{item.longitude}} , {{item.latitude}}
    <i
    v-if="ifFalg"
    class="el-icon-close"
    @click="deletes(item)"
    ></i>
   </li> 
   </ul>
   <br>
   <div>
   <span >输入范围经纬度:</span>
   <el-input
    type="textarea"
    autosize
    placeholder="请输入内容"
    v-model="lnglatpointsString">
   </el-input>
   </div>
   <el-button v-if="ifFalg" size="small" @click="clear1" type="primary" class="claer1">确定</el-button>
   <el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button>
  </div>
  </div>
  <div class="map" id="map">
  <el-amap
   ref="map"
   bubble
   :zoom="map.zoom"
   :center="map.center"
   :events="mapEvents"
   id="amap"
  >
   <el-amap-polygon
   :events="plugin.events"
   :path="path"
   fillColor="#2b83f9"
   fillOpacity="0.5"
   strokeWeight="0"
   strokeColor="#2b83f9"
   strokeOpacity="0.5"
   ></el-amap-polygon>
   <el-amap-marker v-if="formData.type === 1" :position="map.center" :label="label"></el-amap-marker>
  </el-amap>
 
  </div>
  <div class="my-tools">
  <el-row>
   <el-button type="primary" v-if="ifFalg" @click="drawPolygon()">鼠标绘制</el-button>
   <el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">结束编辑</el-button>
  </el-row>
 </div>
 </div>
 </div>
</template>
<script lang="ts">同上
 /**
 * 绘制多边形 
 */
 private drawPolygon () {
   let vm: any = this
   let map = vm.$refs.map.$$getInstance()
   map.plugin(['AMap.MouseTool'], function () {
   var mouseTool = new AMap.MouseTool(map)
   var drawPolygon = mouseTool.polygon()
   AMap.event.addListener(mouseTool, 'draw', function (e: any) {
    e.obj.Je.visible = false
    let path = e.obj.getPath()
    vm.drawPolygonsToMap(path)
    
    path.forEach((point:any) => {
     vm.lnglatpoints.push({
      latitude: point.lat,
      longitude: point.lng
     })
    });
    // vm.mapDates =path 
    // e.obj.hide()
    mouseTool.close()
   })
   })
  
 }
同上
}
</script>
<style lang="scss" scoped>
和上面一样
</style>

三、第三种画化:使用AMap.Polygon和AMap.PolyEditor画多边形(推荐,效果是:https://lbs.amap.com/api/javascript-api/example/overlayers/polygon-draw-and-edit)

注意哦:1、以为这种画多边形,先需要3个点来确定初始的多边形,所以添加了一个功能:搜索 (功能:点击搜索名称的经纬度;);

2、然后我再 ‘范围绘制' 的方法里根据“搜索”得来的经纬度,手动的弄了3个经纬度数组。

3、然后就可以快乐的画图了。(这画图是真的方便,特别是画范围很复杂的)。

// 新增 编辑 查看 
<template>
 <div class="point">
 <el-header></el-header>
 <div class="action-bar">
  <el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData">
  <el-form-item label prop="location">
   <el-input
   :disabled="!ifFalg"
   class="name-input"
   clearable
   v-model="formData.location"
   placeholder="名称"
   maxlength="30"
   ></el-input>
  </el-form-item>
 <el-button class="my-button" type="info" @click="getLocation" size="small">搜索</el-button>
  <el-form-item label prop="longitude">
   <el-input
   :disabled="!ifFalg"
   class="my-input"
   clearable
   v-model.number="formData.longitude"
   placeholder="经度 "
   ></el-input>
  </el-form-item>
  <el-form-item label prop="latitude">
   <el-input
   :disabled="!ifFalg"
   class="my-input"
   clearable
   v-model.number="formData.latitude"
   placeholder="纬度"
   ></el-input>
  </el-form-item>
  <el-button class="my-button" v-if="ifFalg" type="primary" @click="save" size="small">保存</el-button>
  <el-button class="my-button" size="small" @click="close">关闭</el-button>
  </el-form>
 </div>
 <div class="map-box">
  <div class="map-tool">
  <div v-if="ifFalg">
   <el-checkbox >地图上描点</el-checkbox>
  </div>
  <div class="longlat">
   <ul>
   <li v-for="(item, index) in lnglatpoints" :key="index">
    {{item.longitude}} , {{item.latitude}}
    <i
    v-if="ifFalg"
    class="el-icon-close"
    @click="deletes(item)"
    ></i>
   </li> 
   </ul>
   <br>
   <div>
   <span >输入范围经纬度:</span>
   <el-input
    type="textarea"
    autosize
    placeholder="请输入内容"
    v-model="lnglatpointsString">
   </el-input>
   </div>
   <el-button v-if="ifFalg" size="small" @click="clear1" type="primary" class="claer1">确定</el-button>
   <el-button v-if="ifFalg" size="small" @click="clear" type="primary" class="claer">清除</el-button>
  </div>
  </div>
  同上
  <div class="my-tools">
  <el-row>
   <el-button type="primary" v-if="ifFalg" @click="drawPolygon()">鼠标绘制</el-button>
   <el-button type="primary" v-if="ifFalg" @click="polygonEditor.close()">结束编辑</el-button>
  </el-row>
 </div>
 </div>
 </div>
</template>
<script lang="ts">
同上

//画多边形
  private drawPolygon(){
  let vm: any = this
  if (vm.formData.location === '' || vm.formData.location === null) {
   this.$message.warning('请先输入名称,才能开始画范围!')
   return
  }
  let map = new AMap.Map("map", {
    center:[106.55073, 29.56471],
    zoom: 15
  });
   // 多边形覆盖物节点坐标数组
  let polygonArr:any = [] 
  let lng = Number(this.formData.longitude) 
  let lat = Number(this.formData.latitude) 
  if(vm.path.length > 0){
    polygonArr = vm.path
  }else{
    polygonArr.push([lng, lat])
    polygonArr.push([lng, lat - 0.001])
    polygonArr.push([lng - 0.001, lat - 0.001])
  }  
  //使用 AMap.Polygon构建多边形
  let polygon = new AMap.Polygon({
    path:polygonArr,
    strokeColor: "#FF33FF", 
    strokeWeight: 6,
    strokeOpacity: 0.2,
    fillOpacity: 0.4,
    fillColor: '#1791fc',
    zIndex: 50,
  })
  //将多边形增加到地图上
  map.add(polygon)
  // 缩放地图到合适的视野级别
  map.setFitView([ polygon ])
  //构造折线编辑对象,并开启折线的编辑状态
  map.plugin(["AMap.PolyEditor"],function(){
   let polygonEditor = new AMap.PolyEditor(map,polygon); 
    vm.polygonEditor =polygonEditor
    polygonEditor.open(); 
   //关闭多边形编辑polygonEditor.close()触发该方法;
    polygonEditor.on('end', function(event:any) {
    // event.target 即为编辑后的多边形对象,event.target.getPath()得到编辑完成后的点数组
    let pointArr = event.target.getPath()
    vm.lnglatpoints = []
    pointArr.forEach((point:any)=>{
     vm.lnglatpoints.push({latitude: point.lat,longitude: point.lng})
    })




vm.path = []
    vm.lnglatpoints.map((val: any, index: number) => {
    let arr = [val.longitude, val.latitude]
    vm.path.push(arr)
    if (index === 0) {
    vm.map.center = [val.longitude, val.latitude]
    }
   })


  })
  });
 }
 /**
  * 地理编码(地址 -> 坐标)
  */
 private getLocation () {
  let loc = this.formData.location
  AMap.plugin('AMap.Geocoder', () => {
   let geocoder = new AMap.Geocoder()
   geocoder.getLocation(loc, (status: string, result: any) => {
    if (status === 'complete' && result.info === 'OK') {
     let { lat, lng } = result.geocodes[0].location
     if (lat && lng) {
      this.map.center = [lng, lat]
      this.formData.longitude=lng
      this.formData.latitude=lat
     }
    }
   })
  })
 }



 同上
}
</script>
<style lang="scss" scoped>
和上面一样
</style>

总结

到此这篇关于最全vue的vue-amap使用高德地图插件画多边形范围的文章就介绍到这了,更多相关vue-amap高德地图插件画多边形范围内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
自动更新作用
Oct 08 Javascript
document.getElementById介绍
Sep 13 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
ES5和ES6中类的区别总结
Dec 21 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 #Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 #Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 #Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 #Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 #Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 #Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 #Javascript
You might like
php数组删除元素示例
2014/03/21 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js数组操作学习总结
2013/11/04 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
自主招生自荐信格式
2013/12/03 职场文书
经济管理专业自荐信
2013/12/30 职场文书
销售员岗位职责范本
2014/02/03 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android