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

Name	Description	Type	Accepted Values	Default
editor-type	Editor type	number	1 / 2	1
options	configuration options, see the following table	object	—	—
page-info	Configuration data created through the editor	object	—	—
page-id	Template ID obtained through the qmcoder backend	string	—	—

vue-page-editor Events

Name	Description	Parameters
save	triggers when the user clicks save	config
preview	triggers when the user clicks preview	config
back	triggers when the user clicks back	-

vue-page-editor Methods

Method	Description	Parameters
-	-	—

vue-page-editor Slots

Name	Description
-	-

options

Attribute	Description	Type	Accepted Values	Default
baseURL	Internal interface request address IP or Domain	string	ip / domain	http://localhost:3002/
tools	The editor toolbar includes save, preview, and back	string	—	back preview save
customStyle	Custom Style	object	—	—