该组件内部组件依赖于lxing-ui组件库，所以使用该组件务必引入lxing-ui

npm i lxing-ui

import lxingUI form 'lxing-ui'

Vue.use(lxingUI)

Getting Started

lxing-ui Document

isp-platform 安装

npm i @lxing-ui/isp-platform

效果图

使用

import Ispplatform from '@lxing-ui/isp-platform'

// 1、全局引用
Vue.use(Ispplatform)
    
// 组件使用
<template>
    <div>
      <lx-isp-plateform></lx-isp-plateform>
    </div>
</template>

    
// 2、或者 局部引用
<template>
    <div>
      <isp-plateform></isp-plateform>
    </div>
</template>

export default {
  components: {
    Ispplatform
  }
}

attrs

| 参数 | 说明 | 数据类型 |可选值 | 默认 | | --- | --- | --- | --- | --- | | auto-max-height | 是否自动设置高度，自动设置组件的高度为组件顶部值窗口底部的高度值 | Boolean | true/false |true | | subtract-height | 自动设置高度后减去的值 | Number | - | 0 | | menu-data | 左侧菜单的数据 | Array | - | [] | | config-form-components | 配置表单项，点击模块的时候，模块可用的表单项 | Array | - | [] | | multi-platform | 是否展示多平台规格，PC、H5、Pad | Boolean | true/false | true |

attrs: menu-data 配置解析

| 参数 | 说明 | 数据类型 |可选值 | 默认 | | --- | --- | --- | --- | --- | | label | 类型标题 | String | | - | | components | 可选模块选项 | Array | | - |

menu-data: components 模块配置解析

| 参数 | 是否必须 |说明 | 数据类型 |可选值 | 默认 | | --- | --- | --- | --- | --- | --- | | componentName | 是 | 模块唯一标识 | String | | - | | label | |模块名称 | String | | - | | moduleData| 是 | 模块的配置数据 | Object | | {} | | attrList| 否 | 模块的表单 | Array | | [] |

menu-data示例

const menuData = [{
  label: '容器',
  components: [
    {
      componentName: 'IconBtnList',
      label: '按钮列表',
      moduleData: {
        list: [
          {label: '', url: ''}
        ]
      },
      attrList: [
        {
          label: 'API地址',
          componentName: 'input',
          filed: 'url'
        },
        {
          label: '选项设置',
          filed: 'list',
          componentName: 'setOptions',
        }
      ]
    }]
}]

components: attrList 配置解析

| 参数 | 是否必须 |说明 | 数据类型 |可选值 | 默认 | | --- | --- | --- | --- | --- | --- | | label | 否 | 模块唯一标识 | String | | - | | filed | 是 | moduleData的字段名 | String | | - | | componentName | 是 | 对应表单项的组件标识 | String | | - |

methods

| 方法名 | 说明 | 传参 |可选值 | 默认 | | --- | --- | --- | --- | --- | |initModule| 初始化模块，可用于详情回显 | Array<getModels获取的数据结构> || |getModules| 获取已选的模块数据，包括模块的配置数据 | - || |addModule| 添加模块 | Object{ [componentName]: component(VNode) }] ||

Module Props

| 方法名 | 说明 | 传参 | | --- | --- | --- | |config| 整个module的配置项 | - | |value| moduleData中对应的值 | - | |filed| 字段名称 | - |

画布模块实例

Title 标题

1、画布的模块并不是写死的，需要开发者自己设计开发，按照v-model的双向绑定的方式来开发组件即可，也就是说，组件需要 props.value 来接收数据。
2、画布组件会获取this.$emit("input", argument)来更新moduleData

模块添加方式

<template>
  <lx-isp-platform ref="lxispplatform"></lx-isp-platform>
</template>      


<script>
import Modules from './modules'
export default {
  data () {
    
  },
  methods: {
    setModule () {
      this.$refs.lxispplatform.initModule(Modules)
    }
  }
}
</script>

Modules实例

<template>
  <div class="title-wrap" :style="formData">
    <div v-show="formData.showLine" class="line"></div>
      <div class="title-text">{{ formData.text || '标题' }}</div>
    <div v-show="formData.showLine" class="line"></div>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
        text: '标题',
        textAlign: 'center',
        fontSize: '18px',
        showLine: true
      }
    }
  },
  watch: {
    value: {
      handler (val) {
        const { text, textAlign, fontSize } = val
        this.formData.text = text || '标题'
        this.formData.textAlign = textAlign || 'center'
        this.formData.fontSize = fontSize ? fontSize + 'px' : '18px'
        this.formData.showLine = val.showLine
      },
      deep: true,
      immediate: true
    }
  },
  methods: {},
  created() {
  },
  mounted() {
  }
}
</script>

<style scoped>
.title-wrap {
  padding: 8px 8px 16px;
}
.title-text {
  display: inline-block;
}
.line {
  width: 50px;
  height: 2px;
  background-color: rgba(151, 151, 151, 0.6);
  display: inline-block;
  vertical-align: 5px;
  margin: 0 15px;
}
</style>

右侧菜单项配置

{
          componentName: 'title',
          label: '标题',
          moduleData: {
            showLine: true
          },
          attrList: [
            { label: '文本内容', componentName: 'input', filed: 'text' },
            { label: '文字大小', componentName: 'numberInput', filed: 'fontSize' },
            { label: '位置', componentName: 'radio', filed: 'textAlign',
              options: [
                { label: '左', value: 'left' },
                { label: '中', value: 'center' },
                { label: '右', value: 'right' }
              ]
            },
            { label: '显示线条', componentName: 'switch', filed: 'showLine'}
          ]
}

表单项实例

1、表单并不是本组件写死的，而是由开发者自己决定导入什么样的组件作为表单项。
2、导入了表单项之后，才可以在 menu-data 中的 attrsList 中指定对应的表单项

ips-platform组件会给表单项组件传入默认props

attr Props

| 方法名 | 说明 | 传参 | | --- | --- | --- | |value| moduleData中对应的值 | - | |filed| 字段名称 | - | |data| 菜单项的配置 | - | |config| 整个菜单大类的配置 | - |

导入方式

<template>
  <lx-isp-platform :config-form-components="components"></lx-isp-platform>
</template>      


<script>
import Components from './attrComponents'
export default {
  data () {
    components: Components || []
  }
}
</script>

Input 输入框

<template>
  <div>
    <el-input v-model="modelValue" @input="inputChange"></el-input>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  props: ['value'],
  data() {
    return {
      modelValue: ''
    }
  },
  methods: {
    inputChange (val) {
      this.modelValue = val
      this.$emit('input', val)
    }
  },
  created() {
  },
  mounted() {
    this.modelValue = this.value
  }
}
</script>

<style scoped>

</style>