Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ea6238aa 1 parent b35334cc

新增节点位置调整

Inline Side-by-side
Showing 4 changed files with 14 additions and 14 deletions
...@@ -41,21 +41,21 @@ ...@@ -41,21 +41,21 @@
41 </template> 41 </template>
42 </vue-flow-edit-menu> 42 </vue-flow-edit-menu>
43 </vue-flow-edit-menu-group> --> 43 </vue-flow-edit-menu-group> -->
44 - <vue-flow-edit-menu-group label="操作节点" value> 44 + <vue-flow-edit-menu
45 - <!-- 注意 key 值的绑定 -->
46 - <vue-flow-edit-menu
47 v-for="(value, key) in state.controlList" 45 v-for="(value, key) in state.controlList"
48 :key="key" 46 :key="key"
49 :model="{ control: key, text: value.text, desc: value.desc }" 47 :model="{ control: key, text: value.text, desc: value.desc }"
50 > 48 >
51 <template v-slot:content> 49 <template v-slot:content>
52 - <div class="activity-menu"> 50 + <div v-if="key === 'flow'" style="border-left: 1px solid #e6e6e6; width: 2px; height: 35px; position: absolute; top: 10px;"></div>
53 - <img :src="value.img" /> 51 + <el-tooltip content="拖拽新增节点">
54 - <span>{{ value.text }}</span> 52 + <div :class="['vue-flow-editor-toolbar-item']">
55 - </div> 53 + <img style="width: 15px; height: 15px; margin-bottom: 0; margin-top: 3px;" :src="value.img" />
54 + <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">{{ value.text }}</span>
55 + </div>
56 + </el-tooltip>
56 </template> 57 </template>
57 </vue-flow-edit-menu> 58 </vue-flow-edit-menu>
58 - </vue-flow-edit-menu-group>
59 <!-- <vue-flow-edit-menu-group 59 <!-- <vue-flow-edit-menu-group
60 v-for="(group, groupIndex) in state.menuData" 60 v-for="(group, groupIndex) in state.menuData"
61 :label="group.label" 61 :label="group.label"
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <slot name="content" :model="model"> 3 <slot name="content" :model="model">
4 <span>{{model.label}}</span> 4 <span>{{model.label}}</span>
5 </slot> 5 </slot>
6 - <i class="el-icon-rank" v-if="!hideArrow"></i> 6 + <!-- <i class="el-icon-rank" v-if="!hideArrow"></i> -->
7 </div> 7 </div>
8 </template> 8 </template>
9 9
......
...@@ -147,7 +147,6 @@ export default { ...@@ -147,7 +147,6 @@ export default {
147 147
148 return () => ( 148 return () => (
149 <div class="vue-flow-editor-toolbar" style={styles.value}> 149 <div class="vue-flow-editor-toolbar" style={styles.value}>
150 -
151 {targetToolbarButtons.value.map(item => ( 150 {targetToolbarButtons.value.map(item => (
152 <el-tooltip content={item.tip} key={item.key}> 151 <el-tooltip content={item.tip} key={item.key}>
153 <div class={[ 152 <div class={[
...@@ -155,7 +154,7 @@ export default { ...@@ -155,7 +154,7 @@ export default {
155 { 154 {
156 'vue-flow-editor-toolbar-item-disabled': !!item.isEnable && !item.isEnable() 155 'vue-flow-editor-toolbar-item-disabled': !!item.isEnable && !item.isEnable()
157 }]} 156 }]}
158 - onClick={() => ((!item.isEnable || item.isEnable()) && item.handler())}> 157 + onClick={() => ((!item.isEnable || item.isEnable()) && item.handler())}>
159 <img src={TOOLBAR_IMAGE[item.icon]}/> 158 <img src={TOOLBAR_IMAGE[item.icon]}/>
160 <span>{item.label || item.tip}</span> 159 <span>{item.label || item.tip}</span>
161 </div> 160 </div>
...@@ -165,4 +164,4 @@ export default { ...@@ -165,4 +164,4 @@ export default {
165 </div> 164 </div>
166 ) 165 )
167 }, 166 },
168 -}
...\ No newline at end of file ...\ No newline at end of file
167 +}
......
...@@ -136,14 +136,15 @@ export default { ...@@ -136,14 +136,15 @@ export default {
136 136
137 return () => ( 137 return () => (
138 <div class="vue-flow-editor" style={styles.value.root} v-loading={props.loading}> 138 <div class="vue-flow-editor" style={styles.value.root} v-loading={props.loading}>
139 - <div class="vue-flow-editor-left" style={styles.value.left}> 139 + {/* <div class="vue-flow-editor-left" style={styles.value.left}>
140 <vue-flow-editor-menu> 140 <vue-flow-editor-menu>
141 {!!context.slots.menu && context.slots.menu()} 141 {!!context.slots.menu && context.slots.menu()}
142 </vue-flow-editor-menu> 142 </vue-flow-editor-menu>
143 - </div> 143 + </div> */}
144 <div class="vue-flow-editor-right"> 144 <div class="vue-flow-editor-right">
145 <vue-flow-editor-toolbar style={styles.value.toolbar} canvasProps={canvasProps} toolbarButtonHandler={props.toolbarButtonHandler}> 145 <vue-flow-editor-toolbar style={styles.value.toolbar} canvasProps={canvasProps} toolbarButtonHandler={props.toolbarButtonHandler}>
146 {!!context.slots.toolbar && context.slots.toolbar()} 146 {!!context.slots.toolbar && context.slots.toolbar()}
147 + {!!context.slots.menu && context.slots.menu()}
147 </vue-flow-editor-toolbar> 148 </vue-flow-editor-toolbar>
148 <vue-flow-editor-canvas data={canvasProps.data} grid={canvasProps.grid} miniMap={canvasProps.miniMap} key={String(editorState.canvasKey) + String(props.multipleSelect) + String(props.disabledDragEdge)}/> 149 <vue-flow-editor-canvas data={canvasProps.data} grid={canvasProps.grid} miniMap={canvasProps.miniMap} key={String(editorState.canvasKey) + String(props.multipleSelect) + String(props.disabledDragEdge)}/>
149 </div> 150 </div>
......