1.1.0 • Published 1 year ago

render-remote-component v1.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

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