一个可以加载html页面的vue3组件

组织：ahcui

@ahcui/vue3-components-url-loader 是一个可加载页面的vue组件。

当前版本: 1.0.0 (支持 Vue 3)

[ 在线演示 | 使用示例 ]

特性

• 加载html页面
• 通过props传入url参数
• 可监听页面中url参数
• 无边框
• 样式重写与覆盖

入门指南

安装

npm

# 使用 npm    
npm install @ahcui/vue3-components-url-loader --save

引入

• npm方式引入

    import UrlLoader from '@ahcui/vue3-components-url-loader';

加入到 Vue 组件

   export default {
       components: {
          UrlLoader,
      },
   }
   

使用

    <url-loader :url="url" :watchQuery="watchQuery" style="height:100%" frameborder="1" @frameloaded="frameloadedHandle" @framemounted="framemountedHandle"  >
    </url-loader>

	
    import UrlLoader from '@ahcui/vue3-components-url-loader';
	
	export default {
		name: "PageLoader",
		components:{UrlLoader},
		props: {
			url:{
				type: String,
				default:""
				},
			watchQuery:{
				type:Boolean,
				default:true
				},
		},
		setup(){
			const frameloadedHandle = () => {
				console.log("frameloadedHandle");
			}
			const framemountedHandle = () => {
				console.log("framemountedHandle");
			}
			return {
				frameloadedHandle,
				framemountedHandle,
			}
		}
	}

文档

属性

• 要加载的url

  url { type:String, default:"", },

• 是否自动监听页面地址中的url参数切换页面

  watchQuery:{ type:Boolean, default:true }

  如组件所在的当前页面地址为：

  http://localhost:8888/a/b/loadsrc?url=http%3A%2F%2Fnodejs.cn%2Fapi%2F

  若此值设为true，则自动监听url参数的值

事件

布局事件

• framemounted

  对应Vue生命周期 Vue的mounted事件

    framemounted: function(iframe){
      console.log("Vue组件PageLoader构建完成")
    }

• frameloaded

  组件要加载的url页面加载完成事件iframe的load事件

    frameloaded: function(iframe){
      console.log("页面加载完成，同域的前提下您可以向iframe对象内部注入脚本处理")
    }