git地址 https://github.com/liptpb/reactModile.git
1.umi的config配置
import { defineConfig } from 'umi';
import px2vw from 'postcss-px-to-viewport';
import routes from './routes';
export default defineConfig({
hash: true,
// history: {
// type: 'hash',
// },
publicPath: './', // 如果域名存在后缀,则使用相对路径
// externals: {
// react: 'React',
// 'react-dom': 'ReactDOM',
// }, // 通过cdn加载react,减少包大小
// scripts: [
// // 引入jssdk
// 'https://unpkg.com/react@16.12.0/umd/react.production.min.js',
// 'https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js',
// ],
cssLoader: {
localsConvention: 'camelCase',
},
nodeModulesTransform: {
type: 'none',
},
extraPostCSSPlugins: [
px2vw({
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: ['am-', 'adm-', 'art-'],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/node_modules/],
include: undefined,
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568,
}),
],
title: false,
antd: { mobile: false },
plugins: [
// 'umi-plugin-cache-route',
],
routes: routes,
fastRefresh: {},
targets: {
//配置浏览器最低版本,比如兼容ie11
ie: 11,
},
});
2. 缓存插件实现keepalive 文档地址 https://github.com/alitajs/umi-plugin-keep-alive
npm install umi-plugin-keep-alive --save
# or
yarn add umi-plugin-keep-alive
import { KeepAlive } from 'umi'
export default (props: any) => {
return (
<KeepAlive
id={props.location.query.queryParams || props.location.pathname} 缓存id
when={() => { 判断条件返回boobean或者数组
if (props.history.action == 'POP') {
return false;
}
return true;
}}
saveScrollPosition="screen"
>
<你的页面组件/>
</KeepAlive>
3. table 基本信息 | ali-react-table
import React from 'react';
import { useTablePipeline, features, BaseTable } from 'ali-react-table';
import styles from './index.less';
type BaseType = {
dataSource: any;
columns: any;
primaryKey: string; // rowkey
stickyTop?: number; // 表头吸顶后,距离顶部的距离,默认为 0
loading?: boolean;
isSum?: boolean; // 是否首行带合计
sortClick?: (sort_obj: SortItem[]) => void; // 排序功能
rowClick?: (row_obj: any) => void; // 行点击功能
};
const MyBaseTable: React.FC<BaseType> = (props) => {
const {
dataSource,
loading,
primaryKey,
stickyTop,
isSum,
columns,
sortClick,
rowClick,
} = props;
const sortChange = (vv: SortItem[]) => {
sortClick && sortClick(vv);
};
// 跳转函数
const rowClickFun = (record: any) => {
rowClick && rowClick(record);
};
const pipeline = useTablePipeline({ components: {} })
.input({ dataSource, columns })
.primaryKey(primaryKey)
.use(
features.sort({
mode: 'single',
keepDataSource: true,
highlightColumnWhenActive: true,
orders: ['asc', 'desc', 'none'], // asc 升序 desc 降序
onChangeSorts: sortChange,
}),
);
return (
<>
<BaseTable
className={[styles.myBaseTable, 'compact'].join(' ')}
style={{
'--font-size': '13px',
'--color': '#666666',
'--header-color': '#000000',
'--header-bgcolor': '#E4E4E4',
'--header-row-height': '38px',
'--row-height': '35px',
'--cell-padding': '2px 6px',
// '--highlight-bgcolor':'#6BB0FF',
// '--header-highlight-bgcolor':'#6BB0FF',
minHeight: 385,
// overflow : 'auto'
}}
useVirtual={false}
stickyTop={stickyTop ? stickyTop : 70}
isLoading={loading}
{...pipeline.getProps()}
getRowProps={(record, rowIndex) => {
// 自定义行样式
if (isSum) {
return {
style:
rowIndex === 0
? {
color: 'red',
}
: rowIndex % 2 === 1 && rowIndex > 0
? {
'--bgcolor': '#F8F8F8',
background: '#F8F8F8',
}
: {
background: 'white',
},
onClick() {
rowClickFun(record);
},
};
} else {
return {
style:
rowIndex % 2 === 1
? {
'--bgcolor': '#F8F8F8',
background: '#F8F8F8',
}
: {
background: 'white',
},
onClick() {
rowClickFun(record);
},
};
}
}}
/>
</>
);
};
export default MyBaseTable;