ZhangShan_VueProject/src/components/pens.vue

<template>
  <div>
    <el-collapse accordion>
      <el-collapse-item v-for="(item, index) in tools" :key="index">
        <template slot="title">{{ item.group }}</template>
        <a
          v-for="(btn, i) in item.children"
          :key="i"
          :title="btn.name"
          :draggable="btn.data"
          @dragstart="onDrag($event, btn)"
        >
          <i :class="`iconfont ${btn.icon}`" style="color:#2196f3;"></i>
        </a>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped>
.el-collapse-item__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}
.el-collapse-item__content .iconfont {
  font-size: 30px;
  padding: 9px;
}
.el-collapse-item__header {
  padding-left: 5px;
}
.el-collapse-item__arrow {
  font-size: 20px;
}
</style>
<script>
import { CanvasTools, canvasRegister } from '../assets/js/canvas'
//import hackjson from '../assets/css/hack.json'

export default {
  data()
  {
    return {
      tools: CanvasTools,
      isToolCollapse: true,
      isCollapse: true,
      //hacktools: hackjson,
    };
  },
  methods: {
    onDrag(event, node)
    {
      console.log(event)
      event.dataTransfer.setData('Text', JSON.stringify(node.data))

    },
  },
  created()
  {
    // if (process.client && window['echartsData']) {
    //   for (let key in window['echartsData']) {
    //     document.body.removeChild(window['echartsData'][key]).div
    //   }
    //   window['echartsData'] = {}
    // }
    canvasRegister()
    // if (process.client) {
    //   document.onclick = event =>
    //   {
    //     this.contextmenu = {
    //       left: null,
    //       top: null,
    //       bottom: null
    //     }
    //   }
    // }
  },
  mounted()
  {
    //console.log(hackjson);

  }
};
</script>