## 介紹
自定義組件里使用element自帶的組件和云后臺已經提前引入的庫是沒有問題提的,但是很多時候我們還需要在自定義組件的同時,加載一些第三方的js庫,比如高德地圖。云后臺引入了VueScript2來解決這個問題。
注意:
1.引入的插件必須是cdn形式的而非npm形式的。
2.利用loadedScript這樣一個變量加上v-if來避免你js庫沒加載好的時候頁面渲染導致找不到組件。
```
<template>
<el-amap
v-if="loadedScript"
class="amap-box"
:vid="'amap-' + item.name">
</el-amap>
</template>
```
```
data() {
let self = this;
return {
loadedScript: false
}
},
created: async function() {
// 加載js插件
await this.loadScript();
// 高德地圖
this.amapManager = new VueAMap.AMapManager();
VueAMap.initAMapApiLoader({
key: '申請一個key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.Geocoder', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 默認高德 sdk 版本為 1.4.4
v: '1.4.4'
});
VueAMap.lazyAMapApiLoaderInstance.load().then(() => {
this.loadedScript = true;
this.geocoder = new AMap.Geocoder({
// city 指定進行編碼查詢的城市,支持傳入城市名、adcode 和 citycode
city: '全國'
});
});
// 其他業務邏輯
},
methods: {
loadScript () {
let that = this;
return new Promise((resolve, reject) => {
that.VueScript2.load('https://cdn.jsdelivr.net/npm/vue-amap/dist/index.js').then(function () {
resolve();
});
});
}
}
```
- 說明
- 簡介
- 系統安裝
- 后端注意
- 目錄結構
- 數據表
- 用戶注冊
- 前端注意
- 后端接口開發
- 新建模塊
- 創建數據表
- 創建模型
- 創建后臺控制器
- 添加后臺接口
- 創建前臺控制器
- 添加前臺接口
- 常用接口
- 檢查用戶登錄
- 內置接口
- Builder動態頁面
- Builder列表
- addTopButton
- addRightButton
- addColumn
- setDataList
- setDataPage
- getData
- Builder表單
- setFormMethod
- addFormItem
- 單圖image
- 多圖images
- addFormRule
- setFormValues
- getData
- 自定義組件
- 自定義頁面組件
- 自定義Form組件
- 加載第三方js插件
- 常見問題
- 模塊開發者
- 升級指南
- 圖標
- 擴展
- Composer
- ThinkPHP5.1
- GuzzleHttp
- phpspreadsheet
- QueryList
- phpseclib
- 云后臺接口