2021-02-28 06:56:08 +08:00
|
|
|
import Vue from 'vue'
|
|
|
|
import { VueConstructor } from 'vue/types/umd'
|
|
|
|
|
2021-03-01 06:24:26 +08:00
|
|
|
export class VueRenderer {
|
2021-03-15 16:00:44 +08:00
|
|
|
ref!: Vue
|
2021-02-28 06:56:08 +08:00
|
|
|
|
|
|
|
constructor(component: Vue | VueConstructor, props: any) {
|
|
|
|
const Component = Vue.extend(component)
|
|
|
|
|
2021-03-15 16:00:44 +08:00
|
|
|
this.ref = new Component(props).$mount()
|
2021-02-28 06:56:08 +08:00
|
|
|
}
|
|
|
|
|
2021-03-18 04:21:57 +08:00
|
|
|
get element(): Element {
|
2021-03-15 16:00:44 +08:00
|
|
|
return this.ref.$el
|
2021-02-28 06:56:08 +08:00
|
|
|
}
|
|
|
|
|
2021-04-21 15:43:31 +08:00
|
|
|
updateProps(props: Record<string, any> = {}): void {
|
2021-03-15 16:00:44 +08:00
|
|
|
if (!this.ref.$props) {
|
2021-02-28 06:56:08 +08:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
// prevents `Avoid mutating a prop directly` error message
|
|
|
|
const originalSilent = Vue.config.silent
|
|
|
|
Vue.config.silent = true
|
|
|
|
|
|
|
|
Object
|
|
|
|
.entries(props)
|
|
|
|
.forEach(([key, value]) => {
|
2021-03-15 16:00:44 +08:00
|
|
|
this.ref.$props[key] = value
|
2021-02-28 06:56:08 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
Vue.config.silent = originalSilent
|
|
|
|
}
|
|
|
|
|
2021-03-18 04:21:57 +08:00
|
|
|
destroy(): void {
|
2021-03-15 16:00:44 +08:00
|
|
|
this.ref.$destroy()
|
2021-02-28 06:56:08 +08:00
|
|
|
}
|
|
|
|
}
|