VUE页面实现加载外部HTML方法

灰太狼 2022-08-31 15:27 332阅读 0赞

本文思路是把HTML请求以来，以v-html的形式加载到页面内部。注册全局组件【v-html-panel】

1.HtmlPanel.vue文件

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 </td> 
 <td> <code>&lt;template&gt;</code> <code>&nbsp;</code>&nbsp;<code>&lt;p&gt;</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>&lt;mu-circular-progress :size=</code>&nbsp;<code>"40"</code>&nbsp;&nbsp;<code>v-</code>&nbsp;<code>if</code>&nbsp;<code>=</code>&nbsp;<code>"loading"</code>&nbsp;<code>/&gt;</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>&lt;p v-html=</code>&nbsp;<code>"html"</code>&nbsp;<code>&gt;&lt;/p&gt;</code> <code>&nbsp;</code>&nbsp;<code>&lt;/p&gt;</code> <code>&lt;/template&gt;</code> <code>&lt;style&gt;</code> <code>&lt;/style&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;</code>&nbsp;<code>export&nbsp;</code>&nbsp;<code>default</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;</code>&nbsp;<code>// 使用时请使用 :url.sync=""传值</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>props: { </code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>url: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>required:&nbsp;</code>&nbsp;<code>true</code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>}</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>},</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>data () { </code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>return</code>&nbsp;&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>loading:&nbsp;</code>&nbsp;<code>false</code>&nbsp;<code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>html:&nbsp;</code>&nbsp;<code>''</code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>}</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>},</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>watch: { </code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>url (value) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>this</code>&nbsp;<code>.load(value)</code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>}</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>},</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>mounted () { </code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>this</code>&nbsp;<code>.load(</code>&nbsp;<code>this</code>&nbsp;<code>.url)</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>},</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>methods: { </code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>load (url) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>if</code>&nbsp;&nbsp;<code>(url &amp;&amp; url.length &gt; 0) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>// 加载中</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>this</code>&nbsp;<code>.loading =&nbsp;</code>&nbsp;<code>true</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>let param = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>accept:&nbsp;</code>&nbsp;<code>'text/html, text/plain'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>this</code>&nbsp;<code>.$http.get(url, param).then((response) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>this</code>&nbsp;<code>.loading =&nbsp;</code>&nbsp;<code>false</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>// 处理HTML显示</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>this</code>&nbsp;<code>.html = response.data</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>}).</code>&nbsp;<code>catch</code>&nbsp;<code>(() =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>this</code>&nbsp;<code>.loading =&nbsp;</code>&nbsp;<code>false</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>this</code>&nbsp;<code>.html =&nbsp;</code>&nbsp;<code>'加载失败'</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>}</code> <code>&nbsp;&nbsp;&nbsp;</code>&nbsp;<code>}</code> <code>&nbsp;&nbsp;</code>&nbsp;<code>}</code> <code>&nbsp;</code>&nbsp;<code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

htmlViewSample.vue

上一张效果图

![db4ae43118bf46cff3080099ef2230b3.png][]

[db4ae43118bf46cff3080099ef2230b3.png]: /images/20220829/0a8bbd243bfa419aaa9e4588598df848.png