1.1.0 • Published 1 year ago
render-remote-component v1.1.0
render-remote-component - 渲染远程的vue2/vue3/react组件
用法
在vue2、vue3中使用
<template>
<RenderRemoteComponent
:remoteOptions="remoteOptions"
v-bind="componentProps"
/>
</template>
import {inVue as RenderRemoteComponent} from 'render-remote-component'
export default {
components: {
RenderRemoteComponent,
},
data() {
return {
remoteOptions: {
// 组件名称
name: 'xxx',
// 用于渲染的沙箱模式 - 可选项为 false|iframe|shadow
sandbox: 'shadow',
},
componentProps: {
id: 'aaa'
},
}
},
}
或
<template>
<RenderRemoteComponent
remoteOptions="xxx?sandbox=shadow"
v-bind="componentProps"
/>
</template>
import {inVue as RenderRemoteComponent} from 'render-remote-component'
export default {
components: {
RenderRemoteComponent,
},
data() {
return {
componentProps: {
id: 'aaa'
},
}
},
}
在js中直接使用
import {inDom as render} from 'render-remote-component'
const {setProps, dispose, refresh} = render('xxx?sandbox=shadow', document.body, {
props: {
id: 'aaa'
}
})
在vue2、vue3中重置加载状态及错误状态的方法
// 全局重置渲染加载状态的方式 - 将渲染方法挂载在组件实例上
RenderRemoteComponent.methods.renderLoading = function() {
return this.h2('center', '加载中')
}
RenderRemoteComponent.methods.renderError = function(error) {
return this.h2('center', '组件加载失败')
}
或
// 临时重置渲染加载状态的方式 - 将渲染方法在remoteOptions上传递
const remoteOptions = {
renderLoading() {
return this.h2('center', '加载中')
}
renderError(error) {
return this.h2('center', '组件加载失败')
}
}
1.1.0
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago
0.1.2-0.1
2 years ago
0.1.20-1
2 years ago
0.1.20
2 years ago
0.1.21
2 years ago
0.1.22
2 years ago
0.1.23
2 years ago
0.1.16
2 years ago
0.1.17
2 years ago
0.1.18
2 years ago
0.1.19
2 years ago
0.1.15
2 years ago
0.1.14
2 years ago
0.1.13
2 years ago
0.1.12
2 years ago
0.1.11
2 years ago
0.1.10
2 years ago
0.1.9
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago