Vue-dnd-hoc NPM

vue-dnd-hoc

A drag-and-drop editor for higher order components.

Demo 🚀

vue-dnd-hoc.netlify.app

Install

yarn add vue-dnd-hoc

You can start it quickly, in main.js:

import Vue from 'vue';
import vueDndHoc from 'vue-dnd-hoc'
import 'vue-dnd-hoc/dist/vue-dnd-hoc.css'
import App from './App.vue';

Vue.use(vueDndHoc);

new Vue({
  el: '#app',
  render: h => h(App)
});

Next, use it:

<template>
  <div id="app">
    <vue-dnd-hoc />
  </div>
</template>

<style>
#app {
  height: 100%;
}
</style>

Options

You can add custom components, save callback.

Props	Type	Description
value	`Object`	Editor initial value, you can pass the value of the save callback and resume the draft
widgets	`Object`	Vue Components. Custom components for editor. see Example
save	`(data) => void`	When you click the Save button, feed back to you to save the data
upload	`(files) => Promise`	Editor upload function, allowing you to implement your own upload-file's request

Parameter: `value`

The value came from save.

<template>
  <div id="app">
    <vue-dnd-hoc :value="value" />
  </div>
</template>

Parameter: `widgets`

You can bring your own set of widgets

<template>
  <div id="app">
    <vue-dnd-hoc :widgets="widgets" />
  </div>
</template>
<script>
import widgets from './widgets'

export default {
  data () {
    return {
      widgets
    }
  }
}
</script>

Parameter: `save`

<template>
  <div id="app">
    <vue-dnd-hoc @save="(data) => { console.log('send the value data to your server', data) }" />
  </div>
</template>

Parameter: `upload`

<template>
  <div id="app">
    <vue-dnd-hoc :upload="upload" />
  </div>
</template>
<script>
export default {
  methods: {
    upload (files) {
      return yourApiUpload(files).then(res => {
        return res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>