AMISRenderer.vue
3.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<template><div class="amis-container">Loading...</div></template>
<script>
import qs from 'qs'
export default {
name: 'AMISRenderer',
components: {},
props: {
schema: {
type: Object,
default: () => ({}),
},
locals: {
type: Object,
default: () => ({}),
},
props: {
type: Object,
default: () => ({}),
},
env: {
type: Object,
default: () => ({}),
},
// 这里面的数据所有 amis 页面都可以获取到
// 可以用来放一下公共数据，比如用户信息等
// 不要放受控数据，受控数据应该通过 data 下发
context: {
type: Object,
default: () => ({}),
},
},
data() {
const router = this.$router
return {
get location() {
const current = router.history.current
return {
pathname: current.path,
hash: current.hash,
query: current.query,
search: `?${qs.stringify(current.query)}`,
}
},
loading: false,
amisInstance: null,
unmounted: false,
}
},
watch: {
locals: function () {
this.updateProps()
},
props: function () {
this.updateProps()
},
$route: function () {
this.updateProps()
},
},
async mounted() {
if (this.unmounted) {
return
}
const scoped = amisRequire('amis/embed')
const { normalizeLink } = amisRequire('amis')
const router = this.$router
const instance = scoped.embed(
this.$el,
this.schema,
{
data: {
...this.locals,
},
context: this.context,
location: this.location,
// todo 下发 location 对象
...this.props,
},
{
jumpTo: (to, action) => {
// 覆盖内置的跳转逻辑，根据项目需求自己处理
// if (to === 'goBack') {
// return router.go(-1)
// }
//
// to = normalizeLink(to, this.location)
//
// if (action?.actionType === 'url') {
// action.blank === false ? router.push(to) : window.open(to)
// return
// }
//
// // 主要是支持 nav 中的跳转
// if (action && to && action.target) {
// window.open(to, action.target)
// return
// }
//
// if (/^https?:\/\//.test(to)) {
// window.location.replace(to)
// } else {
// router.push(to)
// }
},
updateLocation: (location, replace) => {
// 覆盖内置的跳转逻辑，根据项目需求自己处理
// if (location === 'goBack') {
// return router.go(-1)
// }
//
// location = normalizeLink(location, this.location)
// replace ? router.replace(location) : router.replace(location)
},
...this.env,
},
() => {
this.$emit('ready', {
instance,
})
}
)
this.amisInstance = instance
},
destroyed() {
this.unmounted = true
this.amisInstance?.unmount()
},
methods: {
updateProps() {
this.amisInstance?.updateProps({
data: {
...this.locals,
},
context: this.context,
...this.props,
})
},
},
}
</script>