@zhangqingcq/vgce 0.1.14 → 0.1.16
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +13 -3
- package/dist/style.css +1 -1
- package/dist/vgce.js +3545 -3491
- package/dist/vgce.umd.cjs +20 -20
- package/package.json +1 -1
- package/src/assets/base.less +32 -0
- package/src/components/svg-editor/center-panel.vue +17 -14
- package/src/components/svg-editor/right-panel.vue +2 -1
- package/src/components/svg-viewer.vue +74 -27
- package/src/components/vue3-ruler-tool.vue +9 -5
- package/src/config/types.ts +1 -0
- package/src/utils/index.ts +32 -14
- package/src/views/Preview.vue +1 -1
- package/types/index.d.ts +6 -2
package/README.md
CHANGED
|
@@ -141,11 +141,11 @@ or
|
|
|
141
141
|
```
|
|
142
142
|
// viewer
|
|
143
143
|
|
|
144
|
-
<
|
|
144
|
+
<SvgViewer :data="xxx">
|
|
145
145
|
<template #background>
|
|
146
146
|
<div style="height: 100%; width: 100%; background-color: red"></div>
|
|
147
147
|
</template>
|
|
148
|
-
</
|
|
148
|
+
</SvgViewer>
|
|
149
149
|
```
|
|
150
150
|
### 8.mqtt 通信
|
|
151
151
|
|
|
@@ -162,7 +162,17 @@ or
|
|
|
162
162
|
找到组件的id（可以用vue的computed计算一份deviceCode和id的映射关系存到一个对象里，这样在需要id时可直接在计算出的对象凭借deviceCode
|
|
163
163
|
直接取到），即可用setNodeAttrByID改变组件属性
|
|
164
164
|
|
|
165
|
-
### 9.
|
|
165
|
+
### 9.event 事件处理
|
|
166
|
+
- 编辑器内组件支持事件处理，首先在选中组件时，右侧“事件”菜单下，可以添加事件（1个或多个）
|
|
167
|
+
- 添加事件后可以选择事件类型、行为、条件（条件非必填）
|
|
168
|
+
- 事件类型即触发类型，现有“点击”和“值改变”，点击即组件被点击触发，值改变即组件向外部emit `on-change`事件（一般为自定义vue组件才具备这个能力）时触发
|
|
169
|
+
- 事件行为即事件出发后要执行的动作，现有“改变属性”、“执行 JavaScript”、“emit 事件”
|
|
170
|
+
- 改变属性即改变自身和其他组件（其他组件需指定id）属性，需要指定要改变的key和想设定的value，一次可改多个属性
|
|
171
|
+
- 执行 JavaScript即运行输入的js代码
|
|
172
|
+
- emit 事件即viewer向外emit `on-event`事件，并传递{event,target}数据，event即当前事件的详细数据，target即当前组件的详细数据
|
|
173
|
+
- 条件即事件触发的额外条件，现有“关系运算”，即组件自身属性在满足给出的选定情况下，可以触发事件
|
|
174
|
+
|
|
175
|
+
### 10. example 查看示例
|
|
166
176
|
|
|
167
177
|
- download [VGCE](https://github.com/RickyHeaven/VGCE.git) （下载项目）
|
|
168
178
|
|