airoptweb/src/views/vueflow/Sidebar.vue

<script setup>
import useDragAndDrop from './useDnD'
import f41 from '@/assets/img/f41.png'
import f11 from '@/assets/img/f11.png'
import f32 from '@/assets/img/f32.png'
import f33 from '@/assets/img/f33.png'
import f12 from '@/assets/img/f12.png'
import f21 from '@/assets/img/f21.png'
import f22 from '@/assets/img/f22.png'
const { onDragStart,onDragLeave,} = useDragAndDrop()

</script>

<template>
  <aside>
<!-- 
    <div class="nodes">
      <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">Input Node</div>

      <div class="vue-flow__node-default" :draggable="true" @dragstart="onDragStart($event, 'default')">Default Node</div>

      <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">Output Node</div>
   
      <div class="vue-flow__node-output" :draggable="false" >
        <el-image :src="f41" fit="cover" />
      </div>
    </div> -->
    <div  class="nodes moban">
    <button class="stop-btn" title="stop" @click="stop" :draggable="true"   @dragstart="onDragStart($event, 'default','1')">
      <el-image :src="f11" fit="cover" />
         <span class="spinner">开始</span>
    </button>
    <button class="stop-btn" title="stop" @click="stop" :draggable="true"   @dragstart="onDragStart($event, 'default','2')">
      <el-image :src="f12" fit="cover" />
         <span class="spinner">结束</span>
    </button>
    <button class="stop-btn" title="stop" @click="stop" :draggable="true"   @dragstart="onDragStart($event, 'default','3')">
      <el-image :src="f32" fit="cover" />
         <span class="spinner">优化器</span>
    </button>
    <!-- <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">Input Node3333</div> -->
  </div>
<div class="moban">
  <button class="stop-btn" title="stop" @click="stop" :draggable="true"   @dragstart="onDragStart($event, 'default','4')">
      <el-image :src="f41" fit="cover" />
         <span class="spinner">模版</span>
    </button>
</div>
  </aside>
</template>
<style scoped>
.moban button{
  margin: 10px;
}
.moban .el-image{
  width: 40px;}
  .moban span{
    display: block;
  }
</style>