Vue 2.0 + element-ui 监听鼠标中键滚动的动作，完成切换跑马灯的同时切换不同身份用户登录的状态

        在登陆界面监听鼠标中键滚动的动作，借此来辅助完成切换跑马灯的效果，以达到切换不同身份用户登录的状态，具体代码如下：

mounted() {
  setTimeout(() => {
    *window*.addEventListener('mousewheel',this.handleScroll);
​
  },500)
}

        此处是在vue实例挂载到dom上去后设置界面监听鼠标滚轮的动作，但是在服务器启动的时候，需要时间缓冲不然直接调用会提示找不到setActiveItem。

        注意，在此处设置了对整个界面的监听，所以在本界面滚动鼠标中键，不会有界面上下滑动的效果，只会是切换登陆状态。

        此处也可以在挂载到dom上之前进行等待时间的时间设置。避免每次滚动滚轮的时候出现5ms的延迟，如果滚动过快会出现前一个什么还没切换完成，后一个就开始（可以加线程锁）。可使用另一种写法：

beforeCreate() {
  setTimeout(() => {
​
  },500)
  //此处500为测出的需要等待的最短时间
},
created() {
  *window*.addEventListener('mousewheel',this.handleScroll);
​
},

       此处设置等待时间，是为了在服务器重启之后，访问界面滚动滚轮出现setActiveItem函数找不到的情况。

       功能具体实现代码：

identityChoose(e){
      //跑马灯身份切换,按键版
      //将此时的状态赋值给在vm挂载的属性，每次跑马灯状态切换的时候，都会调用此函数，确保实时更新属性值。
      this.identityChange = e
      if (e === 1){
        this.identityShow.account = "工号"
      }else {
        this.identityShow.account = "学号"
      }
    },
handleScroll(e){
  //跑马灯身份切换,滚轮版
  //通过改变索引来改变跑马灯,0为学生页面，1为教师页面
  const elCarousel = this.$refs.elCarousel;
  //e.wheelDellta：可以用来获取鼠标的滚动方向，对于得到的值，只看正负，往上滚是正值，往下滚是负值。
  //火狐浏览器不支持这个方法，需要会用e.detail来获取滚轮的滚动方向，向上是负值，向下是正值
  let direction = e.deltaY > 0 ? 'down':'up';  //deltaY为正则滚轮向下，为负滚轮向上
  //100为用户一次滚动鼠标的wheelDelta的值,100与鼠标滚动一下是几行的不同而不同
  //此处100为编者自己测试得出，引用代码时候建议测一下改一下数值。
  if(direction === 'down' || e.deltaY >= 100){
    *console*.log("down")
      if (this.identityChange === 0){
        elCarousel.setActiveItem(1);
        this.identityShow.account = "工号"
      }else {
        elCarousel.setActiveItem(0);
        this.identityShow.account = "学号"
      }
​
•    *console*.log(this.identityChange)
  }
  if(direction === 'up' || e.deltaY <= -100){
•    *console*.log("up")
•    if (this.identityChange === 0){
•      elCarousel.setActiveItem(1);
•      this.identityShow.account = "工号"
•    }else {
•      elCarousel.setActiveItem(0);
•      this.identityShow.account = "学号"
•    }
  }
}

         HTML界面代码，这里使用的是element-ui作为整体的布局:

<div id="login">
      <div class="interior">
        <el-container>
          <el-aside width="200px">
            <el-carousel
                @change="identityChoose"
                height="450px"
                direction="vertical"
                :autoplay="false"
                ref="elCarousel"
            >
              <el-carousel-item v-for="item in identityImg" :key="item.name">
                <el-image :src="item.url"></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-aside>
          <el-main>
            <el-form :model="loginData">
              <div style="margin: 10px">
                <!--头像-->
                <el-avatar :size="100"></el-avatar>
              </div>
              <div class="el-input">
                <el-input
                    v-model="loginData.account"
                >
                  <template slot="prepend">{{identityShow.account}}:</template>
                </el-input>
              </div>
              <div class="el-input">
                <el-input
                    v-model="loginData.password"
                    show-password
                >
                  <template slot="prepend">密码</template>
                </el-input>
              </div>
              <el-row class="el-row">
                <el-col :span="15" style="vertical-align: center">
                  <el-switch
                      @change="allLogin"
                      v-model="loggingStatus"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="记住密码"
                  >
                  </el-switch>
                </el-col>
                <el-col :span="25">
                  <el-button type="success" plain @click="">登录</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-main>
        </el-container>
      </div>
  </div>