登录页面设置用户必须勾选且阅读完某种协议才能登录或注册

1.功能需求

其实在很多软件的开发过程中，都会出现登录页面，尤其是一个成熟完整的系统，其中的登录页面多多少少的都属有用户须知的隐私协议，那么怎么在用户登录或者注册前让用户稍微浏览一下这个隐私协议呢？我们可以通过监听隐私协议的滚动以及用户是否点击了勾选隐私协议

2.页面展示

稍微粗糙的页面展示如下，当且仅当用户点击了勾选同意协议以及将相关协议浏览到底部的时候，这是点击登录，才会显示登录成功。如下了中的操作结果

3.实现步骤

** 其实要实现这个功能大致就两个核心，一是判断用户是否点击了这个勾选框，二是判断用户是否将隐私信息全部阅读完成，即监测滑轮是否移动到底部(不是浏览器的滚轮，而是这个盒子的滚轮)**

** 3.1 监测是否滑动到底部**

其实如果将一个元素的overflow设置为scroll的话，那我们就可以通过**scrollTop**，**scrollHeight**，**clientHeight**，这三个属性来获取元素是否滑动到了底部

** **

    watchPrivacy() {
      let ReadMainBox = this.$refs.ReadMainBox
      // console.log(ReadMainBox.scrollTop);       
      //元素滚动距离元素本身顶部的距离
      // console.log(ReadMainBox.scrollHeight);    
      //元素本身的高度加上padding和scroll的最大距离
      // console.log(ReadMainBox.clientHeight);    
      //clientHeight 为盒子的高度,不加上外边距和内边距
      if (ReadMainBox.scrollHeight - ReadMainBox.scrollTop !== ReadMainBox.clientHeight) 
     {
        alert('请阅读完隐私内容条')
        this.readFlag = false
      } else {
        this.readFlag = true
      }
    },

由于在Vue中不建议我们直接使用document来获取DOM元素，因此我们使用$refs来获取我们上面标注好的相关元素，这上面我大致做了一些关于这三个元素的相关说明，大致就是通过scrollHeight - scrollTop来判断是否等于clientHeight。如果等于的话就可以得出是移动到了底部，反之就未移动到底部。

** 3.2 监测用户是否勾选**

其实监测用户是否勾选就很简单了，我们可以动态绑定checked，然后通过一个变量来看是否勾选，勾选了就设置checked为true，反之就设置为false。

** 3.3 是否能点击登录按钮**

在我的代码中没有这个处理，但是其实实现也并不难，我们可以通过绑定一个disabled，用是否勾选以及是否滑动到底部来判断，但满足这两个是，就可以点击，反之就不能点击

4.全部代码

<template>
  <div class="MainBox">
    <div class="ReadMainBox" ref="ReadMainBox">相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
      相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议相关私密的协议
    </div>
    <div class="MainBoxBottom">
      <input type="checkbox" @click="checkPrivacy" :checked="checkFlag">
      <span class="checkBtnInfo">勾选同意协议</span>
    </div>
    <div class="loginBtn" @click="userLogin">点击登录</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkFlag: false,
      readFlag:false,
    }
  },
  methods: {
    checkPrivacy() {
      this.checkFlag = !this.checkFlag
    },
    //用来看是否隐私滑动到了底部 
    watchPrivacy() {
      let ReadMainBox = this.$refs.ReadMainBox
      // console.log(ReadMainBox.scrollTop);       //元素滚动距离元素本身顶部的距离
      // console.log(ReadMainBox.scrollHeight);    //元素本身的高度加上padding和scroll的最大距离
      // console.log(ReadMainBox.clientHeight);    //clientHeight 为盒子的高度,不加上外边距和内边距
      if (ReadMainBox.scrollHeight - ReadMainBox.scrollTop !== ReadMainBox.clientHeight) {
        alert('请阅读完隐私内容条')
        this.readFlag = false
      } else {
        this.readFlag = true
      }
    },
    userLogin() {
      this.watchPrivacy()
      console.log(this.readFlag,this.checkFlag);
      if(this.readFlag && this.checkFlag){
        console.log('登录成功');
      }else{
        alert('请读完隐私信息')
        console.log('请读完隐私信息');
      }
    },
  }
}
</script>

<style lang="less" scoped>
.MainBox {
  margin: 100px auto;
  width: 800px;
  height: 420px;
  border: 1px solid #ccc;

  .ReadMainBox {
    margin: 10px auto;
    width: 400px;
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ccc;
  }

  .MainBoxBottom {
    margin: 10px auto;
    align-items: center;
    width: 400px;
    height: 30px;
    line-height: 30px;
    justify-content: space-around;
    font-size: 14px;

    .checkBtnInfo {
      margin-left: 5px;
      position: relative;
      top: -2px;
    }
  }

  .loginBtn {
    margin: 0 auto;
    width: 100px;
    padding: 10px 5px;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
  }
}
</style>

5.总结

其实完成这个业务功能很简单，主要就是判断用户是否将隐私项滚动到了底部，然后就是是否勾选了。其实这背后还有待提升，**假设隐私内容是一个组件(其实设计到父子间怎么通知是否滑动到底部) **或者   **是一个新的页面， 用户勾选了再去查看隐私内容，涉及到跳转就会有页面销毁，数据保留的相关问题。**其实当这个业务复杂化的时候我们处理的情况就不在是这么单一，**涉及到的相关问题欢迎各位在评论区中进行相关的探讨，一起学习，一起进步**