# @ahcui/vue3-components-url-loader

> VUE3组件-可载入url页面的vue组件

Latest version **1.0.0** (published 2022-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ahcui/vue3-components-url-loader
pnpm add @ahcui/vue3-components-url-loader
yarn add @ahcui/vue3-components-url-loader
bun add @ahcui/vue3-components-url-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-07-19 |
| First published | 2022-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 30.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zerostyle |
| Maintainers | zero_style |
| Keywords | @ahcui, vue3-components-url-loader, url-loader, page-loader |

## Links

- npm: https://www.npmjs.com/package/@ahcui/vue3-components-url-loader
- Repository: https://gitee.com/ahcui/vue3-components-url-loader
- Homepage: https://gitee.com/ahcui/vue3-components-url-loader/blob/v1.0.0/README.md
- Issues: https://gitee.com/ahcui/vue3-components-url-loader/issues
- npm.io page: https://npm.io/package/@ahcui/vue3-components-url-loader

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.33
- [vue-router](https://npm.io/package/vue-router.md) ^4.0.15

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-07-19

## README

<h1 align="center">@ahcui/vue3-components-url-loader</h1>

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

##### 组织：ahcui

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



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



[ **[在线演示](http://www.ahcui.com/) | 
[使用示例](https://gitee.com/ahcui/vue3-multiplex-project)** ]



## 特性

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



## 入门指南

### 安装

#### npm

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

### 引入

* npm方式引入

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

加入到 Vue 组件 

 ```javascript
    export default {
        components: {
           UrlLoader,
       },
    }
    
```  

### 使用
	
```html

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

```javascript
	
    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**<br/>
	{
		type:String,
		default:"",
	},
	
* 是否自动监听页面地址中的url参数切换页面

	**watchQuery:**<br/>{
      type:Boolean,
      default:true
    }
	
	如组件所在的当前页面地址为：
	
	http://localhost:8888/a/b/loadsrc?url=http%3A%2F%2Fnodejs.cn%2Fapi%2F
	
	若此值设为true，则自动监听url参数的值
	
	
		
#### 事件

   布局事件

* **framemounted**

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

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

* **frameloaded**

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

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

---
_Source: https://npm.io/package/@ahcui/vue3-components-url-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._