fireyy / vue-page-designer

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

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, in main.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:

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

<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
locale	String	Editor default locale. Now support 'cn' and 'en', default 'cn'.
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 widgets from './widgets'

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

Set locale to EN

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

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>
export default {
  methods: {
    upload (files) {
      return yourApiUpload(files).then(res => {
        return res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

vue-page-designer's Issues

Translation in english

It is difficult to understand the demo if you are not speaking chinese.
Translation to English would help

参考线

你好，请问参考线如何使用？

使用交流

地址：http://122.152.198.82:8000/pd/designer/index.html 。我在使用你的demo做个编辑器，希望能够得到帮助，一起完善这个小项目

如何生成页面最终的代码：html、css

如何生成页面最终的代码：html、css => 高复用性

有谁添加旋转功能了吗

有谁添加旋转功能了吗

能提供四个角可拖动的功能不

能提供四个角可拖动的功能不

store可以换成vuex组件？

您好，感谢您提供这么有参考价值的开源项目，请教一下，今天粗粗看了一下您的源码，我看您的代码中是使用了是自己写的plugins/store这个应该是仿vuex的状态管理工具。如果将其替换成vuex可以么？因为它占用了$store等，我担心会跟vuex冲突。谢谢拉。

前台，楼主是否需要做动态路径＋vue的组件来渲染C端用户界面

（1）在测试页面https://fireyy.github.io/vue-page-designer/
拿到的本地数据，JSON.parse(localStorage['vpd-data'])

（2）前台C端，楼主是否需要做动态路径＋vue的组件来渲染C端用户界面，技术选项，可以使用jq/vue 的技术栈

（3）作者 你的这个demo 有投产吗》？

在左右拖动图片的时候，下边框不跟着调整

在左右拖动图片的时候，下边框不跟着调整

那个动画怎么用啊，怎么预览，试了半天好像不起效果

Now you can export JSON data. Why there is no export button

uploader、toast 组件会报错

作者你好，install 了之后，按 start it quickly 的例子来用时，uploader、toast 组件会报错的，说没注册

如何绑定一张表，让其动态生成数据

need a full english conversion example

二次开发

请问一下，能否在此基础上做二次开发，用户商业应用

Locale

<template>
    <div>
        <h1>This is the best thing</h1>
        <vue-page-designer locale="en" />
    </div>
</template>

<script>
 export default {

  }
</script>

Still the designer shows Chinese.

I'm using vue-cli 3, vue 2.6.11, vue-page-designer 1.0.1, vue-page-designer-widgets 0.1.4

Vue 3 Support

is Vue 3 support coming in any time soon

Requires localization

Hello, I was interesting in using and building on this, however it appears almost all language content is in chinese, with support for english or other languages being more than limited.