Skip to content

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

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

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