Question

我正在Vue js中构建树组件，现在在实现Tree组件的拖放方面遇到困难。问题是我不知道从哪里开始，我在GitHub上浏览了一下代码，但我不明白它的真正作用

我有这段代码，直到知道：

树组件：

<template>
  <div class="tree">
      <div @click.prevent="selectItem">
        {{ item.label }}
        <span class="icon" @click.stop="toggleNode">{{ expanded && isFolder ? '-' : '+' }}</span>
      </div>
      <ul v-show="expanded" v-if="isFolder">
        <cmp-tree class="item" :key="index" v-for="(child, index) in item.children"
                  :current-item="currentItem"
                  :item="child"> </cmp-tree>
      </ul>
  </div>
</template>
<script lang="ts">
  import Vue, { PropType } from 'vue';

  export default Vue.extend({
    name: 'CmpTree', // vue component name
    props: {
      item: Object as PropType<any>,
      depth: { default: () => 0, type: Number },
      currentItem: Number,
      value: { default: () => null, type: Array }
    },
    data() {
      return {
          expanded: false as boolean,
          showContext: false as boolean,
      };
    },
    methods: {
      toggleNode(): void {
          this.expanded = !this.expanded;
      },
      selectItem() {
          console.log(this.item);
      },
    },
    computed: {
      isFolder(): void {
        return this.item.children && this.item.children.length
      },
    },
  });
</script>

用于显示树的主要组件：

<template>
  <div id="app">
    <CmpTree v-for="(item, index) in items"
             class="item"
             :current-item="currentItem"
             :item="item"
             :key="index"
             contextmenu>
    </CmpTree>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import CmpTree from '@/components/CmpTree.vue';

export default Vue.extend({
  name: 'ServeDev',
  components: {
    CmpTree
  },
  data(): any {
    return {
      items: [
        {
          label: 'item1',
          children: [
            {
              label: 'item1.1'
            },
            {
              label: 'item1.2',
              children: [
                {
                  label: 'item1.2.1'
                },
                {
                  label: 'item1.2.2'
                }
              ]
            }
          ]
        },
        {
          label: 'item2'
        }
      ],
      selectedItems: [],
      currentItem: null,
    }
  }
});
</script>

有人可以建议我从哪里开始写一些文章或简单的文章？

Answer 1

您可以使用名为Vue-draggable的库，这是他们的嵌套可拖动示例，与您需要的类似。

https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/nested/nested-test.vue

希望，这可能会有所帮助。

具有可拖动节点的Vue树视图

1 个答案: