VUE页面实现加载外部HTML方法，困扰2天终于解决了

<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>

<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>