vue-page-editor

vue-page-editor(低代码页面编辑器)

Vue3 Low-code page editor

Preview Website

预览地址

Installing

$ npm install vue-page-editor

Using yarn:

$ yarn add vue-page-editor

Using pnpm:

$ pnpm add vue-page-editor

Once the package is installed, you can import the library using import approach:

import VuePageEditor from 'vue-page-editor';

There are currently two modes for use

{
  EDITOR: 1,
  PREVIEW: 2 
}

Edit Mode

<template>
  <VuePageEditor
    :editorType="1"
    :options="options"
    @preview="handlePreview"
  />
</template>

<script setup>
import VuePageEditor from 'vue-page-editor';

const options = {
  // baseURL: 'http://xx.xxx.xx.xxx', // Internal interface request address IP or Domain
  tools: 'back preview save', // Available toolbar
  customStyle: {
    // Custom style
  }
};
const handlePreview = (config) => {
  // Configuration data
  console.log(config);
};
</script>

Preview mode

<template>
  <VuePageEditor
    :editor-type="2"
    :page-info="config"
  />
</template>

<script setup>
import { ref } from 'vue';
import VuePageEditor from 'vue-page-editor';

// Configuration data created through the editor
const config = ref({});

const options = {
  // baseURL: 'http://xx.xxx.xx.xxx', // Internal interface request address IP or Domain
  tools: 'back preview save', // Available toolbar
  customStyle: {
    // Custom style
  }
};
</script>

vue-page-editor Attributes

vue-page-editor Events

vue-page-editor Methods

vue-page-editor Slots

options