Vue监听子组件滚动条是否滑动底部

需求说明:
用户勾选协议,然后我们弹窗显示协议内容,

前面是检测 滚动条这里一直出错,今天试了一下,已经出来了
所以把代码贴出来

在这里,我们使用element ui 的dialog 在加载内容的里面内容, 这里的内容我封装成了组件
所以涉及到了父子组件

方法:

这个监听事件,只能放在子组件,然后在提交方法到父组件,父组件控制按钮禁用以及启用

所有说话不贴代码的,都是耍流氓,特别是贴代码贴一半的

<template>
  <div class="agreement">
    <ul class="agreement-ul">
      <li>请您仔细阅读以下风险提示：</li>

      <li>
        （1）本网站产品不属于生活消费品，不适用《中华人民共和国消费者权益保护法》、《网络购买商品七日无理由退货暂行办法》等规定。
      </li>

      <li>
        （2）本网站产品不同于生活消费类电子产品，而是根据客户需求特殊定制的产品。
      </li>
      <li>
        （3）除非本协议条款中有明确相反约定，您付款后均不能退款、退货、换货。
      </li>
    </ul> 
  </div>
</template>

css

<style scoped>
.agreement {
  height: 650px;
  overflow: auto;
}
.agreement-ul {
  text-decoration: underline;
  color: #000000;
  font-weight: bold;
}
.definition {
  font-weight: bold;
  color: #000000;
}
.agreement-ul2 {
  line-height: 30px;
}
</style>

js

<script>
export default {
  methods: {
    handleScroll() {
      let scrollTop = document.querySelector(".agreement").scrollTop;
      console.log(scrollTop, "移动距离");
      //
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.querySelector(".agreement").clientHeight;
      console.log(windowHeight, "windowHeight移动距离");
     
     //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.querySelector(".agreement").scrollHeight;
      console.log(scrollHeight, "scrollHeight移动距离");
     
     if (scrollTop + windowHeight == scrollHeight) {
     this.$emit("closeagreementdialog"); // 重点是 这句,  触发父方法,然后更改按钮状态
   //三个距离加起来等于了,表示滑动到最底部
       console.log(
          "距顶部" +
            scrollTop +
            "可视区高度" +
            windowHeight +
            "滚动条总高度" +
            scrollHeight
        );
      }
    },
  },
  mounted() {
    document
      .querySelector(".agreement")
      .addEventListener("scroll", this.handleScroll);
  },
};
</script>

上面这部分,就是 子组件的整个页面代码

下面是父组件 代码

          <el-checkbox v-model="checked" @change="Agreement"
            >协议条款</el-checkbox>


    <!-- 协议条款 -->
      <el-dialog
      v-loading="loading"
      width="60%"
      :top="'5vh'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="Agreementdialog"
      :destroy-on-close="true"
      :before-close="closeagreement"
      @open="openagereement(12)"
    >
      <span slot="title" class="dialog-title">
        协议条款 <span v-if="Agreementread != 0"> {{ Agreementread }} 秒 </span>
      </span>
      <agreement-tontent
        ref="achiness"
        @closeagreementdialog="closeagreementdialog"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeagreement">取 消</el-button>
        <el-button type="primary" :disabled="butdisabled" @click="agree"
          >确 定</el-button
        >
      </span>
    </el-dialog>

js

export default {
  data() {
    return { 
      checked: false, // 协议条款 是否同意,默认不同意
      Agreementdialog: false,  //协议弹窗
      Agreementread: 12, //秒
      Agreementdialogtime: {}, // 定时器
      butdisabled: true, //按钮是否禁用?
          
};
  },
  methods: {
    //协议条款
    //协议条款
    Agreement() {
      this.Agreementdialog = true;
    },
    openagereement(value) {
      // 重新打开dialog  协议弹窗
      this.Agreementread = value;
      this.butdisabled = true;
      this.Agreementdialogtime = window.setInterval(() => {
        this.Agreementread--;
        if (this.Agreementread == 0) {
          //当倒计时小于0时清除定时器
          window.clearInterval(this.Agreementdialogtime);
        }
      }, 1000);
    },
    //用户没有等待时间结束就关闭了dialog,清空 定时器
    closeagreement() {
      //
      console.log("非正常同意协议");
      window.clearInterval(this.Agreementdialogtime);
      this.checked = false;
      this.butdisabled=true;
      this.Agreementdialog = false;
    },
    //关闭协议弹窗
    closeagreementdialog() {
      let ageretimes = null;
      //用户阅读完协议, 确认按钮可以点击,并且选择 复选框, 提交订单按钮也可以点击
      if (ageretimes) {
        //不为空,表示已经创建了定时器
        return;
      }
      ageretimes = window.setInterval(() => {
        console.log("定时器触发");
        if (this.Agreementread == 0) {
          console.log("定时器进入");
          this.butdisabled = false;
          //当倒计时小于0时清除定时器
          window.clearInterval(ageretimes);
          console.log("关闭定时器");
        }
      }, 1000);
      console.log("已关闭定时器");
    },
    //用户点击同意协议
    agree() { 
      this.Agreementdialog = false;
      this.butdisabled = false;
      this.checked = true;
    },
  },

  components: {
    AgreementTontent,
  },
  mounted: function () {
  },
};

截图:

假如我们 ,点击取消,以及关闭 右上方的 X