Editor.vue
1.78 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
<script>
import Vue from 'vue'
import CoreEditor from '../components/core/editor'
import LbpButton from '../components/plugins/lbp-button'
import LbpPicture from '../components/plugins/lbp-picture'
const PluginList = [
{
title: '按钮',
icon: 'hand-pointer-o',
component: LbpButton,
visible: true,
name: 'lbp-button'
},
{
title: '图片',
icon: 'image',
component: LbpPicture,
visible: true,
name: 'lbp-picture'
}
]
export default {
extends: CoreEditor,
computed: {
// !#zh 显示在侧边栏或顶部的 可用组件列表
visiblePluginList () {
return PluginList.filter(p => p.visible)
}
},
methods: {
mixinPlugins2Editor () {
PluginList.forEach(plugin => {
// 全局注册组件，便于以后扩展自定义脚本，注释原来的局部注册：this.$options.components[plugin.name] = plugin.component
Vue.component(plugin.name, plugin.component)
})
}
},
created () {
this.mixinPlugins2Editor()
}
}
</script>
<style lang="scss">
$cellSize: 35.6px;
$designerWidth: 320px;
$designerHeight: 568px;
$designerWidthHalf: $designerWidth / 2;
#designer-page {
display: flex;
// https://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc
// less: min-height: ~'calc(100% - 40px)';
min-height: calc(100% - 40px);
}
.plugin-item {
border: 1px solid #f1efef;
width: 49%;
padding: 12px 12px;
&:nth-child(even) {
margin: 4px 0 4px 2% !important;
}
}
.canvas-wrapper {
position: relative;
top: 5%;
width: $designerWidth;
height: $designerHeight;
border: 1px #ebeaea solid;
margin: 0 auto;
}
.lb-tabs {
box-shadow: none;
padding: 4px 8px 4px 0;
border: 1px solid #EBEEF5;
height: 100%;
}
.full-height {
height: 100% !important;
}
</style>