筛选组件开发

src/components/Range/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { Range } from "@nutui/nutui-react-taro";
-import "./index.scss";
+import styles from "./index.module.scss";
 
 interface RangeProps {
   min?: number;
@@ -48,18 +48,18 @@ const NtrpRange: React.FC<RangeProps> = ({
   }, [currentValue, min, max]);
 
   return (
-    <div className="ntrp-range">
-      <div className="ntrp-range__header">
-        <div className="ntrp-range__header-left">
+    <div className={styles.nutRange}>
+      <div className={styles.nutRangeHeader}>
+        <div className={styles.nutRangeHeaderLeft}>
           <div className="ntrp-range__icon">icon</div>
-          <h3 className="ntrp-range__title">NTRP水平区间</h3>
+          <h3 className={styles.nutRangeHeaderTitle}>NTRP水平区间</h3>
         </div>
-        <p className="ntrp-range__content">{rangContent}</p>
+        <p className={styles.nutRangeHeaderContent}>{rangContent}</p>
       </div>
 
       <div>
-        <div className="rangeWrapper">
-          <span className="rangeWrapper__min">{min}</span>
+        <div className={styles.rangeWrapper}>
+          <span className={styles.rangeWrapperMin}>{min}</span>
           <Range
             range
             min={min}
@@ -69,14 +69,14 @@ const NtrpRange: React.FC<RangeProps> = ({
             onChange={handleChange}
             disabled={disabled}
             defaultValue={[min, max]}
-            className="rangeHandle"
+            className={styles.rangeHandle}
             maxDescription={null}
             minDescription={null}
             currentDescription={null}
             marks={marks}
             style={{ color: "gold" }}
           />
-          <span className="rangeWrapper__max">{max}</span>
+          <span className={styles.rangeWrapperMax}>{max}</span>
         </div>
       </div>