本文思路是把HTML请求以来，以v-html的形式加载到页面内部。注册全局组件【v-html-panel】
1.HtmlPanel.vue文件
<template>
<p>
<mu-circular-progress :size= "40" v- if = "loading" />
<p v-html= "html" ></p>
</p>
</template>
<style>
</style>
<script>
export default {
// 使用时请使用 :url.sync=""传值
props: {
url: {
required: true
}
},
data () {
return {
loading: false ,
html: ''
}
},
watch: {
url (value) {
this .load(value)
}
},
mounted () {
this .load( this .url)
},
methods: {
load (url) {
if (url && url.length > 0) {
// 加载中
this .loading = true
let param = {
accept: 'text/html, text/plain'
}
this .$http.get(url, param).then((response) => {
this .loading = false
// 处理HTML显示
this .html = response.data
}). catch (() => {
this .loading = false
this .html = '加载失败'
})
}
}
}
}
</script>htmlViewSample.vue
<template>
<p>
<v-html-panel :url.asyc= "url1" ></v-html-panel>
<v-html-panel :url.asyc= "url2" ></v-html-panel>
</p>
</template>
<style scoped>
p{color:red}
</style>
<script>
export default {
data () {
return {
url1: '' ,
url2: ''
}
},
mounted () {
this .url1 = 'http://file.xxx.com/group1/M00/0C/F5/xxxxxxxx.html'
this .url2 = 'http://file.xxx.com/group1/M00/0D/3B/yyyyyyy.html'
},
methods: {
}
}
</script>上一张效果图
