vue 构建根组件_Vue组件，用于拖放来设计和构建移动网站

vue 构建根组件

网页设计器 (vue-page-designer)

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

基于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>

选件 (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

道具	类型	描述
值	Object	编辑器的初始值，您可以传递保存回调的值并恢复草稿
小部件	Object	Vue组件。 用于编辑器的自定义组件。 参见示例
保存	(data) => void	当您单击“保存”按钮时，将反馈给您以保存数据
上载	(files) => Promise	编辑器上传功能，可让您实现自己的上传文件的请求

参数： value (Parameter: value)

The value came from save.

value来自save 。

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

参数： widgets (Parameter: widgets)

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

您可以在vue-page-designer-widgets安装默认小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>

参数： save (Parameter: save)

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

参数： upload (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>

翻译自: https://vuejsexamples.com/vue-component-for-drag-and-drop-to-design-and-build-mobile-website/

vue 构建根组件