Vue.js 链接有效性检测：自动执行、实时显示并保留结果

使用 Vue.js 实现链接有效性检测并保留结果

本文将介绍如何使用 Vue.js 实现一个链接有效性检测功能，并在页面加载完成后自动执行检测，实时显示结果，并使用 localStorage 保留结果，直到页面关闭。

代码示例

var icydm_pancheck = new Vue({
  el: '.icydm-pancheck',
  data: {
    data_text: '',
    data: localStorage.getItem('pancheck_data') || '',
  },
  mounted() {
    window.addEventListener('beforeunload', this.clearData);
    this.checkPan();
  },
  methods: {
    checkPan() {
      if (!this.$refs.pancheck) return;
      let post_id = this.$refs.pancheck.getAttribute('data-id');
      this.$https.post(b2_global.site_info.admin_ajax, 'id=' + post_id + '&action=icydm_pancheck').then(res => {
        this.data = res.data;
        if (this.data) {
          Qmsg['success'](this.data, { html: true });
          localStorage.setItem('pancheck_data', this.data);
        } else {
          Qmsg['success']('正在检查中，请稍后点击...', { html: true });
        }
      });
    },
    pancheck() {
      this.checkPan();
    },
    clearData() {
      localStorage.removeItem('pancheck_data');
    }
  }
});

代码解析

1. data 属性:
   • data_text: 用于存储显示文本，目前未使用。
   • data: 用于存储检测结果，并使用 localStorage 获取之前保存的结果。
2. mounted 钩子函数:
   • 添加 beforeunload 事件监听，在页面关闭前调用 clearData 方法清除 localStorage 中的数据。
   • 调用 checkPan 方法，执行检测。
3. checkPan 方法:
   • 获取按钮的 data-id 属性。
   • 使用 $https 发送请求，获取检测结果。
   • 根据结果更新 data 属性，并使用 Qmsg 显示消息。
   • 将检测结果存储到 localStorage 中。
4. pancheck 方法:
   • 重新调用 checkPan 方法，执行检测。
5. clearData 方法:
   • 从 localStorage 中移除 pancheck_data 数据。

工作原理

1. 页面加载时，mounted 钩子函数执行，并调用 checkPan 方法开始检测链接有效性。
2. checkPan 方法发送请求，获取检测结果，并将结果存储到 data 属性和 localStorage 中。
3. 根据 data 属性的值更新按钮显示。
4. 页面关闭时，beforeunload 事件触发，调用 clearData 方法清除 localStorage 中的数据，以便下次重新加载页面时重新检测。

总结

通过上述代码，可以实现一个自动执行、实时显示并保留结果的链接有效性检测功能。用户无需手动点击按钮，即可获得最新的检测结果。

注意: 以上代码示例仅供参考，具体实现需要根据实际情况进行调整。