Skip to content

W
web
提交 cade5f35 作者: 翁进城
操作

筛选组件项，增加超级10个时，可展开效果

上级 713a411e
正在显示 包含 204 行增加 和 32 行删除
components/filter/compoents/brandItem/index.tsx
import { Space, Button, Select } from 'antd';
import styles from '../../index.module.scss';
import { Space, Button, Select, Collapse } from "antd";
import styles from "../../index.module.scss";
import api, { FilterOptionResp } from "../../api";
import { useEffect, useState } from "react";
......@@ -8,13 +8,13 @@ type Props = {
};
export default function BrandItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([])
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.brand().then(res => {
api.brand().then((res) => {
setData(res?.result || []);
});
}, [])
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
......@@ -26,14 +26,46 @@ export default function BrandItem(props: Props) {
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>品牌：</div>
<div className={styles.filterItemMain}>
<div className={`${styles.filterItemMain} ${data.length <= 10 && styles.disabled}`}>
<Collapse
ghost
collapsible="icon"
expandIconPosition="end"
>
<Collapse.Panel
header={
<Space size={40}>
{
data.map(item => {
return <Button type="link" key={item.id} onClick={(e) => onClick(item)}>{item.name}</Button>;
})
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
......
components/filter/compoents/categoryItem/index.tsx
import { Space, Button, Select } from 'antd';
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
......@@ -26,14 +26,45 @@ export default function CategoryItem(props: Props) {
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>类目：</div>
<div className={styles.filterItemMain}>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{
data.map(item => {
return <Button type="link" key={item.id} onClick={(e) => onClick(item)}>{item.name}</Button>;
})
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
......
components/filter/compoents/modelItem/index.tsx
import { Space, Button, Select } from 'antd';
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useEffect, useState } from 'react';
......@@ -26,14 +26,45 @@ export default function ModelItem(props: Props) {
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>型号：</div>
<div className={styles.filterItemMain}>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{
data?.map(item => {
return <Button type="link" key={item.id} onClick={(e) => onClick(item)}>{item.name}</Button>;
})
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
......
components/filter/compoents/partItem/index.tsx
import { Space, Button, Select } from 'antd';
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
......@@ -26,16 +26,45 @@ export default function PartItem(props: Props) {
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>部件：</div>
<div className={styles.filterItemMain}>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data?.map((item) => {
{data.slice(0, 10).map((item) => {
return (
<Button type="link" key={item.id} onClick={(e) => onClick(item)}>
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
......
components/filter/compoents/qualityItem/index.tsx
import { Space, Button, Select } from 'antd';
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
......@@ -26,16 +26,45 @@ export default function QualityItem(props: Props) {
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>成色：</div>
<div className={styles.filterItemMain}>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data?.map((item) => {
{data.slice(0, 10).map((item) => {
return (
<Button type="link" key={item.id} onClick={(e) => onClick(item)}>
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
......
components/filter/index.module.scss
......@@ -9,27 +9,47 @@
}
.filterItem {
height: 42px;
min-height: 42px;
border-bottom: 1px dashed RGBA(222, 222, 222, 1);
display: flex;
align-items: center;
&:nth-last-child(1) {
border-bottom: none;
}
.filterItemTitle {
flex-shrink: 0;
width: 80px;
margin-right: 8px;
font-family: MicrosoftYaHei;
color: rgba(153, 153, 153, 1);
line-height: 20px;
height: auto;
margin-top: 10px;
}
.filterItemMain {
flex: 1;
display: flex;
justify-content: space-between;
&.disabled {
:global .ant-collapse-expand-icon {
display: none;
}
}
:global .ant-collapse-item {
.ant-collapse-expand-icon {
margin-top: 10px;
}
.ant-collapse-header {
padding: 0;
height: 42px;
line-height: 42px;
}
}
}
:global .ant-select-selector {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论