筛选组件开发

src/components/Menu/example.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import MenuComponent from "./index";
+
+export default function Example() {
+  const [value, setValue] = useState("a");
+  const options = [
+    { text: "默认排序", value: "a" },
+    { text: "好评排序", value: "b" },
+    { text: "销量排序", value: "c" },
+  ];
+  return (
+    <MenuComponent
+      options={options}
+      value={value}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}

src/components/Menu/index.module.scss

@@ -0,0 +1,45 @@
+.menuWrap {
+  padding: 5px 20px 10px;
+  .menuItem {
+    left: 0;
+    border-bottom-left-radius: 30px;
+    border-bottom-right-radius: 30px;
+  }
+  &.active {
+    :global(.nut-menu-bar) {
+      background-color: #000000;
+      color: #ffffff;
+    }
+  }
+  :global(.nut-menu-bar) {
+    color: #000000;
+    line-height: 1;
+    box-shadow: unset;
+    min-height: 28px;
+    min-width: 94px;
+    border-radius: 28px;
+    border: 1px solid #e5e5e5;
+    line-height: 28px;
+    font-size: 14px;
+    width: max-content;
+
+    .nut-menu-title-text {
+      padding-left: 0;
+    }
+  }
+
+  :global(.nut-menu-title) {
+    color: inherit !important;
+    font-weight: 600;
+  }
+
+  :global(.nut-menu-container-item) {
+    color: #3c3c43;
+    font-weight: 600;
+    font-size: 14px;
+  }
+  :global(.nut-menu-container-item.active) {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+}

src/components/Menu/index.tsx

@@ -0,0 +1,37 @@
+import { Menu } from "@nutui/nutui-react-taro";
+import styles from "./index.module.scss";
+import { useState } from "react";
+
+interface IProps {
+  options: { text: string; value: string }[];
+  value: string;
+  onChange: (value: string) => void;
+  wrapperClassName?: string;
+  itemClassName?: string;
+}
+
+const MenuComponent = (props: IProps) => {
+  const { options, value, onChange, wrapperClassName, itemClassName } = props;
+  const [isChange, setIsChange] = useState(false);
+
+  const handleChange = (value: string) => {
+    setIsChange(true);
+    onChange && onChange(value);
+  };
+
+  return (
+    <Menu
+      className={`${styles.menuWrap} ${wrapperClassName} ${isChange ? styles.active : ""}`}
+      activeColor="#000"
+    >
+      <Menu.Item
+        className={`${styles.menuItem} ${itemClassName}`}
+        options={options}
+        defaultValue={value}
+        onChange={handleChange}
+      />
+    </Menu>
+  );
+};
+
+export default MenuComponent;