engine-entry.js
2.02 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
/**
* #!zh:
* engine 页面是 webpack 构建多页面中的其中的一个页面
* entry-entry 是 构建 engine 页面的入口，类似于 src/main.js 的作用
* 作用：作品预览的渲染引擎，其实就是简单遍历 work(作品) 的 pages 以及 elements，显示即可
* 主要在预览弹窗中预览 和 用户在手机上查看作品使用
*
*/
import Vue from 'vue'
// import 'font-awesome/css/font-awesome.min.css'
import { pluginsList } from './mixins/load-plugins.js'
import Element from './components/core/models/element'
Vue.config.productionTip = true
const Engine = {
name: 'engine',
methods: {
renderPreview (h, _elements) {
const elements = _elements.map(element => new Element(element))
return (
<div style={{ height: '100%', position: 'relative' }}>
{
elements.map((element, index) => {
const style = element.getStyle({ position: 'absolute', isRem: true })
const data = {
style,
props: element.getProps({ mode: 'preview' })
}
return h(element.name, data)
})
}
</div>
)
}
},
render (h) {
const work = window.__work
return (
<div id="work-container" data-work-id={work.id}>
<div class="swiper-container">
<div class="swiper-wrapper">{
work.pages.map(page => {
return (
<section class="swiper-slide flat">
{/* this.walk(h, page.elements) */}
{ this.renderPreview(h, page.elements) }
</section>
)
})
}</div>
<div class="swiper-pagination"></div>
</div>
</div>
)
}
}
const install = function (Vue) {
Vue.component(Engine.name, Engine)
pluginsList.forEach(plugin => {
Vue.component(plugin.name, plugin.component)
})
}
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install,
Engine
}