vue-page-editor页面编辑器使用文档

NPM地址

一、安装

使用npm:

$ npm install vue-page-editor

使用yarn:

$ yarn add vue-page-editor

安装完成后, 使用import引入:

import VuePageEditor from 'vue-page-editor';

二、当前有两种模式可以使用。

1: 编辑器模式、2：预览模式

当前编辑与预览时耦合的, 后续将进行拆分,以区分编辑与预览。

{
  EDITOR: 1,
  PREVIEW: 2 
}

1.编辑模式

编辑模式案例

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

2.预览模式

预览模式案例

<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 参数

参数名称	描述	类型	可接受值	默认值
editor-type	编辑器类型。1为编辑器 2为预览	number	1 / 2	1
options	可配置参数，详情见下表options配置	object	—	—
page-info	通过编辑器创建的配置数据	object	—	—
page-id	通过Qm管理后台获取的页面id	string	—	—

vue-page-editor 事件

事件名	描述	参数
save	用户点击保存	config
preview	用户点击预览	config
back	用户点击返回	-

vue-page-editor 方法

方法名	描述	参数
-	-	—

vue-page-editor 插槽

插槽名	描述	-
-	-

options

参数名	描述	类型	可接受值	默认
baseURL	IP地址或者域名	string	ip / domain	http://localhost:3002/
tools	工具栏可选按钮包括保存、预览、返回等	string	—	back preview save
customStyle	自定义样式	object	—	—