@zhangqingcq/vgce 0.1.23 → 0.1.26
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
|