@zhangqingcq/vgce 0.0.32 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +18 -6
- package/dist/style.css +1 -7
- package/dist/vgce.js +33862 -58808
- package/dist/vgce.umd.cjs +57 -1044
- package/package.json +1 -1
- package/src/assets/svgs/clock-a.svg +11 -11
- package/src/components/ace-edit.ts +15 -16
- package/src/components/svg-editor/index.vue +3 -1
- package/src/components/svg-viewer.vue +3 -0
- package/src/config/files/clock-a.vue +44 -21
- package/src/config/svg/custom/clock-a.ts +43 -2
- package/src/utils/index.ts +5 -0
package/README.md
CHANGED
|
@@ -4,11 +4,23 @@ Vector graphics configure editor. 矢量图组态编辑器。
|
|
|
4
4
|
|
|
5
5
|
## Guide
|
|
6
6
|
|
|
7
|
-
1.
|
|
7
|
+
1. install
|
|
8
|
+
```
|
|
9
|
+
npm i @zhangqingcq/vgce element-plus@^2.3.8 ace-builds@^1.14.0 lodash-es^4.17.21 vue-echarts@^6.5.1 animate.css@^4.1.1
|
|
10
|
+
```
|
|
11
|
+
or
|
|
12
|
+
```
|
|
13
|
+
pnpm add @zhangqingcq/vgce element-plus@^2.3.8 ace-builds@^1.14.0 lodash-es^4.17.21 vue-echarts@^6.5.1 animate.css@^4.1.1
|
|
14
|
+
```
|
|
8
15
|
|
|
9
|
-
2.
|
|
16
|
+
2. change main.ts or main.js
|
|
17
|
+
```
|
|
18
|
+
//main.js or main.ts
|
|
19
|
+
|
|
20
|
+
import '@zhangqingcq/vgce/dist/style.css'
|
|
21
|
+
```
|
|
10
22
|
|
|
11
|
-
3. editor
|
|
23
|
+
3. use editor
|
|
12
24
|
```
|
|
13
25
|
<script setup lang="ts">
|
|
14
26
|
import {SvgEditor} from '@zhangqingcq/vgce'
|
|
@@ -21,7 +33,7 @@ Vector graphics configure editor. 矢量图组态编辑器。
|
|
|
21
33
|
<SvgEditor @onPreview="preview"/>
|
|
22
34
|
</template>
|
|
23
35
|
```
|
|
24
|
-
4. viewer
|
|
36
|
+
4. use viewer
|
|
25
37
|
```
|
|
26
38
|
<script setup lang="ts">
|
|
27
39
|
import {SvgViewer} from '@zhangqingcq/vgce'
|
|
@@ -35,9 +47,9 @@ Vector graphics configure editor. 矢量图组态编辑器。
|
|
|
35
47
|
|
|
36
48
|
- put svg files into `src/asset/svgs` , then file name need to be same with config.name
|
|
37
49
|
|
|
38
|
-
- put custom
|
|
50
|
+
- put custom vue components file into `src/config/files`, then import in `src/config/index.ts` and export with `vueComp`
|
|
39
51
|
|
|
40
|
-
- PS: you have to install `vite-plugin-svg-icons` plugin to append your
|
|
52
|
+
- PS: you have to install `vite-plugin-svg-icons` plugin to append your svg to html dom.
|
|
41
53
|
```
|
|
42
54
|
<script setup lang="ts">
|
|
43
55
|
import {SvgEditor} from '@zhangqingcq/vgce'
|