vue之实现菜单栏选中、不选中时的样式和相应请求处理

深碍√TFBOYSˉ_ 2021-06-11 15:12 585阅读 0赞

对于项目实战的初中级前端人员来说，封装自己菜单栏组件是很有必要的，因为这可以提高开发效率，代码复用率较高。让自己每次在编写页面的时候不再一个字母一个字母的敲。

好，今天我们就来学习下，怎么去封装自己的菜单栏组件，而且点击时显示被选中的样式，并请求相应的数据或做出相应的逻辑处理。

首先按照惯例，先来看看菜单栏蓝图：

![70][]

![70 1][]

![70 2][]

![70 3][]

这里只是简单的菜单栏，能满足基本的需求，如果有强迫症的童鞋可以线下去优化和美化。

现在正式看看用代码怎么实现：

HTML部分：

CSS部分：

.deadline{
        width:600px;
        height: 80px;
      }
    
      .deadlineOption.getDate{
        width: 50%;
        height: 80px;
        text-align: center;
        float: left;
      }
    
      .deadline p{
        float: left;
        line-height: 80px;
      }  
    
      .deadlineOption li,.getDate li{
        font-size: 12px;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        float: left;
        margin: 20px 0;
      }
    
      .deadlineOption li:hover{
        cursor: pointer;
      }
    
      .addClass{
        background: #1ab394;
        color: white;
      }

JS部分：

// 选择菜单栏跳转或逻辑处理
          active_operate_time_index: function(event){
            event = window.event || event || e;
            var target = event.target || window.event.srcElement;
            // 下面是获取属性id，因为每个菜单项都有一个标识id，那么可以根据id来做不同的处理
            var id = target.getAttribute('id');
            this.active_id = id;
            this.handleMenu(this.active_id);
          },
    
          // 具体做出处理的函数
          handleMenu: function (active_id){
            // 这里也可以用switch语句，看个人喜欢
            if(active_id == 'week'){
              // handle week codes go here
            }else if(active_id == 'month'){
              // handle month codes go here
            }else if(active_id == 'year'){
              // handle year codes go here
            }else {
              // handle customize codes go here
            }
          }

这里只是演示了基本的菜单栏的功能，更加强大的功能可在此基础上进行扩展。

[70]: /images/20210522/28b5109dd3e44eb881ecdb7a794fd642.png
[70 1]: /images/20210522/f82b294560104c40a725b8481103a2d1.png
[70 2]: /images/20210522/476df8ba8ad3434aad2bae78888219d6.png
[70 3]: /images/20210522/46d3fd7300dc48a493a95d639065e40a.png