Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/fireyy/vue-page-designer

Vue component for drag-and-drop to design and build mobile website.
https://github.com/fireyy/vue-page-designer

builder designer page vue widget

Last synced: about 1 month ago
JSON representation

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

Lists

README 

        
# vue-page-designer





  

    

    


    Live Demo

  




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



## Install



```bash

yarn add vue-page-designer

```



You can start it quickly, in main.js:



```js

import Vue from 'vue';

import vuePageDesigner from 'vue-page-designer'

import 'vue-page-designer/dist/vue-page-designer.css'

import App from './App.vue';



Vue.use(vuePageDesigner);



new Vue({

  el: '#app',

  render: h => h(App)

});

```



Next, use it:



```html



  


    

  



#app {

  height: 100%;

}



```



A [example](https://fireyy.github.io/vue-page-designer/) ▶️, and [source](./example/). Also a [custom widget source](./example/widgets)



# 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 |

| locale | `String` | Editor default locale. Now support 'cn' and 'en', default 'cn'. |

| widgets | `Object` | Vue Components. Custom components for editor. see [Example](https://github.com/fireyy/vue-page-designer-widgets/blob/master/src/index.js) |

| 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`.



```html



  


    

  



```



## Parameter: `widgets`



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



```bash

yarn add vue-page-designer-widgets

```



Import and use it



```html



  


    

  



import widgets from './widgets'



export default {

  data () {

    return {

      widgets

    }

  }

}



```



Set locale to EN



```html



  


    

  



```



## Parameter: `save`



```html



  


     { console.log('send the value data to your server', data) }" />

  



```



## Parameter: `upload`



```html



  


    

  



export default {

  methods: {

    upload (files) {

      return yourApiUpload(files).then(res => {

        return res.data

      }).catch(err => {

        console.log(err)

      })

    }

  }

}



```