@lxing-ui/isp-platform

LXing-UI isp-platform

页面配置平台是一个vue组件，可以配置页面的，并且输出一个配置，本组件只提供一个框架，组件选择、页面模块、模块属性表单都是可以从外部引入的。

该组件内部组件依赖于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>