@zhangqingcq/vgce 0.1.13 → 0.1.15
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/README.md +17 -5
- 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/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
|
|
|
@@ -173,5 +183,7 @@ or
|
|
|
173
183
|
### 注意：
|
|
174
184
|
|
|
175
185
|
- 本库ui框架使用的是`element-plus`，所以你需要在你的项目安装 element-plus 依赖，依赖版本按上面给出的版本
|
|
176
|
-
- 在你没有其他地方使用element-plus
|
|
177
|
-
-
|
|
186
|
+
- 在你没有其他地方使用element-plus组件的情况下，可以不用完整引入element-plus
|
|
187
|
+
- 如果有少量使用其组件，也可以使用按需引入或手动引入
|
|
188
|
+
- 如果项目使用了其他UI框架，编辑器的element-plus组件样式可能会被其他框架污染，但由于编辑器使用的组件不多，且不会出现大面积污染，可自行写样式解决编辑器样式被污染的问题
|
|
189
|
+
- 如果项目使用了其他UI框架，由于编辑器的使用不需要完全引入element-plus，所以不用担心element-plus污染项目中其他UI框架组件
|