在node-red 中使用vue和plus

在node-red节点编辑框中嵌入vue框架与plus组件库

效果截图

参考步骤

1. 注册节点demo ： index.js   index.html 
2. 暴露资源 server.js
3. 引入资源 index.html 
4. 注册vue和plus   index.html  edit.js
5. 写你的编辑器    index.html edit.js edit.css
6. 导出组件  package.json

目录结构

主要代码

package.json

{
  "name": "node-red-demo",
  "version": "1.0.0",
  "description": "node-red vue and plus",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "码代码的小公举",
  "license": "ISC",
  "node-red": {
    "version": ">=1.0.0",
    "nodes": {
      "server": "server.js",
      "index": "index.js"
    }
  }
}

server.js

• 也可以直接用node暴露links文件夹

module.exports = function (RED) {
    "use strict";
    const fs = require('fs');
    const path = require('path');
    const app = RED.httpNode || RED.httpAdmin;
    app.get("/vue.js", function (_, res) {
        fs.readFile(path.join(__dirname, 'links/vue.js'), (_, js) => {
            res.send(js);
        });
    });
    app.get("/plus.css", function (_, res) {
        res.set('Content-Type', 'text/css');
        fs.readFile(path.join(__dirname, 'links/plus.css'), (_, js) => {
            res.send(js);
        });
    });
    app.get("/plus.js", function (_, res) {
        fs.readFile(path.join(__dirname, 'links/plus.js'), (_, js) => {
            res.send(js);
        });
    });
    app.get("/edit.css", function (_, res) {
        res.set('Content-Type', 'text/css');
        fs.readFile(path.join(__dirname, 'nodes/edit.css'), (_, js) => {
            res.send(js);
        });
    });
    app.get("/edit.js", function (_, res) {
        fs.readFile(path.join(__dirname, 'nodes/edit.js'), (_, js) => {
            res.send(js);
        });
    });
}

index.html

• 这里提供的是参考逻辑，也可以有其他办法，作为前端，能执行js能获取到dom，我相信可以有非常多的方案~

<!-- 引入vue框架-->
<script src="vue.js"></script>
<!-- 引入vue编辑页面代码-->
<script src="edit.js"></script>
<!-- 引入vue编辑页面样式-->
<link rel="stylesheet" href="edit.css" />
<!-- 引入element 的样式-->
<link rel="stylesheet" href="plus.css" />
<!-- 引入element 的组件库-->
<script src="plus.js"></script>
<!-- node-red注册 -->
<script type="text/javascript">
    var app, nodeData;
    function close(save) {
        app && app.unmount(save); // 卸载掉
    }
    RED.nodes.registerType('demo', {
        category: 'demo',
        defaults: {
            name: { value: "demo" },
            sex: { value: '' },
            age: { value: '' },
        },
        label: function () { return this.name },
        inputs: 1, // 上游：输入 0 或者 1
        outputs: 1, // 输出至下游 0 或者 more
        icon: 'font-awesome/fa-toggle-on', // 标签<i class="fa-sharp fa-solid fa-toggle-on"></i>
        oneditcancel: function () {
            close();
        },
        oneditdelete: function () {
            close();
        },
        oneditsave: function () {
            close();
            console.log(nodeData, 'oneditsave')
            this.age = nodeData.age;
            this.name = nodeData.name;
            this.sex = nodeData.sex;
        },
        oneditprepare: function () {
            nodeData = {
                age: this.age,
                name: this.name,
                sex: this.sex,
            };
            app = mount(nodeData, (data) => {
                nodeData = data;
            })
        },
    });
</script>
<!-- 配置窗口 -->
<script type="text/html" data-template-name="demo">
    <div id="demo-root">
        <div>
            demo for vue and plus
        </div>
        <el-input v-model="name" style="width: 100%; margin-top: 10px;"></el-input>
        <el-select v-model="sex" style="width: 100%; margin-top: 10px;">
            <el-option value="男">男</el-option>
            <el-option value="女">女</el-option>
        </el-select>
        <el-input v-model="age" type="number" style="width: 100%; margin-top: 10px;"></el-input>
    </div>
</script>
<!-- hover提示 -->
<script type="text/html" data-template-name="demo">
    <div class='form-row'>
        demo 提示
    </div>
</script>

index.js

• node-red组件的应用就不多写了

module.exports = function (RED) {
    function demo(config) {
        RED.nodes.createNode(this, config);
        const node = this;
        Object.keys(config).forEach(i => {
            node[i] = config[i];
        });
        node.on('input', (data) => {
            // 这里数据派发
        })
    }
    RED.nodes.registerType("demo", demo);
}

edit.js

• 注意需要app.use(组件库)
• 注意传递修改后的属性值（也有很多其他方式）

function mount(nodeData, saveData) {
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                name: nodeData.name,
                age: nodeData.age,
                sex: nodeData.sex,
            }
        },
        beforeUnmount() {
            saveData({
                name: this.name,
                age: this.age,
                sex: this.sex,
            })
            console.log('beforeUnmount')
        },
        mounted() {
            console.log('mounted');
        },
        methods: {

        },
    });
    app.use(ElementPlus);
    app.mount('#demo-root');
    return app;
}

edit.css

• 注意node-red样式覆盖， 也可以考虑直接挂载在body下

#demo-root {
    border: 1px solid rgb(0, 119, 255);
    border-radius: 4px;
    padding: 10px;
    width: 280px;
}

/* node-red对input有样式设置，这里清理一下 */
#demo-root input {
    border: 0;
    color: inherit;
    background: inherit; 
}