欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Map.vue基于百度地圖組件重構(gòu)筆記分享

 更新時(shí)間:2017年04月17日 11:39:24   作者:tonydandelion2014  
這篇文章主要為大家分享了Map.vue基于百度地圖組件重構(gòu)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

Map.vue是為iview組件開發(fā)的一個(gè)基于百度地圖的組件,實(shí)現(xiàn)了點(diǎn)是否在框內(nèi)的判斷,畫多邊形覆蓋物,添加自定義富文本標(biāo)記物等功能.

第一步:重構(gòu)自定義的富文本對(duì)象,設(shè)置為全局對(duì)象.

原代碼的富文本對(duì)象是聲明在addResource這個(gè)方法里面的,代碼結(jié)構(gòu)非常復(fù)雜,在beforeCreate這個(gè)鉤子函數(shù)里面申明為全局的,就可以多次復(fù)用,不需要重復(fù)聲明來了, 否則,每調(diào)用一次paintPolygon方法,都要重新聲明一次,非常麻煩,效率太低下.

原代碼是在父組件中處理好這個(gè)富文本對(duì)象需要的數(shù)據(jù),再把這些數(shù)據(jù)傳到富文本對(duì)象的構(gòu)造函數(shù)里面,重構(gòu)的處理方式,是將一整個(gè)數(shù)據(jù)對(duì)象(data對(duì)象)傳到對(duì)象的構(gòu)造函數(shù)里面,再根據(jù)需求,分解data對(duì)象來聲明對(duì)象的屬性(this._content | this._point | this._color等). 總結(jié)下來,數(shù)據(jù)總是應(yīng)該在最靠近 使用數(shù)據(jù)的地方 進(jìn)行處理.

window.ResOverlay = function(data, fun){ 
 this._data = data
 this._content = data['type'].name + "|" + data['name']
 this._point = new BMap.Point(data.coord[0], data.coord[1])
 this._fun = e => {
  fun(data)
  if(typeof(e.preventDefault()) == 'function'){
   e.preventDefault() // IE下去除地圖點(diǎn)擊事件的冒泡
  }else{
   e.stopPropagation() // chrome下去除地圖點(diǎn)擊事件的冒泡
  }
 }
 this._color = data['type'].color || "#5cadff" // 不同類型的資源有不同的顏色,默認(rèn)顏色為#5cadff。
} 

第二步:函數(shù)傳遞

需要為富文本添加電腦端的click事件和移動(dòng)端的touchstart事件.涉及到要操作父組件中的data數(shù)據(jù),所以采用將函數(shù)fun作為參數(shù)傳入

父組件請(qǐng)求回?cái)?shù)據(jù)再做處理,rep.data.data.resources為data,fun就是 data => {}

 this.$http.get('/api/search').then(rep => {
  this.$refs.main.addResource(rep.data.data.resources, data => {
   this.resourceName = data["name"]
   this.resourceType = data["type"].name
   this.resourceUpdata = data["uploader"]
   this.resourcePosition = data["coord"]
   console.log(data["attachment"])

   let allList = []    
   data["attachment"].map(i => {
    let tempList = []     
    tempList.push(i)     
    tempList.push(i.split("/")[i.split("/").length - 1])
    allList.push(tempList)
   })

   this.resourceDetial = allList

   // 為資源添加圖像
   for(let i=0; i<data["images"].length; i++){
    this.resourceImage.push(data["images"][i])
   }
   if (data["images"].length > 0){
    this.isExistImage = true
   }else{
    this.isExistImage = false
   }

   // 為資源添加附件    
   if (data["attachment"].length > 0){
    this.isExistAttach = true
   }else{
    this.isExistAttach = false
   }

   // 顯示模態(tài)框    
   this.modal1 = true
  })
 })

在構(gòu)造函數(shù)中,這樣子處理

this._fun = e => {
 fun(data)
 if(typeof(e.preventDefault()) == 'function'){
  e.preventDefault() // IE下去除地圖點(diǎn)擊事件的冒泡
 }else{
  e.stopPropagation() // chrome下去除地圖點(diǎn)擊事件的冒泡
 }
}

最后,在合適的位置,添加事件

 wrapDiv.addEventListener("touchstart", this._fun);
 wrapDiv.addEventListener("click", this._fun);

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 基于vue+electron實(shí)現(xiàn)文件下載打開wps預(yù)覽

    基于vue+electron實(shí)現(xiàn)文件下載打開wps預(yù)覽

    這篇文章主要給大家介紹了基于vue+electron實(shí)現(xiàn)文件下載打開wps預(yù)覽,文中有詳細(xì)的代碼示例供大家借鑒參考,感興趣的同學(xué)可以參考閱讀下
    2023-08-08
  • vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作

    vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作

    這篇文章主要介紹了vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • vue基礎(chǔ)入門之vuex安裝與使用

    vue基礎(chǔ)入門之vuex安裝與使用

    vuex是一個(gè)專為vue.js應(yīng)用程序開發(fā)的 狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue入門之vuex安裝與使用的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例

    VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例

    本篇文章主要介紹了VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-06-06
  • vue雙向數(shù)據(jù)綁定原理探究(附demo)

    vue雙向數(shù)據(jù)綁定原理探究(附demo)

    本文主要介紹了vue雙向數(shù)據(jù)綁定的原理,文章結(jié)尾附上完整demo下載。具有一定的參考價(jià)值,下面跟著小編一起來看下吧
    2017-01-01
  • Java獲取客戶端信息以及IP地址

    Java獲取客戶端信息以及IP地址

    這篇文章主要為大家詳細(xì)介紹了如何使用Java獲取客戶端信息以及IP地址,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-02-02
  • vue實(shí)現(xiàn)商品詳情頁放大鏡功能

    vue實(shí)現(xiàn)商品詳情頁放大鏡功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品詳情頁放大鏡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級(jí)教程

    vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級(jí)教程

    這篇文章主要介紹了vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級(jí)教程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • vue打包生成的文件的js文件過大的優(yōu)化方式

    vue打包生成的文件的js文件過大的優(yōu)化方式

    這篇文章主要介紹了vue打包生成的文件的js文件過大的優(yōu)化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 淺談Vue.js中的v-on(事件處理)

    淺談Vue.js中的v-on(事件處理)

    本篇文章主要介紹了Vue.js中的v-on(事件處理),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09

最新評(píng)論