vue-page-free-build v1.1.8

vue 随心所欲搭建自由页面

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

原作者

• levy

创建时间

• 2021-1-7

demo图片

• demo项目地址：www.mml-kj.com/free/

  

  

第一步 安装依赖

// 第一步 安装依赖
npm install vue-page-free-build

第二步 组件注册

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

/**
 * @description 插件
 */
import free from "vue-page-free-build";

/**
 * @description 需要注册的组件
 */
import textVue from "./component/textVue.vue";
import imageVue from "./component/imageVue.vue";

export const freePanel = new free.createFreePanel({
  components:[{
    name:"textVue",
    component:textVue
  },{
    name:"imageVue",
    component:imageVue
  }]
});

/**
 * 获取操控
 */
export const controlPanel = new free.controlFreePanel(freePanel.freeTransit);

freePanel构造组件

freePanel.component

controlPanel构造函数方法列表

第三步 在vue中引用控办组件

<template>
  <div >
    <!-- :controlPanel="controlPanel" 必要操作，把控制器传给面板 -->
    <!-- currentStyle  修改当前点击选中组件的高亮样式-->
    <!-- sameGroupStyle  修改当前点击选中组件的同组合组件高亮样式-->
    <!-- haveBeenGrouped  修改选中同组合组件时不可选中的组件样式-->
    <!-- alignmentLineStyle 组件对齐线样式 -->
    <freePanel 
      :controlPanel="controlPanel">
      currentStyle=""
      sameGroupStyle=""
      haveBeenGrouped=""
      alignmentLineStyle=""
    </freePanel>
  </div>
</template>

<script>
import { freePanel, controlPanel } from "**/**/**/registrationFile.js";
export default {
  components: {
    freePanel: freePanel.component,
    // ......
  },
  data() {
    return {
      controlPanel:controlPanel,
      // ......
    };
  },
  // ......

};
</script>

组件开发规范（../../textVue.vue 为例）

<template>
  <div :style="freeStyle">{{freeData.text}}</div>
</template>

<script>
export default {
  props: {
    // 注册需要修改的样式(将会通过props接收修改值)
    freeStyle: {
      type: Object,
      default: () => {
        return {
          width: '100px',
          height: 'auto',
          fontSize: '14px',
          color: 'red',
        };
      },
    },
    // 注册需要修改的数据(将会通过props接收修改值)
    freeData: {
      type: Object,
      default: () => {
        return {
          text:"文本内容"
        };
      },
    },
    // 注册需要修改的更多配置数据(将会通过props接收修改值)
    freeConfig: {
      type: Object,
      default: () => {
        return {
          animation:""
        };
      },
    },

    // ......
  },

  // ......
};
</script>

<style lang="scss" scope>
</style>

更新时间

• 2021-1-16 （levy）