1 Star 0 Fork 0

Seven1979 / vue-page-designer

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

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

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>

仓库评论 ( 0 )

你可以在登录后,发表评论

简介

暂无描述 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/seven1979/vue-page-designer.git
git@gitee.com:seven1979/vue-page-designer.git
seven1979
vue-page-designer
vue-page-designer
master

搜索帮助