/vue-page-designer

Vue component for drag-and-drop to design and build mobile website.

Primary LanguageVue

vue-page-designer


Live Demo

A drag-and-drop mobile website builder base on Vue.

Install

yarn add vue-page-designer

You can start it quickly:

<template>
  <div id="app">
    <vue-page-designer />
  </div>
</template>

<script>
import vuePageDesigner from 'vue-page-designer'

export default {
  components: {
    vuePageDesigner
  }
}
</script>

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

A example ▶️, and source. Also a custom widget source

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-page-designer :value="value" />
  </div>
</template>

Parameter: widgets

You can install default widget in vue-page-designer-widgets

yarn add vue-page-designer-widgets

Import and use it

<template>
  <div id="app">
    <vue-page-designer :widgets="widgets" />
  </div>
</template>
<script>
import vuePageDesigner from 'vue-page-designer'
import widgets from './widgets'

export default {
  data () {
    return {
      widgets
    }
  },

  components: {
    vuePageDesigner
  }
}
</script>

Parameter: save

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

Parameter: upload

<template>
  <div id="app">
    <vue-page-designer :upload="upload" />
  </div>
</template>
<script>
import vuePageDesigner from 'vue-page-designer'

export default {
  methods: {
    upload (files) {
      return yourApiUpload(files).then(res => {
        return res.data
      }).catch(err => {
        console.log(err)
      })
    }
  },
  components: {
    vuePageDesigner
  }
}
</script>