vue 低代码页面编辑面板插件

• 页面编辑器，可以自定义注册组件。然后通过拖拽移动，缩放，自由修改样式，数据，事件，以及其他数据，生成一个自定义的页面。
• 支持远程组件

安装依赖

// 第一步 安装依赖
npm install v-low-code

组件注册

• 新建一个组件注册的 js 文件（registrationFile.js）

/**
 * @description 插件
 */
import {
  // 编辑面板组件
  panelView,
  // 页面显示组件
  pageView,
  // 组件改造函数
  componentPro,
  // 组件绑定操控操作函数
  controlPanel,
} from 'v-low-code';
import 'v-low-code/index.css';

/**
 * @description 本地引入方式-demo组件
 */
import textVue from './component/textVue.vue';

/**
 * @description 页面组件
 */
export const flexiblePage = new componentPro(pageView, {
  // 组件列表
  components: [
    {
      name: 'textVue',
      component: textVue,
    },
  ],
});

/**
 * @description 面板组件
 */
export const flexiblePanel = new componentPro(panelView, {
  // 组件列表
  components: [
    {
      name: 'textVue',
      component: textVue,
    },
  ],
});

/**
 * @description 绑定操控方法
 */
export const controlAPI = new controlPanel(flexiblePanel.freeTransit, {
  // 错误操作
  errorCallback: function (err) {
    console.log(err);
  },
});

• 面板组件的引用

<template>
    <-- currentClass 当前操作元素组件的样式 -->
    <-- sameGroupClass 当前设置分组的组件 && 当前操作的组件的同组成员组件 -->
    <-- alignmentLineClass 对齐线样式 -->
    <-- zoomClass 缩放节点样式 -->
    <-- angleShowsView 旋转角度提示文本 -->
    <-- lockCoilBoxClass 锁定圈样式 -->
    <flexible-panel
      currentClass=""
      sameGroupClass=""
      alignmentLineClass=""
      zoomClass=""
      angleShowsView=""
      lockCoilBoxClass=""
    ></flexible-panel>
</template>

<script>
import { flexiblePanel } from "**/**/**/registrationFile.js";
export default {
  components: {
    flexiblePanel: flexiblePanel.component,
  },
};
</script>

• 页面组件的引用

<template>
    <-- pageStyle 页面的根节点样式 -->
    <-- componentList 页面的元素组件列表数据 -->
    <-- zoomValue 页面的缩放比例 -->
    <flexible-page
      pageStyle=""
      componentList=""
      zoomValue=""
    ></flexible-page>
</template>

<script>
import { flexiblePage } from "**/**/**/registrationFile.js";
export default {
  components: {
    flexiblePage: flexiblePage.component,
  },
};
</script>

• 自定义组件开发模板（../../textVue.vue 为例）

<template>
  <div
    :style="{
      padding: freeStyle.boxPadding,
    }"
  >
    <div
      :style="{
        marginBottom: freeStyle.spacing,
      }"
      @click="clickev"
    >
      {{ freeData.text }}
    </div>
  </div>
</template>

<script>
export default {
  freeConfig: {
    /**
     * 根标签布局初始值（后面可以根据页面交互操作修改）
     * 属性支持:
     *  width             宽度
     *  height            高度
     *  top               上边距
     *  left              下边距
     *  transform.rotate  旋转角度
     */
    rootNodeStyle: {
      top: '0px',
      left: '0px',
      width: '120px',
      height: '70px',
      transform: {rotate:0},
    },
    /**
     * 自由样式
     * 属性:  自定义key
     */
    freeStyle: {
      boxPadding: '20px',
      spacing: '5px',
    },
    /**
     * 自由数据
     * 属性:  自定义key
     */
    freeData: {
      text: 'hello world!',
    },
    /**
     * 自由绑定函数
     * 属性:  自定义函数名
     */
    freeBindMethods: {
      clickev(a) {
        console.log(a);
      },
    },
  },
};
</script>

<style></style>

controlAPI 构造函数方法列表

| 基础方法 | 参数 | 方法名字 | | ---------------------------- | ------------------------- | -------------------- | | controlAPI.useThis | idid/组件 id，或者面板 id | 获取组件实例对象 | | controlAPI.setCurrentControl | id/组件 id，或者面板 id | 设置当前操作的组件 | | controlAPI.rollBack | 无 | 返回上一步操作 | | controlAPI.nextStep | 无 | 前进下一步操作 | | controlAPI.echoComponent | 页面保存的 json 数据 | 回显页面数据 | | controlAPI.savePhaseData | 无 | 保存数据 | | controlAPI.resetFreePanel | 无 | 重置面板数据 | | controlAPI.setZoomValue | number/缩放值 | 设置当前面板缩放级别 |

| 操作方法 | 参数 | 方法名字 | | ---------------------------- | ------------------------------------------------------ | ------------ | | controlAPI.addCloudComponent | url/远程组件的地址，name/组件名字，data/初始数据非必填 | 添加远程组件 | | controlAPI.addComponent | name/组件名字，data/初始数据非必填 | 添加指定组件 | | controlAPI.copyComponent | id/组件 id 非必填，不填复制当操作 | 复制指定组件 | | controlAPI.removeComponent | id/组件 id 非必填，不填删除当操作 | 删除组件 | | controlAPI.editorFuncEvent | {id:组件 id, funcName:函数名, code:函数的字符串} | 编辑函数功能 | | controlAPI.removeFuncEvent | {id:组件 id, funcName:函数名 } | 删除函数功能 | | controlAPI.disableFuncEvent | {id:组件 id, funcName:函数名, disable:禁用状态} | 禁用事件方法 | | controlAPI.setStyle | key/修改的字段，value/修改值 | 修改样式 | | controlAPI.setData | key/修改的字段，value/修改值 | 修改数据 | | controlAPI.setConfig | key/修改的字段，value/修改值 | 修改配置 | | controlAPI.setRootNodeStyle | key/修改的字段，value/修改值 | 修改排版样式 | | controlAPI.setHidden | bool/布尔值，id/组件 id（不传默认选中） | 设置组件隐藏 |

| 监听事件 | 参数 | 方法名字 | | --------------------------------------- | ----------------- | ------------------------ | | controlAPI.listeningCurrentSwitch | callback/回调函数 | 监听当前操作组件切换变化 | | controlAPI.listeningCurrentChange | callback/回调函数 | 监听当前操作记录 | | controlAPI.listeningComponentListChange | callback/回调函数 | 监听组件列表变化 | | controlAPI.listeningEventChange | callback/回调函数 | 监听事件函数的变化 | | controlAPI.listeningZoomChange | callback/回调函数 | 监听面板缩放 |

| 容器扩展 | 参数 | 方法名字 | | ----------------------- | ---- | -------------- | | controlAPI.coilBox | 无 | 面板容器锁定框 | | controlAPI.closeCoilBox | 无 | 移除锁定框 |

原作者

• levy

创建时间

• 2021-6-28