之前使用XMLHttpRequest，跨平台发送Http请求，出现一系列跨域问题，使用const that = this转内部，确实非常麻烦。
这里是使用vue的axios发送，相对简单，全段代码。
<template>
<div>
<AdjudicationLayer />
<!-- <mu-circular-progress v-if="loading" :size="40" /> -->
<div ref="includeHtml" v-html="html" />
</div>
</template>
<script>
import AdjudicationLayer from './AdjudicationLayer.vue'
// 引入axios
import axios from 'axios'
export default {
name: 'Intervene',
components: { AdjudicationLayer },
data() {
return {
loading: false,
html: ''
}
},
mounted() {
this.load()
},
methods: {
load(url) {
// 加载中
this.loading = true
const request = axios.create({
url: 'http://192.168.19.1:9527/include-html/index.html',
method: 'get'
})
request().then((response) => {
this.loading = false
// 处理HTML显示
this.html = response.data
// $nextTick() Vue中DOM更新是异步的
this.$nextTick(() => {
const item= document.createElement('script')
item.type = 'text/javascript'
item.async = false
item.src = 'https://cdn.sfile.org/jquery/jquery.min.js'
this.$refs.includeHtml.append(item)
})
}).catch(() => {
this.loading = false
this.html = '加载失败'
})
}
}
}
</script>
<style scoped>
.rcxc-map{
width: calc(100vw);
height: calc(100vh - 108px);
}
</style>
