?

如上圖所示，不使用UI庫，手寫一個篩選器

JS代碼

'use strict'; import {createElement,useEffect,useState,Fragment,useCallback,useMemo,useRef, } from 'rax'; import View from 'rax-view'; import Text from 'rax-text'; import Picture from '@ali/rax-picture'; import './index.css';const v1 ='https://img.alicdn.com/imgextra/i4/O1CN01KmlzFh1ohkrTChKp0_!!6000000005257-2-tps-18-10.png'; const v2 ='https://img.alicdn.com/imgextra/i3/O1CN01VxAOuU1E39aJS3P7Y_!!6000000000295-2-tps-18-10.png';export default function TheFilter(props) {let liTitle = [{ name: '綜合排序', id: 1 },{ name: '銷量', id: 2 },{ name: '收藏數', id: 3 },{ name: '傭金金額', id: 4 },];let ch1 = [{ name: '綜合排序', id: 11 },{ name: '新品優先', id: 12 },];let ch2 = [{ name: '傭金金額', id: 41 },{ name: '傭金比例', id: 42 },];const { changeMenu } = props;const [list, setList] = useState(liTitle);const [child1, setChild1] = useState(ch1);const [child2, setChild2] = useState(ch2);const [cur, setCur] = useState(0);const [c1, setC1] = useState(0);const [c2, setC2] = useState(0);const changeStatus = (v, index, status) => {// 處理父類篩選if (v.id === 11 || v.id === 12) {setC1(index);}if (v.id === 41 || v.id === 42) {setC2(index);}// 點擊子節點if (status) {changeMenu(v.id);stopBubbling();// 替換頭部標題list.forEach((k) => {if (k.id === +`${v.id}`.substring(0, 1)) {k.name = v.name;}});setList(list);} else { // 點擊父節點changeMenu(v.id);setCur(index);// 復原 頭部和子內容setList(liTitle);setC1(0);setC2(0);// setChild1(ch1);// setChild2(ch2);}};const stopBubbling = (e) => {e = window.event || e;if (e.stopPropagation) {e.stopPropagation(); // 阻止事件 冒泡傳播} else {e.cancelBubble = true; // ie兼容}};return (<View className="mod">{list.map((item, index) => {return (<ViewclassName={`${cur == index ? 'primary' : 'side'}`}key={`tilte${index}`}onClick={() => {changeStatus(item, index);}}><TextclassName="tag"lines={1}style={{ color: cur == index ? '#396efe' : '#60646f' }}>{item.name}</Text><Viewx-if={item.id === 1 || item.id === 4}className="iconDownWrapper"><PictureclassName="iconDown"source={{uri: cur == index ? v1 : v2,}}/></View><View className="sec-group" x-if={cur === 0}>{child1.map((v, index) => {return (<ViewclassName={c1 == index ? 'sec-main' : 'sec-common'}key={index}onClick={() => {changeStatus(v, index, true);}}><TextclassName={c1 == index ? 'sec-tag1' : 'sec-tag'}lines={1}>{v.name}</Text></View>);})}</View><View className="sec-mount-mod" x-if={cur === 3}>{child2.map((v, index) => {return (<ViewclassName={c2 == index ? 'sec-main' : 'sec-common'}key={index}onClick={() => {changeStatus(v, index, true);}}><TextclassName={c2 == index ? 'sec-tag1' : 'sec-tag'}lines={1}>{v.name}</Text></View>);})}</View></View>);})}</View>); }

changeMenu會將選擇的數據返回給父組件，可根據返回的數據做具體的操作

?

CSS代碼

.mod {display: flex;flex-direction: row;align-items: center;cursor: pointer;margin-bottom: 20px;margin-left: -85px; } .primary {display: flex;flex-direction: row;justify-content: center;align-items: center;width: 106px;height: 36px;background-color: #f0f6ff;border-width: 1px;border-style: solid;/* border-top-left-radius: 3px;border-bottom-left-radius: 3px; */border-color: #396efe; }.tag {margin-right: 4px;font-family: PingFang SC;font-size: 14px;font-weight: 400;line-height: 14px;white-space: nowrap; } .iconDownWrapper {display: flex;flex-direction: row;justify-content: center;align-items: center;width: 17px;height: 17px;margin-top: -2px; } .iconDown {width: 8px;height: 4px;margin-top: 1px; } .side {display: flex;flex-direction: row;align-items: center;justify-content: center;height: 36px;background-color: #ffffff;border-width: 1px;border-style: solid;width: 106px;border-color: #d4d7e1;padding: 0 18px;color: #60646f; } .side:nth-of-type(2), .side:nth-of-type(3), .side:nth-of-type(4) {border-left-style: none !important; }.labelWrapperItem0 {display: flex;flex-direction: row;justify-content: center;align-items: flex-start;width: 59px;height: 22px;white-space: nowrap; } .label {overflow: hidden;max-width: 47px;font-family: PingFang SC;font-size: 14px;font-weight: 400;color: #60646f;text-overflow: ellipsis; } .verticalLine {width: 1px;height: 34px;margin-right: 1px;background-color: #d4d7e1; } .labelWrapperItem1 {display: flex;flex-direction: row;justify-content: center;align-items: flex-start;width: 71px;height: 22px;white-space: nowrap; } .favor {overflow: hidden;max-width: 59px;font-family: PingFang SC;font-size: 14px;font-weight: 400;color: #60646f;text-overflow: ellipsis; } .verticalLine1 {width: 1px;height: 34px;margin-right: 1px;background-color: #d4d7e1; } .group {display: flex;flex-direction: row;justify-content: center;align-items: center;width: 106px;height: 22px; } .word {margin-right: 4px;font-family: PingFang SC;font-size: 14px;font-weight: 400;line-height: 14px;color: #60646f;white-space: nowrap; } .iconDownWrapper1 {display: flex;flex-direction: row;justify-content: center;align-items: center;width: 17px;height: 17px;margin-top: -1px; } .iconDown1 {width: 8px;height: 4px;margin-top: 1px; } .sec-mod {width: 107px;height: 80px;white-space: nowrap;position: absolute;top: 36px; }.sec-mount-mod {width: 107px;height: 80px;white-space: nowrap;position: absolute;background-color: #ffffff;box-shadow: 0 3px 6px 0 rgba(51, 53, 59, 0.12);border-radius: 3px;border-width: 1px;border-style: solid;border-color: #e8ebf2;top: 36px;left: 0;/* margin-left: 317px; */margin-left: 232px;z-index: 999;opacity: 0;display: block;font-size: 13px;transition: 0.3s;-webkit-transition: 0.5s;-moz-transition: 0.5s; }.primary:hover .sec-group, .primary:hover .sec-mount-mod {opacity: 1; }.sec-group {z-index: 999;display: flex;flex-direction: column;align-items: flex-start;width: 107px;height: 80px;background-color: #ffffff;box-shadow: 0 3px 6px 0 rgba(51, 53, 59, 0.12);border-radius: 3px;border-width: 1px;border-style: solid;border-color: #e8ebf2;position: absolute;top: 36px;opacity: 0;display: block;font-size: 13px;transition: 0.3s;-webkit-transition: 0.5s;-moz-transition: 0.5s; } .sec-tag {position: relative;overflow: hidden;height: 22px;max-width: 83px;margin-top: 8px;margin-left: 11px;font-family: PingFang SC;font-size: 14px;font-weight: 400;line-height: 22px;color: #33353b;text-overflow: ellipsis; } .sec-tag1 {overflow: hidden;max-width: 83px;margin-top: 8px;height: 22px;line-height: 22px;margin-left: 11px;font-family: PingFang SC;font-size: 14px;font-weight: 400;color: #396efe;text-overflow: ellipsis; } .sec-main {position: relative;display: flex;flex-direction: row;align-items: center;width: 105px;height: 40px;/* margin-top: 8px; */margin-left: 0px;background-color: #f6f8fc;line-height: 14px;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px; } .sec-common {position: relative;display: flex;flex-direction: row;align-items: center;width: 105px;height: 40px;/* margin-top: 8px; */margin-left: 0px;background-color: #fff;line-height: 14px;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px; }

總結

以上是生活随笔為你收集整理的PC菜单筛选器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。