项目中要实现类似与vant的DropdownMenu:下拉菜单。看了货车的效果其实也没什么难度,于是动手鲁了一个这样的组件。
项目的技术栈为反应全家桶+材料界面+蚂蚁设计移动。
货车的效果
我自己实现的效果
思路
常规做法获取dom元素,动态修改选中dom的innerHtml。
当然这种方式不是反应推荐的
我的做法既然反应不推荐直接操作dom元素,那可以采用动态动态修改类的方式达到效果,例如:
让cls="正常"
div未被选中时
& lt; div className={cls}/比;
div被选中时
cls +=暗鼻啊?
& lt; div className={cls}比;
之前
实现步骤
顶部标签采用三个div的方式布的局,由于需要动态修改标签上的标题,所以定义一个数组,减速器中的标签数据结构如下
让标签={};
(TABKAY标签。区域]={
关键:TABKAY.AREA,
文本:“全部区域”,
obj: {}
};
(TABKAY标签。那种]={
关键:TABKAY.SORT,
文本:“综合排序”,
obj: {}
};
(TABKAY标签。过滤]={
关键:TABKAY.FILTER,
文本:“筛选”,
obj: SX
};
const initialState={
领域:[{id:“”,名字:“全部区域"}),
标签:标签,
actionKey: TABKAY。,//标识了当前选中选项卡
closePanel:真//标识面板div是否显示
};
之前
tabUI组件的页面容器渲染方法
renderTabs () {
const{制表符、actionKey closePanel}=this.props;//- - - - - - - - - - - -
如果(! closePanel) {
fixedBody ();
其他}{
looseBody ();
}//- - - - - - - - - - - -
让aray=[];
(让关键选项卡){
让项目=标签(关键);
让cls=项目。键+“项目”;
如果项目。键===actionKey,,! closePanel) {
cls +=暗鼻啊?
}
aray.push (
& lt; div className=={item.key}> {cls}关键
.item {
flex: 1;
字体大小:15 px;
边境:0.5 px固体# eaeaea;
text-align:中心;
和:胎{
边界:没有;
}
和。面积:,,。后:,,。过滤器:{后
内容:“”;
显示:inline-block;
宽度:5 px;
身高:5 px;
margin-bottom: 2 px;
margin-left: 6 px;
边界:2 px固体# 666;
边框宽度:0 2 px 2 px 0;
变换:旋转(45度);
-webkit-transform:旋转(45度);
-webkit-transition: 3;
过渡:3;
}
和。当前{
颜色:# 0084 ff;
}
和。当前:{后
边框颜色:# 0084 ff;
变换:旋转(225度);
-webkit-transform:旋转(225度);
}
之前
铬查看元素
全部区域选项卡被选中:
综合选项卡被选中
每次点击不同的选项卡时都会自动的渲染当前这个css样式,这样就实现了下拉菜单的功能。
完整代码
/* *
*类:
*作者:miyaliunian
*日期:2019/5/26
*描述:标签选择器
*医院列表
*/进口的反应,{组件}从“反应”;
从“@api进口{ZHPX, TABKAY}/常数”;//Util
从“@utils进口{fixedBody, looseBody}/fixRollingPenetration”;//回家的
从“进口{连接}react-redux”;
从“终极版”进口{bindActionCreators};
进口{行动tabActions, getTabs、getAreasList getActionKey, getClosePanel}从“@reduxs/模块/标签”;
从“@reduxs进口{hospitalActions行动,}/模块/医院”;//样式
进口”。/tabs.less”;
类标签扩展组件{/* *
*变化当前点击的项状态同时过滤请求
* @param filterItem当前选中的元素
* @param关键哪个选项卡是选中状态
*/changeDoFilter (filterItem、关键事件){
hospitalActions const {tabActions: {changeFilter}: {filterHosiContentList}}=this.props;
event.stopPropagation ();
changeFilter (filterItem、关键,(过滤器)=比;{
filterHosiContentList(过滤器);
});
}/* *
*筛选选项卡确定按钮
* @param事件
*/filterPanel(事件){
const {tabActions: {closePanelAction},标签,hospitalActions: {filterHosiContentList}}=this.props;
event.stopPropagation ();
closePanelAction(()=祝辞{
filterHosiContentList(标签)
}）
}/* *
*点击切换标签
* @param关键
*/onChangeTab(键){
const {actionKey tabActions: {changeTab}}=this.props;
让closePanel=false;//如果前后点击的是同一个标签就关闭面板
如果(actionKey===键,,! this.props.closePanel) {
closePanel=true;
}
closePanel & # 63;looseBody (): fixedBody ();
changeTab(关键,closePanel);
}/* *
*渲染顶部选项卡
*/renderTabs () {
const{制表符、actionKey closePanel}=this.props;//- - - - - - - - - - - -
如果(! closePanel) {
fixedBody ();
其他}{
looseBody ();
}//- - - - - - - - - - - -
让aray=[];
(让关键选项卡){
让项目=标签(关键);
让cls=项目。键+“项目”;
如果项目。键===actionKey,,! closePanel) {
cls +=暗鼻啊?
}
aray.push (
& lt; div className={cls}={关键项目。关键}onClick={()=比;this.onChangeTab (item.key)}比;
{item.text}
& lt;/div>);
}
返回aray;
}/* *
*全部区域
* @returns {*}
*/renderAreaContent () {
const {areasList}=this.props;
areasList返回。地图((项目、索引)=比;{
让cls=项目。活跃+“area-item”;
回报(
李& lt;关键={指数}className={" area-item} onClick={(e)=比;这一点。TABKAY changeDoFilter(项目。区域,e)}祝辞
{item.name}
& lt;/li>
);
});
}/* *
*全部排序
* @returns{任何[]}
*/renderSORTContent () {
让sortList=ZHPX;
sortList返回。地图((项目、索引)=比;{
让cls=项目。行动& # 63;“类型活动”:“类型”;
回报(
李& lt;关键={指数}className={cls} onClick={(e)=比;这一点。TABKAY changeDoFilter(项目。排序,e)}祝辞
{item.name}
& lt;/li>
);
});
}/* *
*筛选
* @returns {*}
*/renderFilterInnerContent(项目/* filterList */) {
返回物品。地图((项目、索引)=比;{
让cls=" cate-box”;
如果(item.active) {
cls +=盎钤尽?
}
回报(
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
