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

本文思路是把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>

上一张效果图

VUE页面实现加载外部HTML方法相关推荐

vue与外部html通信,VUE页面实现加载外部HTML方法
VUE页面实现加载外部HTML方法 VUE页面实现加载外部HTML方法前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形 ...
提高页面的加载速度的方法——精灵图和字体图标
1. 精灵图 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 为 ...
vue页面滚动加载、页面懒加载
需求:页面有一堆图表.需要滚动到图表时.再加载出来这个图表. 思路:没找到合适的插件.只能自己手撸一个.直接放到混入里就行.主要就是判断元素距离底部的距离和可视区域内容的高度进行对比即可 /*** 判 ...
VUE 通过EXTERNALS 加载外部CDN资源，减少打包体积
目录前端性能优化方案 1.在vue.config.js 里面的写入如下配置使用externals 代码在vue.config.js里面设置打包排除项使用此配置项 con ...
php加载外部html,VUE页面加载外部HTML实例详解
前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍了V ...
为什么css文件是.main,页面无法加载main.css
yii2 如何在页面底部加载css和js 作者:白狼出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留 ...
vue 点击当前路由怎么重新加载_Vue 路由切换时页面内容没有重新加载的解决方法...
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了: keep-aliv ...
SPA单页面应用首屏加载速度提升方法
SPA单页面应用首屏加载速度提升方法首屏加载计算首屏加载时间公式解决方法减少入口文件体积静态资源本地缓存 UI框架按需加载避免组件重复打包图片资源压缩开启GZip压缩首屏加载首屏加 ...
vue组件加载完成之后执行方法_vue-cli监听组件加载完成的方法
在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能. 1.安装vuex npm install vuex --sav ...

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

VUE页面实现加载外部HTML方法相关推荐

最新文章

热门文章