浪歌 · 随笔 我的开发笔记

调整 header、tab、form、table样式

[vben] 2024/7/6 17:00:53

觉得vben默认的样式中头部占高比较多,给他改小一点:

1. src\design\var\index.less中调整@header-height的值=34px

2. src\layouts\default\header\MultipleHeader.vue中调整HEADER_HEIGHT的值=34。


更改选项卡高度:

1. src\design\var\index.less中调整@multiple-height的值 =28px

2. src\layouts\default\header\MultipleHeader.vue中调整TABS_HEIGHT的值=30。

3. TABS_HEIGHT的值要比@multiple-height多设置2px,要包含边框在内。


如果需要更改默认的选项卡的样式,可以直接在src\layouts\default\tabs\index.less中调整修改。


增加表单组件大小的默认设置:

1. 在src\settings\componentSetting.ts中增加form:{ defaultSize: 'small', }

2. 在src\components\Form\src中增加const.ts文件,参考src\components\Table\src\const.ts

3. src\components\Form\src\props.ts中引用const.ts,并默认赋值size。同样参考对应的table组件


重写table - small的样式,采用更小的边距:
1. 在src\design\ant中增加tableSamll.less文件,并写入样式:

/*重写table-small的样式,需要在index.less中引用*/

.ant-table-small {
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 2px 8px !important; //更小的内边距
  }

  .ant-table-tbody > .ant-table-measure-row > td {
    padding: 0 !important;
  }

  .ant-table-thead > tr > th {
    background-color: #f1f1f1 !important;
    font-size: 14px; //更小的字体
  }

  .ant-table-tbody > tr > td {
    font-size: 14px; //更小的字体
  }
}

.vben-basic-table .ant-table-wrapper {
  padding-top: 0 !important;
}

.vben-basic-table .ant-table-wrapper .ant-table.ant-table-bordered .ant-table-title {
  padding-bottom: 0 !important;
}

.ant-table-cell-row-hover {
  background-color: #e3e8eb !important; /* 设置为你希望的颜色 */
}

.ant-table-title button {
  margin-right: 8px;
}

.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item,
.ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item,
.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title,
.ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title {
  padding: 3px 12px;
}

2. 在src\design\ant\index.less中增加引用:@import './tableSmall.less';