Vue版本的拖拽和右键菜单的开发小记

参考插件：在npm上查找vue-draggable和v-contextmenu即可

<template>
  <div>
    <draggable v-model="myArray">
      <div v-for="element in myArray" :key="element.id" class="dragger-item" v-contextmenu:contextmenu>
          {{element.name}}
      </div>
    </draggable>
    <!-- 通过refs进行组件关联 -->
    <v-contextmenu ref="contextmenu">
      <v-contextmenu-item>菜单1</v-contextmenu-item>
      <v-contextmenu-item>菜单2</v-contextmenu-item>
      <v-contextmenu-item>菜单3</v-contextmenu-item>
    </v-contextmenu>
  </div>
</template>

<script>
// 两个组件都有一些定制化的配置项，可以在文档上看到，这是最简单的一种
import Vue from 'vue'
import draggable from 'vuedraggable'
import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
  export default {
    // init data
    data () {
      return {
        myArray: [{
          name: 'cs1',
          id: 'cs1'
        }, {
          name: 'cs2',
          id: 'cs2'
        }, {
          name: 'cs3',
          id: 'cs3'
        }]
      }
    },
    // 注册组件
    components: {
      draggable,
      contentmenu
    }
  }
</script>

<style scoped>
.dragger-item {
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
</style>

效果图如下：

图示.png