v-low-code v1.0.1

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 构造函数方法列表

原作者

• levy

创建时间

• 2021-6-28