開發一個封裝iframe的vue元件
vue的基本組成單元，我看應該是元件。用VUE開發前端專案，就是開發一個個元件，然後搭積木一樣，將專案搭建出來。元件包含在頁面，或者是更大的元件裡面。在這裡，元件與頁面的界限，好像並不明顯。事實上，對於單頁應用，只有一個頁面。
元件的好處，一是可以加強複用；二是能夠將特定功能封裝，利於呼叫；三是由於職責分明，元件高內聚，元件間低耦合，利於系統功能的優化、擴充套件和維護。好處多多。
開發元件，主要有2部分內容：
1、元件內部邏輯
2、外部介面
由於我這兩天弄的元件，裡面包含有一個<iframe>，那麼還有一部分工作內容：
3、iframe介面
一、元件介紹
這是一個地圖外掛。功能是展示地圖，以及接受外部命令，載入圖層、繪製圖形等相關操作。地圖採用arcgis for
二、元件內部結構及邏輯
1、程式碼組織結構
2、地圖元件
Map.vue
<template> <div class="map-container"> <!-- 承載地圖頁面 --> <iframe :src="src" ref="iframe" @load="iframeLoad"></iframe> </div> </template> <!-- Add "scoped" attribute to limitcss to this component only --> <style scoped="scoped"> .map-container iframe{ width: 100%; height: 100%; border: none; } </style> <script> import config from '../../vue.config'//裡面有路徑資訊 let iframeWin = null;//私有變數 export default { props:['size'],//純測試，沒啥用，對應<Map id="map" ref="map" size="100"></Map> data() { return {程式設計客棧 src: '',//地圖頁面地址 isLoaded: false,//地圖頁面是否載入完畢 iMap: null,//地圖頁面暴露出來的，供外部訪問的物件 require: null//arcgis的require函式，用於引用自定義外掛。我們過去寫了不少自定義的地圖外掛 } },created() { this.src = config.publicPath + 'map.html' },mounted() { //監聽iframe的訊息 window.addEventListener('message',this.handleMessage) iframeWin = this.$refs.iframe.contentWindow },methods: { iframeLoad() { this.isLoaded = true; window.console.log("map is ready") },async handleMessage() {//接收來自iframe的訊息 this.require = iframeWin.require; this.iMap = iframeWin.iMap; },loadLayer(nodes,servers){ this.iMap.layerHandler.load(nodes,servers); },isReady(){ return this.isLoaded; } } } </script>
有關元件的結構，比如
export default {
props:,//標記裡的屬性
data() {//公共變數
},created() {//載入時？
},mounted() {//載入完畢時
},methods: {//公共方法
}
}
export代表了這是對外。所以裡面的屬性、變數、方法，都可以被外部訪問。如果想私有，應該在export之外定義。如本例：
像這類簡單的介紹，在網上怎麼也搜不到。vue的中文站點，陳舊，內容支離破碎，對初學者極不友好，加重了學習的成本。
三、iframe介面
元件Map.vue與裡面的ifrpeHrQVQDerame是怎麼通訊的呢？
通過系統訊息和直接訪問iframe的物件。直接訪問iframe裡的物件有個前提，就是不能跨域。
iframe承載的地圖頁面map.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> ... </head> <body> <div id="map"></div> ... </div> </body> </html> <script src="http://192.168.0.200/pubzy211/arcgis_js_api/3.19/init.js"></script> <script type="text/javascript"> var iMap = {}; //外部引用介面 require([ "esri/config","esri/map","esri/geometry/Extent","esri/SpatialReference","layerlib/LtLayer","dojo/dom","dojo/_base/array","dojo/parser","dojo/domReady!" ],function( esriConfig,Map,Extent,SpatialReference,LtLayer,dom,arrayUtils,parser ) { //map var map = ... /* 外部介面 */ iMap = { map: map,legend: legend,home: home,tipDialog: tipDialog,toggle: togg程式設計客棧le,overviewMap: overviewMap }; iMap.drawHandler = ... iMap.layerHandler = ...; iMap.centerAt = ...; iMap.clear = ...; iMap.restoreView = ...; // 向父vue頁面傳送載入完畢訊號 window.parent.postMessage({ cmd: 'mapIsReady',params: { success: true,data: true } },'*'); /* end of 外部介面 */ }); </script>
地圖元件Map.vue對應iframe部分，詳見一.2中的程式碼
export default {
。。。
mounted() {
//監聽iframe的訊息
window.addEventListener('message',this.handleMessage)
//獲得iframe的wihttp://www.cppcns.comndow物件
iframeWin = this.$refs.iframe.contentWindow
},servers){
//加程式設計客棧載圖層
this.iMap.layerHandler.load(nodes,servers);
}
}
}
四、外部介面
Map.vue是一個元件，它要跟它所在的元件或頁面進行通訊。
現在，Map.vue放在了一個容器頁面Home.vue（即測試頁面）裡，裡面還有一個命令元件Layer.vue。點選命令元件裡的按鈕，地圖要做出相應的響應。其中的原理如下：
命令元件的按鈕點選後，發射資訊到容器頁面，然後容器頁面呼叫地圖元件的方法。
測試頁面Home.vue
<template>
<div id="app1">
<div id="map-container">
<div>地圖元件</div>
<Map id="map" ref="map" size="100"></Map>
</div>
<div id="layer-container">
<div>其他元件</div>
<Layer @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></Layer>
</div>
</div>
</template>
<script>
import Map from '../components/Map.vue'
import Layer from '../components/Layer.vue'
export default {
name: 'App',components: {
Map,Layer
},methods:{
loadLayer(nodes,servers){//載入圖層
let map = this.$refs.map;
map.loadLayer(nodes,loadCloud(data){//載入衛星雲圖
let map = this.$refs.map;
map.require(["drawlib/Cloud"],function (Cloud) {
let iMap = map.iMap;
let cloudId = 'cloud';
let cloud = new Cloud(iMap.map);
iMap.drawHandler.push(cloudId,cloud);
cloud.draw(data,cloudId);
});
},clearMap(){//清除
let map = this.$refs.map;
map.iMap.clear();
}
}
}
</script>
<style>
。。。
</style>
命令元件Layer.vue
<template>
<div class="layer-container">
<button @click="loadLayer">載入圖層</button>
<button @click="loadCloud">衛星雲圖</button>
<button @click="clear">清除</button>
</div>
</template>
<script>
export default {
methods: {
loadLayer() {
let nodes = ...
let servers = ...
this.$emit("loadLayer",nodes,servers)
},loadCloud(){
let data = ...;
this.$emit("loadCloud",data);
},clear(){
this.$emit("clear");
}
},}
</script>
<style scoped="scoped">
。。。
</style>
注意命令元件發射訊息中指定的方法，在容器頁面中都有相關的屬性與之對應：
命令元件
loadCloud(){
let data = ...;
this.$emit("loadCloud",data);
},容器頁面
<Layer @loadLayer="loadLayer" @loadCloud="loadCloud" @clear="clearMap"></Layer>
五、執行結果
六、總結
其他元件要與地圖元件互動，中間要通過容器頁面，其他元件與地圖元件並沒有直接互動。這其實是一種命令模式。好處是其他元件和地圖元件解耦，沒有耦合在一起，意味著互不影響。這有利於地圖元件本身的擴充套件和優化。缺點的話，每個東東都要通過容器頁面轉發，容器頁面程式碼可能會有冗餘，有些方法根本就是個傳聲筒，給人的感覺是重重複復的寫，意義不太大。
以上就是開發一個封裝iframe的vue元件的詳細內容，更多關於封裝iframe的vue元件的資料請關注我們其它相關文章！