# vue-page-editor(低代码页面编辑器)
Vue3 Low-code page editor

[Preview Website](http://www.hdxiong.cn/#/template)

[预览地址](http://www.hdxiong.cn/#/template)

## Installing

```bash
$ npm install vue-page-editor
```

Using yarn:

```bash
$ yarn add vue-page-editor
```

Using pnpm:

```bash
$ pnpm add vue-page-editor
```

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

```js
import VuePageEditor from 'vue-page-editor';
```

## There are currently two modes for use

```text
{
  EDITOR: 1,
  PREVIEW: 2 
}
```

## Edit Mode

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

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