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

文章目录

更新内容

  • 新增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的参数

javascript 复制代码
<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>
相关推荐
用户99045017780098 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家11 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
5ycode1 小时前
dify项目结构说明与win11本地部署
后端·开源
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架