@zhangqingcq/vgce 0.1.23 → 0.1.26
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 +9 -1
- package/dist/style.css +1 -1
- package/dist/vgce.js +1084 -1041
- package/dist/vgce.umd.cjs +19 -19
- package/package.json +1 -1
- package/src/components/svg-editor/index.vue +24 -2
- package/src/components/svg-editor/right-panel.vue +9 -4
- package/src/components/svg-viewer.vue +21 -4
- package/src/stores/config/index.ts +10 -1
- package/src/stores/config/types.ts +7 -0
- package/src/utils/mqtt-net.ts +1 -1
- package/src/views/EditorS.vue +22 -21
package/README.md
CHANGED
|
@@ -149,7 +149,14 @@ or
|
|
|
149
149
|
```
|
|
150
150
|
### 8.mqtt 通信
|
|
151
151
|
|
|
152
|
-
-
|
|
152
|
+
- mqtt通信配置有两种方案：
|
|
153
|
+
> 方案1.通过编辑器（editor）的`mqtt`属性传递配置，如：
|
|
154
|
+
```
|
|
155
|
+
<SvgEditor :mqtt="{cover:true,url:'xxx',user:'xxx',pwd:'xxx',topics:'xxx'}">
|
|
156
|
+
// cover：是否使用这里的配置覆盖通信面板设置（也就是后面将介绍的第二种方案）的配置，为ture则覆盖，一般这里进行配置了，通信面板就无需再配置，
|
|
157
|
+
所以这里一般都要传true。当然，如果你只想将这里的配置作为备选方案，如果使用者在编辑器通信面板进行了配置，则使用通信面板的配置，这里传false。
|
|
158
|
+
```
|
|
159
|
+
> 方案2.在编辑器右侧‘通信’菜单下配置好mqtt通信需要的url、username、password、topics,注意：关闭通信面板‘外部配置’选项方可进行独立配置且使配置生效。
|
|
153
160
|
- 在使用查看器的地方监听查看器emit的`onMessage`事件，并处理事件返回的数据`{ topics, message }`
|
|
154
161
|
- message可以用JSON.parse解析成对象（后端推给前端的MQTT消息内容需要是JSON格式）
|
|
155
162
|
- 拿到消息后可以配合setNodeAttrByID方法更新界面
|
|
@@ -187,3 +194,4 @@ or
|
|
|
187
194
|
- 如果有少量使用其组件，也可以使用按需引入或手动引入
|
|
188
195
|
- 如果项目使用了其他UI框架，编辑器的element-plus组件样式可能会被其他框架污染，但由于编辑器使用的组件不多，且不会出现大面积污染，可自行写样式解决编辑器样式被污染的问题
|
|
189
196
|
- 如果项目使用了其他UI框架，由于编辑器的使用不需要完全引入element-plus，所以不用担心element-plus污染项目中其他UI框架组件
|
|
197
|
+
|