Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4f7a966

Browse files
committed
feat: 支持html节点
1 parent 3a74cac commit 4f7a966

File tree

4 files changed

+68
-29
lines changed

4 files changed

+68
-29
lines changed

‎src/components/FlowChart.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,10 @@ export default {
5050
id: 'node_123_1',
5151
type: 'vue-html',
5252
x: 720,
53-
y: 700,
53+
y: 400,
54+
text: '2',
5455
properties: {
55-
t: 1
56+
t: 3
5657
}
5758
},
5859
{

‎src/components/node-red/nodes/BaseNode.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ class RedNodeModel extends RectNodeModel {
1616
this.iconPosition = ''; // icon位置,left表示左边,'right'表示右边
1717
this.defaultFill = '#a6bbcf';
1818
}
19+
getData () {
20+
const data = super.getData()
21+
data.properties.ui = 'node-red'
22+
return data
23+
}
1924
/**
2025
* 动态设置初始化数据
2126
*/

‎src/components/node-red/nodes/VueHtmlNode.js‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,42 @@ import VueNode from './VueNode.vue';
55
class VueHtmlNode extends HtmlNode {
66
constructor (props) {
77
super(props)
8-
// const appRef = ref(null)
8+
this.isMounted = false
9+
this.r = h(VueNode, {
10+
properties: props.model.getProperties(),
11+
text: props.model.inputData,
12+
onBtnClick: (i) => {
13+
this.r.component.props.text = String(Number(this.r.component.props.text) + Number(i))
14+
}
15+
})
16+
this.d = h('div', null, [
17+
this.r
18+
])
919
this.app = createApp({
10-
render: () => h(VueNode, {
11-
// ref: appRef,
12-
title: '312',
13-
properties: props.model.getProperties(),
14-
onBtnClick: (i) => {
15-
console.log(44, i)
16-
props.model.setProperties({
17-
t: i++
18-
})
19-
}
20-
})
20+
render: () => this.d
2121
})
2222
}
2323
setHtml(rootEl) {
24-
const node = document.createElement('div')
25-
// const { model, graphModel } = this.props;
26-
// const properties = model.getProperties();
27-
rootEl.appendChild(node)
28-
this.app.mount(node)
29-
console.log(34)
24+
if (!this.isMounted) {
25+
this.isMounted = true
26+
const node = document.createElement('div')
27+
rootEl.appendChild(node)
28+
this.app.mount(node)
29+
} else {
30+
this.r.component.props.properties = this.props.model.getProperties()
31+
}
32+
}
33+
getText () {
34+
return null
3035
}
3136
}
3237

3338
class VueHtmlNodeModel extends HtmlNodeModel {
3439
setAttributes() {
3540
this.width = 300;
36-
this.height = 32;
41+
this.height = 100;
3742
this.text.editable = false;
43+
this.inputData = this.text.value
3844
}
3945
getOutlineStyle() {
4046
const style = super.getOutlineStyle();
@@ -45,6 +51,11 @@ class VueHtmlNodeModel extends HtmlNodeModel {
4551
getDefaultAnchor() {
4652
return []
4753
}
54+
getData () {
55+
const data = super.getData()
56+
data.text.value = this.inputData
57+
return data
58+
}
4859
}
4960

5061
export default {
Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<template>
2-
<div class="demo-collapse">
3-
<el-button @click="$emit('btnClick', properties.t)">click_me_{{properties.t}}</el-button>
2+
<div class="demo-collapse" :style="properties.style">
3+
<div>当前值:{{text}}</div>
4+
<div class="demo-operator">
5+
<el-input @keydown.stop type="text" v-model="increaseFactor" />
6+
<el-button @mousedown.stop @click="$emit('btnClick', increaseFactor)">增加</el-button>
7+
</div>
48
</div>
59
</template>
610

@@ -10,22 +14,40 @@ export default {
1014
properties: {
1115
type: Object,
1216
default: () => ({
13-
t: 1
17+
t: 1,
18+
style: {}
1419
})
1520
},
16-
title: String,
21+
text: String,
22+
},
23+
data () {
24+
return {
25+
showTitle: '',
26+
increaseFactor: 0
27+
}
1728
},
1829
emits: ['btnClick'],
1930
mounted () {
2031
console.log(this)
2132
},
22-
methods: {
23-
update(properties) {
24-
console.log(444, properties)
33+
watch: {
34+
'properties.t': {
35+
handler (val) {
36+
this.increaseFactor = val
37+
},
38+
immediate: true
2539
}
2640
}
2741
}
2842
</script>
2943
<style scoped>
30-
44+
.demo-collapse {
45+
width: 300px;
46+
height: 100px;
47+
border: 1px solid #444;
48+
box-sizing: border-box;
49+
}
50+
.demo-operator {
51+
display: flex;
52+
}
3153
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /