vue-page-designer-vue3
v1.0.3
Published
A vue component for drag-and-drop to design and build mobile website.
Downloads
12
Readme
vue-page-designer-vue3 and vue2
A drag-and-drop mobile website builder base on Vue.
Install yarn
yarn add vue-page-designer-vue3
Or Install npm
npm i vue-page-designer-vue3
You can start it quickly, in main.js:
import Vue from 'vue';
import vuePageDesigner from 'vue-page-designer-vue3'
import 'vue-page-designer-vue3/dist/vue-page-designer-vue3.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-vue3 />
</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 'ru' and 'cn' and 'en', default 'ru'. |
| 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-vue3 :value="value" />
</div>
</template>
Parameter: widgets
You can install default widget in vue-page-designer-widgets-vue3
yarn add vue-page-designer-widgets-vue3
or
npm i vue-page-designer-widgets-vue3
Import and use it
<template>
<div id="app">
<vue-page-designer-vue3 :widgets="widgets" />
</div>
</template>
<script>
import widgets from './widgets'
export default {
data () {
return {
widgets
}
}
}
</script>
Set locale to RU
<template>
<div id="app">
<vue-page-designer-vue3 locale="ru" />
</div>
</template>
Parameter: save
<template>
<div id="app">
<vue-page-designer-vue3 @save="(data) => { console.log('send the value data to your server', data) }" />
</div>
</template>
Parameter: upload
<template>
<div id="app">
<vue-page-designer-vue3 :upload="upload" />
</div>
</template>
<script>
export default {
methods: {
upload (files) {
return yourApiUpload(files).then(res => {
return res.data
}).catch(err => {
console.log(err)
})
}
}
}
</script>