nclego

A nice components layout tool

如何使用

<NCLego :value="nelegoData" />

一些特性

• 支持中景和前景的切换和编辑功能

• 支持瀑布布局，绝对布局

• 支持容器组件（所有瀑布布局下的组件都为容器组件，可在其上放置绝对定位的组件）和布局组件（可在定好的插槽中放置组件）

• 支持绝对定位组件鼠标拖动改变组件的大小和位置

• 支持组件的复制，剪切和粘贴功能，并提供快捷键

• 瀑布布局下的组件支持上下排序功能，并提供快捷键

• 支持页面级别的撤销和重做功能

• 支持页面的复制功能

• 支持预览功能

• 支持手机，平板，桌面三种模式的编辑

组件配置

props

• value

组件的值。不能提供 null 值，必须至少提供以下数据结构：

{
  config: {},
  pages: []
}

• clipboardMaxRecords

粘贴板保存最大的记录数。默认为10

• undoLimit

每个页面最大可撤销的次数

• fetchPreviewUrl

获取预览链接地址的方法

fetchPreviewUrl(value, mode)

• saveAsPageTemplate

保存为页面模板的方法

saveAsPageTemplate(pageInfo)

• queryComponents

搜索组件列表的方法

queryComponents(keyword)

该方法必须返回 Promise，且最终返回的数据格式是固定的，示例如下

queryComponents(keyword) {
  return Promise.resolve([
    {
      id: '', // 组件ID
      name: '', // 组件名称
      tagName: '', // 组件的标签名称（也是window.xxx的组件全局名称）
      thumnail: '', // 组件的缩略图
      jsUrl: '', // 组件的JS地址
      slots: ['', ], // 组件的插槽名称。如果有则为布局组件
      configSchema: {}, // 组件的属性表单配置   
      cateId: '', // 分类ID
      cateName: '' // 分类名称
    },
    ...
  ])
}

events

• save

保存事件，参数为整个活动数据

save(value)

数据结构

组件实例

{
  // 组件属性
  id: '', // 组件ID
  name: '', // 组件名称
  tagName: '', // 组件的标签名称（也是window.xxx的组件全局名称）
  thumnail: '', // 组件的缩略图
  jsUrl: '', // 组件的JS地址
  slots: ['', ], // 组件的插槽名称。如果有则为布局组件
  configSchema: {}, // 组件的属性表单配置

  // 实例属性
  instId: '', // 组件实例ID
  parentType: '1', // 父级类型: 瀑布 / 绝对定位 / 插槽
  config: {
    component: {},
    common: {
      name: '', // 实例名称
      size: { // 绝对定位组件有效
        width: 0, // 宽度
        height: 0, // 高度
      },
      position: { // 绝对定位组件有效
        left: 0, // x
        top: 0, // y
      },
      margin: { // 非绝对定位组件有效
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
      },
      background: { // 背景
        type: 'image', // image or color
        opacity: 1, // 透明度
        image: '', // 图片地址
        color: '' // 颜色 
      }
    },
    action: {},
    animation: {}
  }, // 组件实例的属性配置
  components: [], // 组件的子组件（组件作为容器组件，拥有绝对定位的子组件）
  slotsComponents: {}, // 组件的插槽子组件（对应于 slots 配置）
}

页面实例

{
  id: '', // 页面ID
  title: '', // 页面名称
  template: '', // 使用的页面模板
  background: { // 背景
    type: 'image', // image or color
    opacity: 1, // 透明度
    image: '', // 图片地址
    color: '' // 颜色 
  },
  middle: { // 中景
    components: [] // 参考 组件实例
  },
  front: { // 前景
    components: []
  }
}

活动实例

{
  id: '',
  config: {}, // 活动配置
  pages: [], // 参考 页面实例
}

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.