adminPage-vue3依赖DetailsModule版本说明：V1.2.1——1) - 新增span与labelSpan属性

文章目录

• 更新内容
• DetailsModuleAPI汇总
• • 属性
  • 自定义对象
  • • [config.list(array<object> 类型)](#config.list(array<object> 类型))
  • 使用
  • • span属性（24栅格系统）

更新内容

• 新增span与labelSpan属性，当使用span属性时将不适用默认的布局，如果24栅格系统进行重新布局

DetailsModuleAPI汇总

属性

属性名	说明	类型	默认值	版本号
span	每个单元格所占24栅格中的大小，声明后将使用24栅格布局	-	1.2.1
labelSpan	每个label格所占24栅格中的大小	3	1.2.1

自定义对象

config.list(array 类型)

属性名	说明	类型	默认值	版本号
span	每个单元格所占24栅格中的大小，声明后将使用24栅格布局	-	1.2.1
labelSpan	每个label格所占24栅格中的大小	3	1.2.1

使用

span属性（24栅格系统）

当声明span时，将会使用24栅格布局，如果labelSpan被声明，则label位置将使用labelSpan的参数

<template>
  <div style="margin: 50px 10%">
    <DetailsModule
      :config="detailConfig2"
      :data="detailData"
      nullText="暂无数据"
      :span="4"
      :labelSpan="4"
    >
    </DetailsModule>
    <DetailsModule
      :config="detailConfig2"
      :data="detailData"
      nullText="暂无数据"
    >
    </DetailsModule>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { DetailsModule } from 'adminpage-vue3'

const detailData = ref({
  data1: 'data1',
  data2: '',
  data3: '',
  data4: 'data4',
  data5: 'data5',
})
const detailConfig2 = [
  {
    title: '模块一',
    list: [
      {
        label: '数据一',
        key: 'data1',
        span: '8',
        labelSpan: '4',
      },
      {
        label: '数据二',
        key: 'data2',
        span: '4',
        labelSpan: '8',
      },
      {
        label: '数据三',
        key: 'data3',
        nullText: '尚未录入数据',
      },
      {
        label: '数据四',
        key: 'data4',
      },
      {
        label: '数据五',
        key: 'data5',
      },
    ],
  },
]
</script>