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