@zhangqingcq/vgce 0.0.22 → 0.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +1 -1
- package/dist/vgce.js +8980 -8965
- package/dist/vgce.umd.cjs +61 -61
- package/package.json +1 -1
- package/src/assets/icons/add.svg +1 -1
- package/src/components/svg-editor/index.vue +18 -3
- package/src/components/svg-editor/right-panel/list.vue +85 -85
- package/src/components/svg-editor/top-panel/index.vue +15 -23
- package/src/components/svg-viewer/index.vue +14 -1
- package/src/router.ts +0 -5
- package/src/views/EditorS.vue +8 -4
- package/src/views/Preview.vue +38 -12
package/package.json
CHANGED
package/src/assets/icons/add.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686279304877" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12132" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M512 128c211.2 0 384 172.8 384 384s-172.8 384-384 384-384-172.8-384-384 172.8-384 384-384m0-64C262.4 64 64 262.4 64 512s198.4 448 448 448 448-198.4 448-448-198.4-448-448-448z" p-id="12133"></path><path d="M320 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12134"></path><path d="M704 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12135"></path><path d="M512 320m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12136"></path><path d="M512 704m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12137"></path><path d="M320 480h384v64H320z" p-id="12138"></path><path d="M480 320h64v384h-64z" p-id="12139"></path></svg>
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686279304877" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12132" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path class="icon-out" d="M512 128c211.2 0 384 172.8 384 384s-172.8 384-384 384-384-172.8-384-384 172.8-384 384-384m0-64C262.4 64 64 262.4 64 512s198.4 448 448 448 448-198.4 448-448-198.4-448-448-448z" p-id="12133"></path><path class="icon-in" d="M320 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12134"></path><path class="icon-in" d="M704 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12135"></path><path class="icon-in" d="M512 320m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12136"></path><path class="icon-in" d="M512 704m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="12137"></path><path class="icon-in" d="M320 480h384v64H320z" p-id="12138"></path><path class="icon-in" d="M480 320h64v384h-64z" p-id="12139"></path></svg>
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
globalStore.setDoneJson(done_json)
|
|
73
73
|
}
|
|
74
74
|
onMounted(() => {
|
|
75
|
-
|
|
75
|
+
//清除历史记录，解决外部传入不同数据，形成历史记录的问题
|
|
76
76
|
editPrivateStore.history_doneComponent = []
|
|
77
77
|
editPrivateStore.history_now_index = 0
|
|
78
78
|
if (props.data) {
|
|
@@ -85,9 +85,24 @@
|
|
|
85
85
|
|
|
86
86
|
const { appContext } = getCurrentInstance()!
|
|
87
87
|
|
|
88
|
+
function onReturnClick(d: IDataModel) {
|
|
89
|
+
emits('onReturn', {
|
|
90
|
+
data: d,
|
|
91
|
+
isChange: editPrivateStore.getTopBtnUndoStatus
|
|
92
|
+
})
|
|
93
|
+
}
|
|
94
|
+
|
|
88
95
|
function save(d: IDataModel) {
|
|
89
96
|
if (props.saveFile) {
|
|
90
|
-
ElMessageBox.prompt(
|
|
97
|
+
ElMessageBox.prompt(
|
|
98
|
+
'请输入文件名',
|
|
99
|
+
'保存',
|
|
100
|
+
{
|
|
101
|
+
cancelButtonText: '取消',
|
|
102
|
+
confirmButtonText: '保存'
|
|
103
|
+
},
|
|
104
|
+
appContext
|
|
105
|
+
)
|
|
91
106
|
.then((r: any) => {
|
|
92
107
|
fileWrite(d, r.value.trim())
|
|
93
108
|
emits('onSave', d)
|
|
@@ -110,7 +125,7 @@
|
|
|
110
125
|
<el-header class="top-el-header">
|
|
111
126
|
<top-panel
|
|
112
127
|
@change-visible="changeVisible"
|
|
113
|
-
@on-return="
|
|
128
|
+
@on-return="onReturnClick"
|
|
114
129
|
@on-preview="(val: IDataModel) => emits('onPreview', val)"
|
|
115
130
|
@on-save="save"
|
|
116
131
|
></top-panel>
|
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import type { IAttrItem } from '@/config/types'
|
|
3
|
-
import { ElIcon, ElInput } from 'element-plus'
|
|
4
|
-
import SvgAnalysis from '@/components/svg-analysis/index.vue'
|
|
5
|
-
|
|
6
|
-
const props = withDefaults(defineProps<{ modelValue: IAttrItem[] }>(), {
|
|
7
|
-
modelValue: () => [
|
|
8
|
-
{
|
|
9
|
-
key: '',
|
|
10
|
-
val: ''
|
|
11
|
-
}
|
|
12
|
-
]
|
|
13
|
-
})
|
|
14
|
-
const emit = defineEmits(['update:modelValue'])
|
|
15
|
-
|
|
16
|
-
const value = computed({
|
|
17
|
-
get() {
|
|
18
|
-
return props.modelValue
|
|
19
|
-
},
|
|
20
|
-
set(val) {
|
|
21
|
-
emit('update:modelValue', val)
|
|
22
|
-
}
|
|
23
|
-
})
|
|
24
|
-
|
|
25
|
-
const addL = () => {
|
|
26
|
-
value.value.push({
|
|
27
|
-
key: '',
|
|
28
|
-
val: ''
|
|
29
|
-
})
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
const deleteL = (i: number) => {
|
|
33
|
-
value.value.splice(i, 1)
|
|
34
|
-
}
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
<template>
|
|
38
|
-
<div class="wall-l">
|
|
39
|
-
<div class="head-l">
|
|
40
|
-
<span>key</span>
|
|
41
|
-
<span>value</span>
|
|
42
|
-
|
|
43
|
-
<el-icon :size="16" class="bt-Icon" @click="addL">
|
|
44
|
-
<svg-analysis name="add" />
|
|
45
|
-
</el-icon>
|
|
46
|
-
</div>
|
|
47
|
-
<div class="row-l" v-for="(item, i) of value">
|
|
48
|
-
<el-input class="content-l" v-model="item.key" size="small" placeholder="key" />
|
|
49
|
-
<el-input class="content-l" v-model="item.val" size="small" placeholder="value" />
|
|
50
|
-
|
|
51
|
-
<el-icon :size="16" class="bt-Icon" @click="deleteL(i)">
|
|
52
|
-
<svg-analysis name="delete" />
|
|
53
|
-
</el-icon>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
</template>
|
|
57
|
-
|
|
58
|
-
<style lang="less" scoped>
|
|
59
|
-
.wall-l {
|
|
60
|
-
background-color: #
|
|
61
|
-
padding: 4px 5px 2px 5px;
|
|
62
|
-
border-radius: 4px;
|
|
63
|
-
.head-l {
|
|
64
|
-
display: flex;
|
|
65
|
-
align-items: center;
|
|
66
|
-
|
|
67
|
-
span {
|
|
68
|
-
display: inline-block;
|
|
69
|
-
width: 42%;
|
|
70
|
-
margin-right: 10px;
|
|
71
|
-
color: #666;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.row-l {
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
padding-bottom: 6px;
|
|
79
|
-
.content-l {
|
|
80
|
-
width: 42%;
|
|
81
|
-
margin-right: 10px;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { IAttrItem } from '@/config/types'
|
|
3
|
+
import { ElIcon, ElInput } from 'element-plus'
|
|
4
|
+
import SvgAnalysis from '@/components/svg-analysis/index.vue'
|
|
5
|
+
|
|
6
|
+
const props = withDefaults(defineProps<{ modelValue: IAttrItem[] }>(), {
|
|
7
|
+
modelValue: () => [
|
|
8
|
+
{
|
|
9
|
+
key: '',
|
|
10
|
+
val: ''
|
|
11
|
+
}
|
|
12
|
+
]
|
|
13
|
+
})
|
|
14
|
+
const emit = defineEmits(['update:modelValue'])
|
|
15
|
+
|
|
16
|
+
const value = computed({
|
|
17
|
+
get() {
|
|
18
|
+
return props.modelValue
|
|
19
|
+
},
|
|
20
|
+
set(val) {
|
|
21
|
+
emit('update:modelValue', val)
|
|
22
|
+
}
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
const addL = () => {
|
|
26
|
+
value.value.push({
|
|
27
|
+
key: '',
|
|
28
|
+
val: ''
|
|
29
|
+
})
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const deleteL = (i: number) => {
|
|
33
|
+
value.value.splice(i, 1)
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<template>
|
|
38
|
+
<div class="wall-l">
|
|
39
|
+
<div class="head-l">
|
|
40
|
+
<span>key</span>
|
|
41
|
+
<span>value</span>
|
|
42
|
+
|
|
43
|
+
<el-icon :size="16" class="bt-Icon" @click="addL">
|
|
44
|
+
<svg-analysis name="add" />
|
|
45
|
+
</el-icon>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="row-l" v-for="(item, i) of value">
|
|
48
|
+
<el-input class="content-l" v-model="item.key" size="small" placeholder="key" />
|
|
49
|
+
<el-input class="content-l" v-model="item.val" size="small" placeholder="value" />
|
|
50
|
+
|
|
51
|
+
<el-icon :size="16" class="bt-Icon" @click="deleteL(i)">
|
|
52
|
+
<svg-analysis name="delete" />
|
|
53
|
+
</el-icon>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<style lang="less" scoped>
|
|
59
|
+
.wall-l {
|
|
60
|
+
background-color: #f5f8fb;
|
|
61
|
+
padding: 4px 5px 2px 5px;
|
|
62
|
+
border-radius: 4px;
|
|
63
|
+
.head-l {
|
|
64
|
+
display: flex;
|
|
65
|
+
align-items: center;
|
|
66
|
+
|
|
67
|
+
span {
|
|
68
|
+
display: inline-block;
|
|
69
|
+
width: 42%;
|
|
70
|
+
margin-right: 10px;
|
|
71
|
+
color: #666;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.row-l {
|
|
76
|
+
display: flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
padding-bottom: 6px;
|
|
79
|
+
.content-l {
|
|
80
|
+
width: 42%;
|
|
81
|
+
margin-right: 10px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
</style>
|
|
@@ -9,8 +9,6 @@
|
|
|
9
9
|
import { EVisibleConfKey } from '../types'
|
|
10
10
|
import type { IDataModel } from '../types'
|
|
11
11
|
import { EGlobalStoreIntention } from '@/stores/global/types'
|
|
12
|
-
import { VAceEditor } from 'vue3-ace-editor'
|
|
13
|
-
import LeftPanel from '@/components/svg-editor/left-panel/index.vue'
|
|
14
12
|
|
|
15
13
|
const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
|
|
16
14
|
const globalStore = useGlobalStore(pinia)
|
|
@@ -21,21 +19,14 @@
|
|
|
21
19
|
globalStore.done_json.length <= 0 || globalStore.setDoneJson([])
|
|
22
20
|
globalStore.intention = EGlobalStoreIntention.None
|
|
23
21
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
layout_center: svgEditLayoutStore.center_offset,
|
|
27
|
-
config: configStore.$state,
|
|
28
|
-
done_json: globalStore.done_json
|
|
29
|
-
}
|
|
30
|
-
emits('onPreview', data_model)
|
|
31
|
-
}
|
|
32
|
-
const onSaveClick = () => {
|
|
22
|
+
|
|
23
|
+
const dataBtnClick = (d: 'onReturn' | 'onPreview' | 'onSave') => {
|
|
33
24
|
const data_model: IDataModel = {
|
|
34
25
|
layout_center: svgEditLayoutStore.center_offset,
|
|
35
26
|
config: configStore.$state,
|
|
36
27
|
done_json: globalStore.done_json
|
|
37
28
|
}
|
|
38
|
-
emits(
|
|
29
|
+
emits(d, data_model)
|
|
39
30
|
}
|
|
40
31
|
|
|
41
32
|
const open = ref(false)
|
|
@@ -137,15 +128,15 @@
|
|
|
137
128
|
</el-icon> -->
|
|
138
129
|
</div>
|
|
139
130
|
<div class="flex items-center mr-20px">
|
|
140
|
-
<el-icon title="返回" class="bt-Icon" :size="24" @click="
|
|
131
|
+
<el-icon title="返回" class="bt-Icon" :size="24" @click="dataBtnClick('onReturn')">
|
|
141
132
|
<svg-analysis name="return" />
|
|
142
133
|
</el-icon>
|
|
143
134
|
<el-divider direction="vertical"></el-divider>
|
|
144
|
-
<el-icon title="保存" class="bt-Icon" :size="24" @click="
|
|
135
|
+
<el-icon title="保存" class="bt-Icon" :size="24" @click="dataBtnClick('onSave')">
|
|
145
136
|
<svg-analysis name="save" />
|
|
146
137
|
</el-icon>
|
|
147
138
|
<el-divider direction="vertical"></el-divider>
|
|
148
|
-
<el-icon title="预览" class="bt-Icon" :size="22" @click="
|
|
139
|
+
<el-icon title="预览" class="bt-Icon" :size="22" @click="dataBtnClick('onPreview')">
|
|
149
140
|
<svg-analysis name="preview" />
|
|
150
141
|
</el-icon>
|
|
151
142
|
</div>
|
|
@@ -166,24 +157,24 @@
|
|
|
166
157
|
<el-scrollbar max-height="60vh">
|
|
167
158
|
<div class="font-bold mb-10px text-15px guide-title" style="padding-top: 16px">多选</div>
|
|
168
159
|
<div>鼠标按住左键可以框选，也可以按住ctrl+鼠标左键点图形进行多选</div>
|
|
169
|
-
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"
|
|
160
|
+
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
|
|
170
161
|
<div class="font-bold mb-10px text-15px guide-title">拖动画布</div>
|
|
171
162
|
<div>右键画布然后拖动即可，右侧面板‘图纸’栏可微调或重置位置</div>
|
|
172
|
-
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"
|
|
163
|
+
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
|
|
173
164
|
<div class="font-bold mb-10px text-15px guide-title">画布缩放</div>
|
|
174
165
|
<div>使用鼠标滚轮或者右侧面板‘图纸’栏可控制画布缩放</div>
|
|
175
|
-
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"
|
|
166
|
+
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
|
|
176
167
|
<div class="font-bold mb-10px text-15px guide-title">标尺辅助线</div>
|
|
177
168
|
<div>在标尺区域按住鼠标左键并拖动即可创建标尺辅助线，将标尺辅助线拖动到标尺区域即可删除标尺辅助线</div>
|
|
178
|
-
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"
|
|
169
|
+
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
|
|
179
170
|
<div class="font-bold mb-10px text-15px guide-title">连线样式</div>
|
|
180
171
|
<div
|
|
181
|
-
|
|
182
|
-
>
|
|
183
|
-
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"
|
|
172
|
+
>在右侧‘连线’栏可以统一配置连线样式，配置后先增加的线会应用新样式，之前的线样式不变，如需改变，可选中线手动更改或删除重画
|
|
173
|
+
</div>
|
|
174
|
+
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
|
|
184
175
|
<div class="font-bold mb-10px text-15px guide-title">横线和竖线</div>
|
|
185
176
|
<div>画线的时候按住ctrl即可画竖线，按住shift即可画横线</div>
|
|
186
|
-
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"
|
|
177
|
+
<div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"></div>
|
|
187
178
|
<div class="font-bold mb-10px text-15px guide-title">线段选中</div>
|
|
188
179
|
<div style="padding-bottom: 14px">
|
|
189
180
|
若线段绑定了锚点，移动线段，绑定的锚点不会移动。若是想将线段整体移动，需要先选中线段，在右侧‘数据’栏里解除绑定
|
|
@@ -214,6 +205,7 @@
|
|
|
214
205
|
margin-right: 0;
|
|
215
206
|
padding-right: 16px;
|
|
216
207
|
}
|
|
208
|
+
|
|
217
209
|
.el-dialog__body {
|
|
218
210
|
padding-top: 0;
|
|
219
211
|
padding-bottom: 8px;
|
|
@@ -62,7 +62,6 @@
|
|
|
62
62
|
return
|
|
63
63
|
}
|
|
64
64
|
if (!props.canvasDrag) {
|
|
65
|
-
console.log(props.canvasDrag)
|
|
66
65
|
return
|
|
67
66
|
}
|
|
68
67
|
const { clientX, clientY } = e
|
|
@@ -139,6 +138,19 @@
|
|
|
139
138
|
const setNodeAttrByID = (id: string, attr: string, val: any) => {
|
|
140
139
|
return setArrItemByID(id, attr, val, preview_data.done_json)
|
|
141
140
|
}
|
|
141
|
+
|
|
142
|
+
const getStyle = (root: IDoneJson) => {
|
|
143
|
+
let t = false
|
|
144
|
+
if (root.events?.length > 0) {
|
|
145
|
+
for (let e of root.events) {
|
|
146
|
+
if (e.type === EEventType.Click) {
|
|
147
|
+
t = true
|
|
148
|
+
break
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
return { cursor: t ? 'pointer' : 'default' }
|
|
153
|
+
}
|
|
142
154
|
const eventHandle = (root: IDoneJson) => {
|
|
143
155
|
if (root.events?.length > 0) {
|
|
144
156
|
for (let e of root.events) {
|
|
@@ -263,6 +275,7 @@
|
|
|
263
275
|
:key="item.id"
|
|
264
276
|
:transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
|
|
265
277
|
v-show="item.display"
|
|
278
|
+
:style="getStyle(item)"
|
|
266
279
|
@click="eventHandle(item)"
|
|
267
280
|
>
|
|
268
281
|
<g :class="`${getCommonClass(item)}`">
|
package/src/router.ts
CHANGED
package/src/views/EditorS.vue
CHANGED
|
@@ -2,16 +2,20 @@
|
|
|
2
2
|
import SvgEditor from '@/components/svg-editor/index.vue'
|
|
3
3
|
import { useStore } from '@/stores/main'
|
|
4
4
|
import type { IDataModel } from '@/components/svg-editor/types'
|
|
5
|
+
import Preview from './Preview.vue'
|
|
5
6
|
|
|
6
|
-
const router = useRouter()
|
|
7
7
|
const store = useStore()
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
const previewShow = ref(false)
|
|
10
|
+
function previewHandle(d: IDataModel) {
|
|
10
11
|
store.data = d
|
|
11
|
-
|
|
12
|
+
nextTick(function () {
|
|
13
|
+
previewShow.value = true
|
|
14
|
+
})
|
|
12
15
|
}
|
|
13
16
|
</script>
|
|
14
17
|
|
|
15
18
|
<template>
|
|
16
|
-
<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="
|
|
19
|
+
<SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="previewHandle" saveFile />
|
|
20
|
+
<Preview v-if="previewShow" @back="previewShow = false" />
|
|
17
21
|
</template>
|
package/src/views/Preview.vue
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import SvgViewer from '@/components/svg-viewer/index.vue'
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import SvgViewer from '@/components/svg-viewer/index.vue'
|
|
3
|
+
import { ElButton } from 'element-plus'
|
|
4
|
+
import { ArrowLeftBold } from '@element-plus/icons-vue'
|
|
5
|
+
import { useStore } from '@/stores/main'
|
|
6
|
+
|
|
7
|
+
const emit = defineEmits(['back'])
|
|
8
|
+
const store = useStore()
|
|
9
|
+
|
|
10
|
+
function back() {
|
|
11
|
+
emit('back')
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<template>
|
|
16
|
+
<div class="previewPage">
|
|
17
|
+
<svg-viewer :data="store.data" />
|
|
18
|
+
<el-button @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
|
|
19
|
+
</div>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<style lang="less" scoped>
|
|
23
|
+
.previewPage {
|
|
24
|
+
position: fixed;
|
|
25
|
+
z-index: 1000;
|
|
26
|
+
left: 0;
|
|
27
|
+
right: 0;
|
|
28
|
+
top: 0;
|
|
29
|
+
bottom: 0;
|
|
30
|
+
|
|
31
|
+
.backBtn {
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: 20px;
|
|
34
|
+
right: 30px;
|
|
35
|
+
z-index: 100;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
</style>
|